/* Import expressive fonts for a modern, readable UI. */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=Space+Grotesk:wght@500;600;700&display=swap');

/* Root-level design tokens for consistent theming. */
:root {
    /* Primary brand color for buttons and highlights. */
    --color-primary: #4c8dff;
    /* Secondary accent for subtle emphasis. */
    --color-accent: #35d0a6;
    /* Deep text color for high contrast. */
    --color-text: #e7eef8;
    /* Muted text color for supporting copy. */
    --color-muted: #a6b3c9;
    /* Light background color for cards. */
    --color-surface: #0f172a;
    /* Soft border color for inputs and cards. */
    --color-border: #1f2a44;
    /* Background gradient start. */
    --color-bg-start: #0b1220;
    /* Background gradient end. */
    --color-bg-end: #0c162b;
    /* Warning/error color for alerts. */
    --color-error: #f87171;
    /* Success color for alerts. */
    --color-success: #34d399;
    /* Shadow color for elevated surfaces. */
    --color-shadow: rgba(2, 6, 23, 0.6);
    /* Heading font family (expressive). */
    --font-heading: 'Space Grotesk', sans-serif;
    /* Body font family (clean and readable). */
    --font-body: 'DM Sans', sans-serif;
    /* Base border radius for UI elements. */
    --radius-base: 16px;
}

/* Theme presets. */
body.theme-graphite { /* Current default theme. */
    --color-primary: #4c8dff;
    --color-accent: #35d0a6;
    --color-text: #e7eef8;
    --color-muted: #a6b3c9;
    --color-surface: #0f172a;
    --color-border: #1f2a44;
    --color-bg-start: #0b1220;
    --color-bg-end: #0c162b;
    --color-error: #f87171;
    --color-success: #34d399;
    --color-shadow: rgba(2, 6, 23, 0.6);
} /* End graphite theme. */

body.theme-dark { /* Deeper dark theme. */
    --color-primary: #6ea8ff;
    --color-accent: #39d3b2;
    --color-text: #edf2f9;
    --color-muted: #98a6be;
    --color-surface: #0a0f1f;
    --color-border: #1a243a;
    --color-bg-start: #070b15;
    --color-bg-end: #0b1022;
    --color-error: #fb7185;
    --color-success: #22c55e;
    --color-shadow: rgba(2, 6, 23, 0.75);
} /* End dark theme. */

body.theme-light { /* Light theme. */
    --color-primary: #2563eb;
    --color-accent: #0ea5a3;
    --color-text: #1e293b;
    --color-muted: #5b6b84;
    --color-surface: #ffffff;
    --color-border: #d5dde9;
    --color-bg-start: #f7f9fc;
    --color-bg-end: #e8eef7;
    --color-error: #ef4444;
    --color-success: #10b981;
    --color-shadow: rgba(15, 23, 42, 0.12);
} /* End light theme. */

body.theme-bright { /* Vibrant theme. */
    --color-primary: #ff6b3d;
    --color-accent: #ffd166;
    --color-text: #fdf9f3;
    --color-muted: #f1d9c7;
    --color-surface: #1b0f23;
    --color-border: #3a1f4f;
    --color-bg-start: #170c2b;
    --color-bg-end: #2a0f2f;
    --color-error: #ff4d6d;
    --color-success: #2dd4bf;
    --color-shadow: rgba(20, 8, 30, 0.7);
} /* End bright theme. */

/* Global box-sizing reset for consistent layouts. */
* {
    box-sizing: border-box;
}

/* Base body styling for typography and color. */
body {
    margin: 0;
    font-family: var(--font-body);
    color: var(--color-text);
    background: linear-gradient(135deg, var(--color-bg-start), var(--color-bg-end));
    min-height: 100vh;
}

/* Ensure links inherit base styling while remaining accessible. */
a {
    color: inherit;
    text-decoration: none;
}

/* Page wrapper for layout padding. */
.page {
    position: relative;
    min-height: 100vh;
    overflow-x: hidden;
}

/* Background gradient layer for subtle depth. */
.bg-gradient {
    position: fixed;
    inset: 0;
    background: radial-gradient(circle at top left, rgba(76, 141, 255, 0.18), transparent 55%),
        radial-gradient(circle at bottom right, rgba(53, 208, 166, 0.14), transparent 45%);
    z-index: 0;
}

/* Floating orb shapes for visual interest. */
.bg-orb {
    position: fixed;
    border-radius: 50%;
    filter: blur(0.5px);
    opacity: 0.6;
    z-index: 0;
}

/* First orb style. */
.bg-orb--one {
    width: 240px;
    height: 240px;
    background: rgba(76, 141, 255, 0.2);
    top: -80px;
    right: -60px;
}

/* Second orb style. */
.bg-orb--two {
    width: 320px;
    height: 320px;
    background: rgba(53, 208, 166, 0.18);
    bottom: -120px;
    left: -90px;
}

/* Shared container width and padding. */
.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 32px 24px 72px;
    position: relative;
    z-index: 1;
}

/* Authentication layout container. */
.auth {
    max-width: 520px;
    margin: 0 auto;
    padding: 72px 24px 96px;
    position: relative;
    z-index: 1;
}

/* Brand header for auth screens. */
.auth__header {
    text-align: center;
    margin-bottom: 24px;
}

/* Brand title styling. */
.auth__title {
    font-family: var(--font-heading);
    font-size: 32px;
    margin: 0;
}

/* Brand subtitle styling. */
.auth__subtitle {
    color: var(--color-muted);
    margin: 8px 0 0;
}

/* Topbar layout for authenticated pages. */
.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    gap: 16px;
    position: sticky;
    top: 0;
    background: rgba(15, 23, 42, 0.85);
    backdrop-filter: blur(14px);
    z-index: 2;
    border-bottom: 1px solid rgba(31, 42, 68, 0.7);
}

/* Brand layout inside topbar. */
.topbar__brand {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Brand name style. */
.brand__name {
    font-family: var(--font-heading);
    font-size: 18px;
}

/* Brand tag style. */
.brand__tag {
    font-size: 12px;
    color: var(--color-muted);
}

/* Topbar navigation layout. */
.topbar__nav {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

/* Navigation link styling. */
.nav__link {
    font-weight: 600;
    color: var(--color-text);
    padding: 6px 10px;
    border-radius: 999px;
    transition: background 0.2s ease, color 0.2s ease;
}

/* Navigation link hover effect. */
.nav__link:hover {
    background: rgba(35, 100, 210, 0.1);
    color: var(--color-primary);
}

/* Logout form alignment. */
.topbar__logout {
    margin-left: auto;
}

/* Card styling for content blocks. */
.card {
    background: var(--color-surface);
    border-radius: var(--radius-base);
    padding: 24px;
    box-shadow: 0 20px 40px var(--color-shadow);
    border: 1px solid rgba(31, 42, 68, 0.8);
    animation: fadeUp 0.6s ease backwards;
    transform: none;
}

/* Wider card variant. */
.card--wide {
    margin-top: 24px;
}

/* Product hero header on product detail pages. */
.product-hero { /* Highlight the product name. */
    background: rgba(15, 23, 42, 0.75); /* Slightly brighter panel. */
    border: 1px solid rgba(76, 141, 255, 0.2); /* Subtle accent border. */
} /* End of product hero. */

.product-hero__row { /* Layout for hero content. */
    display: flex; /* Horizontal layout. */
    justify-content: space-between; /* Space between text and actions. */
    gap: 20px; /* Spacing between columns. */
    align-items: flex-start; /* Align to top. */
    flex-wrap: wrap; /* Allow wrap on smaller screens. */
} /* End of hero row. */

.product-hero__title { /* Product title styling. */
    font-size: clamp(24px, 3vw, 34px); /* Larger title size. */
    margin: 6px 0 8px; /* Tighten spacing. */
    color: var(--color-text); /* Use main text color. */
} /* End of hero title. */

.product-hero__badge { /* Product type badge. */
    display: inline-flex; /* Inline badge styling. */
    padding: 4px 10px; /* Compact padding. */
    border-radius: 999px; /* Pill shape. */
    font-size: 12px; /* Small badge text. */
    text-transform: uppercase; /* Uppercase label. */
    letter-spacing: 0.04em; /* Slight tracking. */
    background: rgba(76, 141, 255, 0.18); /* Light primary background. */
    color: var(--color-primary); /* Primary color text. */
} /* End of hero badge. */

.product-hero__meta { /* Secondary meta row. */
    display: flex; /* Row layout. */
    flex-wrap: wrap; /* Allow wrap. */
    gap: 12px; /* Spacing between meta items. */
    color: var(--color-muted); /* Muted text color. */
    font-size: 14px; /* Compact meta size. */
} /* End of hero meta. */

.product-hero__meta-item { /* Meta item with inline actions. */
    display: inline-flex; /* Align text and icon. */
    align-items: center; /* Center vertically. */
    gap: 6px; /* Space between text and button. */
} /* End meta item. */

.product-hero__actions { /* Action buttons group. */
    display: flex; /* Align buttons. */
    gap: 10px; /* Space between buttons. */
    flex-wrap: wrap; /* Wrap on small screens. */
} /* End of hero actions. */

.product-hero__actions form { /* Normalize form spacing in hero actions. */
    margin: 0; /* Remove default margins. */
} /* End form reset. */

/* Auth card variant. */
.card--auth {
    padding: 28px;
}

/* Card title styling. */
.card__title {
    font-family: var(--font-heading);
    font-size: 20px;
    margin: 0 0 8px;
}

.card__title-meta { /* Meta text inside titles. */
    font-size: 14px; /* Smaller meta text. */
    color: var(--color-muted); /* Muted meta color. */
    font-weight: 500; /* Medium weight. */
} /* End title meta. */

/* Accordion container for collapsible charts. */
.accordion { /* Accordion wrapper styling. */
    background: var(--color-surface); /* Match card surface. */
    border-radius: var(--radius-base); /* Rounded corners. */
    padding: 20px; /* Inner padding. */
    border: 1px solid rgba(31, 42, 68, 0.8); /* Subtle border. */
    box-shadow: 0 20px 40px var(--color-shadow); /* Soft shadow. */
} /* End of accordion styles. */

.accordion__summary { /* Accordion summary row. */
    cursor: pointer; /* Show pointer cursor. */
    font-family: var(--font-heading); /* Emphasize title. */
    font-size: 18px; /* Slightly larger text. */
    list-style: none; /* Remove default marker. */
} /* End of summary styles. */

.accordion__summary::-webkit-details-marker { /* Remove marker for webkit. */
    display: none; /* Hide marker. */
} /* End of webkit marker rule. */

.accordion__body { /* Accordion body spacing. */
    margin-top: 16px; /* Space between summary and content. */
    display: grid; /* Stack content. */
    gap: 16px; /* Space between chart blocks. */
} /* End of accordion body styles. */

.data-grid { /* Simple key/value layout. */
    display: grid; /* Grid layout. */
    gap: 10px; /* Row spacing. */
} /* End data-grid. */

.data-grid__row { /* Row for key/value. */
    display: grid; /* Grid layout. */
    grid-template-columns: minmax(140px, 220px) 1fr; /* Label/value columns. */
    gap: 12px; /* Gap between columns. */
    align-items: center; /* Align rows. */
} /* End row. */

.data-grid__label { /* Label styling. */
    color: var(--color-muted); /* Muted text. */
    font-size: 13px; /* Smaller label. */
} /* End label. */

.data-grid__value { /* Value styling. */
    color: var(--color-text); /* Base text. */
    word-break: break-word; /* Prevent overflow. */
} /* End value. */

.data-grid__row { /* Ensure long values can wrap. */
    min-width: 0; /* Allow shrinking. */
} /* End row. */

.data-grid__value { /* Ensure wrap. */
    min-width: 0; /* Allow shrink. */
    overflow-wrap: anywhere; /* Break long tokens. */
} /* End value wrap. */

.data-grid__value--wrap { /* Force wrap for long payloads. */
    display: block; /* Treat as block. */
    max-width: 100%; /* Do not exceed container. */
    white-space: normal; /* Allow wrapping. */
    overflow-wrap: anywhere; /* Break long tokens. */
    word-break: break-word; /* Fallback break. */
} /* End wrap. */

.table__cell--wrap { /* Wrap long table cell values. */
    max-width: 520px; /* Keep within layout. */
    white-space: normal; /* Allow wrapping. */
    overflow-wrap: anywhere; /* Break long tokens. */
    word-break: break-word; /* Fallback break. */
} /* End wrap cell. */

.order-addresses { /* Layout for billing/shipping blocks. */
    display: grid; /* Use grid layout. */
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* Two columns. */
    gap: 16px; /* Space between columns. */
} /* End order-addresses. */

@media (max-width: 900px) { /* Stack on smaller screens. */
    .order-addresses { /* Adjust layout. */
        grid-template-columns: 1fr; /* Single column. */
    } /* End responsive override. */
} /* End mobile breakpoint. */

.log-console--tight { /* Compact console output. */
    max-height: 420px; /* Keep compact height. */
    overflow: auto; /* Scroll for long content. */
} /* End compact console. */

.content-box { /* Rich text container. */
    padding: 12px; /* Inner spacing. */
    border: 1px solid rgba(148, 163, 184, 0.2); /* Subtle border. */
    border-radius: 12px; /* Rounded corners. */
    background: rgba(15, 23, 42, 0.35); /* Soft background. */
    line-height: 1.6; /* Comfortable line height. */
} /* End content box. */

.tag { /* Small tag label. */
    display: inline-flex; /* Inline flex. */
    align-items: center; /* Center text. */
    gap: 6px; /* Small gap. */
    padding: 2px 8px; /* Compact padding. */
    border-radius: 999px; /* Pill shape. */
    border: 1px solid rgba(148, 163, 184, 0.3); /* Border. */
    font-size: 12px; /* Small font. */
    color: var(--color-text); /* Base text. */
    background: rgba(15, 23, 42, 0.3); /* Subtle background. */
} /* End tag. */

.tag--success { /* Success tag. */
    border-color: rgba(76, 141, 255, 0.5); /* Accent border. */
    color: var(--color-primary); /* Accent text. */
    background: rgba(76, 141, 255, 0.15); /* Accent background. */
} /* End success tag. */

/* Card actions layout for compact toolbars. */
.card-actions { /* Define action container layout. */
    display: flex; /* Use flexbox for alignment. */
    align-items: center; /* Vertically align action items. */
    gap: 12px; /* Add spacing between action items. */
    margin: 16px 0 8px; /* Add spacing around the action row. */
} /* End of card actions styles. */

/* Right-aligned card actions. */
.card-actions--end { /* Align card actions to the end. */
    justify-content: flex-end; /* Push actions to the right. */
} /* End of card actions end styles. */

.is-hidden { /* Utility hidden class. */
    display: none !important; /* Force hidden. */
} /* End hidden utility. */

/* Tabbed navigation for settings panels. */
.tabs { /* Container for tab buttons. */
    display: flex; /* Align tabs in a row. */
    flex-wrap: wrap; /* Allow wrapping on smaller screens. */
    gap: 8px; /* Space between tabs. */
    margin: 16px 0 20px; /* Space around tabs. */
} /* End of tabs container. */

.tab-button { /* Single tab button. */
    border: 1px solid rgba(148, 163, 184, 0.35); /* Subtle border. */
    background: rgba(15, 23, 42, 0.5); /* Soft background. */
    color: var(--color-muted); /* Muted text color. */
    padding: 6px 14px; /* Compact padding. */
    border-radius: 999px; /* Pill shape. */
    font-size: 13px; /* Small tab label. */
    cursor: pointer; /* Pointer cursor for tabs. */
} /* End of tab button. */

.tab-button.is-active { /* Active tab styling. */
    border-color: rgba(76, 141, 255, 0.6); /* Highlight border. */
    color: var(--color-text); /* Brighter text. */
    background: rgba(76, 141, 255, 0.18); /* Accent background. */
} /* End of active tab. */

.tab-panel { /* Base tab panel. */
    display: none; /* Hidden by default. */
} /* End of tab panel base. */

.tab-panel.is-active { /* Visible tab panel. */
    display: block; /* Show the active panel. */
} /* End of active panel. */

.modal { /* Modal wrapper. */
    position: fixed; /* Overlay positioning. */
    inset: 0; /* Full screen overlay. */
    display: none; /* Hidden by default. */
    align-items: center; /* Center vertically. */
    justify-content: center; /* Center horizontally. */
    z-index: 1200; /* Above content. */
}

.modal.is-active { /* Visible modal. */
    display: flex; /* Show modal. */
}

.modal__backdrop { /* Modal backdrop. */
    position: absolute; /* Cover screen. */
    inset: 0; /* Full screen. */
    background: rgba(8, 12, 20, 0.72); /* Dark overlay. */
}

.modal__content { /* Modal card. */
    position: relative; /* Layer above backdrop. */
    width: min(640px, 92vw); /* Responsive width. */
    background: rgba(15, 23, 42, 0.95); /* Card background. */
    border: 1px solid rgba(148, 163, 184, 0.2); /* Subtle border. */
    border-radius: 16px; /* Rounded corners. */
    padding: 20px; /* Inner spacing. */
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35); /* Depth. */
}

.modal__header { /* Modal header. */
    display: flex; /* Align items. */
    justify-content: space-between; /* Title + close. */
    align-items: center; /* Center align. */
    gap: 12px; /* Spacing. */
    margin-bottom: 12px; /* Separation. */
}

/* Card subtitle styling. */
.card__subtitle {
    color: var(--color-muted);
    margin: 0 0 20px;
}

/* Card main text styling. */
.card__text {
    color: var(--color-muted);
    margin: 0 0 20px;
    line-height: 1.6;
}

/* Card value styling for metrics. */
.card__value {
    font-family: var(--font-heading);
    font-size: 36px;
    margin: 0;
}

/* Card note styling for metrics. */
.card__note {
    color: var(--color-muted);
    margin: 6px 0 0;
}

/* Page title styling. */
.page-title {
    font-family: var(--font-heading);
    font-size: 28px;
    margin: 24px 0 20px;
}

/* Form layout. */
.form {
    display: grid;
    gap: 16px;
}

/* Wider form layout used on settings. */
.form--wide {
    max-width: 720px;
}

/* Full-width form layout for filter panels. */
.form--full {
    max-width: none;
    width: 100%;
}

/* Inline form layout for small action forms. */
.form--inline { /* Define inline form layout. */
    display: flex; /* Align inline form items horizontally. */
    gap: 12px; /* Add spacing between inline items. */
    align-items: center; /* Vertically align inline items. */
    margin-top: 12px; /* Add spacing above the inline form. */
} /* End of inline form styles. */

/* Form group layout. */
.form__group {
    display: grid;
    gap: 8px;
}

/* Form section heading. */
.form__section {
    font-family: var(--font-heading);
    font-size: 16px;
    margin: 8px 0 4px;
}

/* Form label styling. */
.form__label {
    font-weight: 600;
}

/* Form input styling. */
.form__input {
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid var(--color-border);
    background: rgba(15, 23, 42, 0.6); /* Darken input background for contrast. */
    color: var(--color-text); /* Ensure input text is readable on dark surfaces. */
    font-family: var(--font-body);
    font-size: 15px;
    transition: border 0.2s ease, box-shadow 0.2s ease;
}

/* Placeholder text styling for inputs. */
.form__input::placeholder { /* Target placeholder text in inputs. */
    color: rgba(166, 179, 201, 0.7); /* Keep placeholder text muted but readable. */
} /* End of placeholder styling. */

/* Helper text under form fields. */
.form__hint { /* Small hint text for inputs. */
    margin-top: 6px; /* Space above hint text. */
    color: var(--color-muted); /* Muted hint color. */
    font-size: 13px; /* Slightly smaller font size. */
} /* End of form hint styles. */

/* Form input focus styling. */
.form__input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 4px rgba(76, 141, 255, 0.22);
}

/* Row layout inside forms. */
.form__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

/* Grid layout for filter forms. */
.filters-grid { /* Arrange filter fields in a responsive grid. */
    display: grid; /* Use grid layout. */
    gap: 14px; /* Space between fields. */
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Responsive columns. */
    align-items: end; /* Align fields to bottom. */
} /* End of filters grid styles. */

.filters-actions { /* Actions row for filters. */
    display: flex; /* Align buttons in a row. */
    gap: 12px; /* Space between buttons. */
    margin-top: 12px; /* Space above actions. */
    align-items: center; /* Vertically align buttons. */
} /* End of filter actions styles. */

/* Checkbox label styling. */
.form__checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--color-muted);
}

/* Button base styling. */
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 18px;
    border-radius: 999px;
    border: none;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Compact button variant for tight spaces. */
.button--compact { /* Define a smaller button size. */
    padding: 6px 12px; /* Reduce padding for compact buttons. */
    font-size: 13px; /* Use a smaller font size. */
} /* End of compact button styles. */

/* Primary button styling. */
.button--primary {
    background: var(--color-primary);
    color: white;
    box-shadow: 0 14px 30px rgba(76, 141, 255, 0.3);
}

/* Ghost button styling. */
.button--ghost {
    background: transparent;
    color: var(--color-primary);
    border: 1px dashed rgba(76, 141, 255, 0.4);
}

/* Button hover effect. */
.button:hover {
    transform: translateY(-1px);
}

/* Alert base styling. */
.alert {
    padding: 12px 14px;
    border-radius: 12px;
    font-size: 14px;
}

/* Success alert styling. */
.alert--success {
    background: rgba(52, 211, 153, 0.12);
    color: var(--color-success);
    border: 1px solid rgba(52, 211, 153, 0.35);
}

/* Error alert styling. */
.alert--error {
    background: rgba(248, 113, 113, 0.12);
    color: var(--color-error);
    border: 1px solid rgba(248, 113, 113, 0.35);
}

/* Alert list layout. */
.alert__list {
    margin: 0;
    padding-left: 18px;
}

/* Link styling. */
.link {
    color: var(--color-primary);
    font-weight: 600;
}

/* Block link styling for full-width links. */
.link--block {
    display: inline-block;
    margin-top: 12px;
}

/* Grid layout for cards. */
.grid {
    display: grid;
    gap: 20px;
}

/* Two-column grid layout. */
.grid--two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Three-column grid layout. */
.grid--three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Simple list styling. */
.list {
    margin: 12px 0 20px;
    padding-left: 18px;
    color: var(--color-muted);
}

/* Fade-up animation for cards. */
@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Respect reduced motion preferences. */
@media (prefers-reduced-motion: reduce) {
    .card {
        animation: none;
    }
    .button {
        transition: none;
    }
    .process-bar__progress { /* Disable progress animation when motion is reduced. */
        animation: none; /* Remove animation for accessibility. */
    } /* End of reduced-motion progress styles. */
}

/* Responsive adjustments for smaller screens. */
@media (max-width: 900px) {
    .grid--three {
        grid-template-columns: 1fr;
    }

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

    .topbar {
        flex-direction: column;
        align-items: flex-start;
    }

    .topbar__logout {
        margin-left: 0;
    }
}

/* Extra small screen tweaks. */
@media (max-width: 600px) {
    .auth {
        padding: 48px 18px 72px;
    }

    .container {
        padding: 24px 18px 64px;
    }

    .page-title {
        font-size: 24px;
    }
}

/* Layout grid for sidebar + content. */
.layout { /* Define the main layout container. */
    display: grid; /* Use CSS grid for two columns. */
    grid-template-columns: minmax(280px, 15%) 1fr; /* Sidebar min 280px, target 15%. */
    min-height: 100vh; /* Ensure layout spans full viewport height. */
    position: relative; /* Establish positioning context for children. */
    z-index: 1; /* Keep layout above background decorations. */
} /* End of layout styles. */

/* Sidebar container styling. */
.sidebar { /* Define sidebar base styling. */
    padding: 32px 20px; /* Add spacing around sidebar content. */
    background: rgba(15, 23, 42, 0.92); /* Dark, translucent background. */
    border-right: 1px solid rgba(31, 42, 68, 0.8); /* Subtle divider line. */
    box-shadow: 0 20px 36px rgba(255, 255, 255, 0.18), 0 8px 20px rgba(2, 6, 23, 0.35); /* Brighter white glow under sidebar. */
    backdrop-filter: blur(12px); /* Add gentle blur effect. */
    position: sticky; /* Keep sidebar visible during scroll. */
    top: 0; /* Stick to the top of the viewport. */
    height: 100vh; /* Sidebar spans full viewport height. */
    overflow-y: auto; /* Allow scrolling if content overflows. */
} /* End of sidebar styles. */

.nav-toggle { /* Mobile navigation toggle button. */
    display: none; /* Hidden on desktop. */
    align-items: center; /* Center icon/label. */
    gap: 8px; /* Space between glyph and text. */
    padding: 6px 10px; /* Compact padding. */
    border-radius: 999px; /* Pill button. */
    border: 1px solid rgba(31, 42, 68, 0.8); /* Subtle border. */
    background: rgba(15, 23, 42, 0.7); /* Dark background. */
    color: var(--color-text); /* Base text color. */
    cursor: pointer; /* Pointer cursor. */
    font-size: 12px; /* Compact font. */
    font-weight: 600; /* Slight emphasis. */
} /* End nav toggle. */

.nav-toggle::before { /* Hamburger glyph. */
    content: "≡"; /* Simple menu glyph. */
    font-size: 14px; /* Slightly larger. */
} /* End nav toggle glyph. */

.sidebar-backdrop { /* Backdrop for mobile sidebar. */
    position: fixed; /* Cover viewport. */
    inset: 0; /* Fullscreen. */
    background: rgba(4, 8, 18, 0.55); /* Dim background. */
    opacity: 0; /* Hidden by default. */
    pointer-events: none; /* Ignore when hidden. */
    transition: opacity 0.2s ease; /* Fade transition. */
    z-index: 25; /* Above content, below sidebar. */
} /* End sidebar backdrop. */

/* Sidebar brand section. */
.sidebar__brand { /* Define layout for brand header. */
    display: flex; /* Use flexbox for vertical alignment. */
    flex-direction: column; /* Stack brand items vertically. */
    gap: 6px; /* Add spacing between brand lines. */
    margin-bottom: 28px; /* Separate brand from navigation. */
} /* End of brand styles. */

/* Sidebar brand title. */
.sidebar__title { /* Style the app name in the sidebar. */
    font-family: var(--font-heading); /* Use heading font for emphasis. */
    font-size: 20px; /* Set title size. */
} /* End of sidebar title styles. */

/* Sidebar brand subtitle. */
.sidebar__subtitle { /* Style the brand subtitle. */
    color: var(--color-muted); /* Use muted text color. */
    font-size: 13px; /* Set subtitle size. */
} /* End of sidebar subtitle styles. */

/* Sidebar navigation container. */
.sidebar__nav { /* Style the navigation wrapper. */
    display: flex; /* Use flex layout. */
    flex-direction: column; /* Stack navigation sections vertically. */
    gap: 18px; /* Add spacing between sections. */
} /* End of sidebar nav styles. */

/* Navigation section styling. */
.nav-section { /* Define nav section container. */
    display: flex; /* Use flex layout. */
    flex-direction: column; /* Stack links vertically. */
    gap: 10px; /* Space between links. */
} /* End of nav section styles. */

/* Navigation section title styling. */
.nav-section__title { /* Define section title style. */
    font-size: 12px; /* Smaller text for section labels. */
    text-transform: uppercase; /* Use uppercase for labels. */
    letter-spacing: 0.08em; /* Increase letter spacing. */
    color: var(--color-muted); /* Use muted color for labels. */
} /* End of nav section title styles. */

/* Navigation link styling. */
.nav-link { /* Base style for nav links. */
    display: inline-flex; /* Align text nicely with icons in the future. */
    align-items: center; /* Vertically center link text. */
    gap: 8px; /* Reserve space for potential icons. */
    padding: 8px 12px; /* Add padding for clickable area. */
    border-radius: 999px; /* Rounded pill shape. */
    font-weight: 600; /* Emphasize navigation links. */
    color: var(--color-text); /* Use primary text color. */
    transition: background 0.2s ease, color 0.2s ease; /* Smooth hover transitions. */
} /* End of nav link styles. */

/* Nested navigation links. */
.nav-link--nested { /* Style nested links within store groups. */
    margin-left: 8px; /* Indent nested links slightly. */
    font-weight: 500; /* Slightly lighter weight for nested items. */
} /* End of nested nav link styles. */

/* Navigation link hover effect. */
.nav-link:hover { /* Hover state for nav links. */
    background: rgba(76, 141, 255, 0.18); /* Light primary tint on hover. */
    color: var(--color-primary); /* Use primary color on hover. */
} /* End of hover styles. */

/* Collapsible nav group container. */
.nav-group { /* Base style for collapsible groups. */
    border: 1px solid rgba(31, 42, 68, 0.8); /* Add a subtle border. */
    border-radius: 16px; /* Match card rounding. */
    padding: 10px 12px; /* Add inner spacing. */
    background: rgba(15, 23, 42, 0.65); /* Slightly translucent background. */
} /* End of nav group styles. */

/* Summary label for nav groups. */
.nav-group__summary { /* Style the summary line. */
    font-weight: 600; /* Emphasize group titles. */
    cursor: pointer; /* Show pointer cursor for clickable summary. */
    list-style: none; /* Remove default disclosure marker. */
} /* End of nav group summary styles. */

/* Hide default marker for summary. */
.nav-group__summary::-webkit-details-marker { /* Remove default marker in WebKit. */
    display: none; /* Hide the marker. */
} /* End of marker removal. */

/* Group content container. */
.nav-group__content { /* Style the nav group content. */
    display: grid; /* Use grid for vertical spacing. */
    gap: 8px; /* Add spacing between items. */
    margin-top: 10px; /* Add space below summary. */
} /* End of nav group content styles. */

.nav-group__content--tools { /* Tighter layout for tool categories. */
    gap: 10px; /* Slightly larger gaps for sections. */
} /* End tools content. */

.nav-flyout { /* Tool category container. */
    display: flex; /* Stack label and menu. */
    flex-direction: column; /* Vertical layout. */
    gap: 6px; /* Space between label and menu. */
} /* End flyout container. */

.nav-flyout__label { /* Category label (summary). */
    display: flex; /* Align label and chevron. */
    align-items: center; /* Vertically center. */
    justify-content: space-between; /* Space for arrow. */
    padding: 8px 12px; /* Match nav link padding. */
    border-radius: 999px; /* Pill shape. */
    border: 1px solid rgba(44, 62, 99, 0.8); /* Subtle outline. */
    background: rgba(18, 28, 52, 0.8); /* Darker tint. */
    color: var(--color-text); /* Use text color. */
    font-weight: 600; /* Emphasize label. */
    cursor: pointer; /* Clickable cursor. */
    list-style: none; /* Remove marker. */
    transition: background 0.2s ease, color 0.2s ease; /* Smooth hover. */
} /* End label. */

.nav-flyout__label::-webkit-details-marker { /* Hide default marker. */
    display: none; /* Hide. */
} /* End marker hide. */

.nav-flyout__label::after { /* Chevron indicator. */
    content: '▸'; /* Chevron glyph. */
    font-size: 12px; /* Small arrow. */
    opacity: 0.7; /* Slightly muted. */
    transition: transform 0.2s ease; /* Rotate on open. */
} /* End chevron. */

.nav-flyout__menu { /* Hidden menu list. */
    display: none; /* Hidden by default. */
    flex-direction: column; /* Stack links. */
    gap: 6px; /* Spacing between items. */
    padding-left: 10px; /* Indent menu. */
    margin-left: 6px; /* Align with label. */
    border-left: 1px dashed rgba(44, 62, 99, 0.6); /* Visual guide. */
} /* End menu. */

.nav-flyout[open] .nav-flyout__menu { /* Show menu when open. */
    display: flex; /* Reveal menu. */
} /* End reveal. */

.nav-flyout[open] .nav-flyout__label::after { /* Rotate chevron when open. */
    transform: rotate(90deg); /* Rotate arrow. */
} /* End chevron rotate. */

.nav-link--flyout { /* Flyout link sizing. */
    padding: 6px 10px; /* Slightly tighter. */
    font-weight: 500; /* Softer weight. */
} /* End flyout link. */

.nav-flyout__empty { /* Empty placeholder. */
    color: var(--color-muted); /* Muted text. */
    font-size: 12px; /* Small text. */
    padding: 4px 8px; /* Align with links. */
} /* End empty placeholder. */

/* Subgroup for a single store. */
.nav-subgroup { /* Style the store-specific subgroup. */
    border-radius: 12px; /* Rounded corners for subgroups. */
    padding: 6px 8px; /* Add inner spacing. */
    background: rgba(20, 30, 50, 0.7); /* Soft tint background. */
} /* End of nav subgroup styles. */

/* Summary label for subgroups. */
.nav-subgroup__summary { /* Style the store name summary. */
    font-weight: 600; /* Emphasize store names. */
    cursor: pointer; /* Show pointer cursor for clickable summary. */
    list-style: none; /* Remove default disclosure marker. */
} /* End of nav subgroup summary styles. */

/* Empty nav text. */
.nav-empty { /* Style empty state text. */
    color: var(--color-muted); /* Use muted text color. */
    font-size: 13px; /* Slightly smaller text. */
    margin: 0; /* Remove default margins. */
    padding: 4px 8px; /* Add subtle padding. */
} /* End of nav empty styles. */

/* Main content column styling. */
.content { /* Define main content wrapper. */
    padding: 32px 32px 72px; /* Add page padding. */
    position: relative; /* Establish positioning context. */
    z-index: 1; /* Keep content above background. */
    max-width: 1280px; /* Keep views readable while not too narrow. */
    margin: 0 auto; /* Center content within the layout column. */
    width: 100%; /* Allow responsive shrink on smaller screens. */
} /* End of content styles. */

/* Page header layout. */
.page-header { /* Style the page header. */
    display: flex; /* Use flex layout. */
    align-items: center; /* Vertically center header items. */
    justify-content: space-between; /* Space between title and actions. */
    gap: 16px; /* Add spacing between items. */
    flex-wrap: wrap; /* Allow wrapping on smaller screens. */
} /* End of page header styles. */

/* Logout form alignment. */
.logout-form { /* Style the logout form wrapper. */
    margin: 0; /* Remove default form margin. */
} /* End of logout form styles. */

/* Main content area styling. */
.content__main { /* Define spacing for main content. */
    margin-top: 20px; /* Add spacing below the header. */
    display: grid; /* Use grid for vertical spacing. */
    gap: 24px; /* Add spacing between sections. */
} /* End of content main styles. */

/* Process bar wrapper styling. */
.process-bar { /* Style the live process bar container. */
    display: flex; /* Use flex layout for stacked content. */
    flex-direction: column; /* Stack items vertically. */
    gap: 6px; /* Space between bar sections. */
    padding: 8px 12px; /* Compact padding inside the bar. */
    border-radius: 16px; /* Rounded corners for a pill-like bar. */
    background: rgba(15, 23, 42, 0.9); /* Dark translucent background. */
    border: 1px solid rgba(31, 42, 68, 0.9); /* Subtle border to frame the bar. */
    box-shadow: 0 18px 36px var(--color-shadow); /* Elevated shadow for depth. */
    position: relative; /* Create positioning context for the progress line. */
    overflow: hidden; /* Clip the animated progress line. */
} /* End of process bar styles. */

/* Active state styling for process bar. */
.process-bar--active { /* Highlight the bar when processes are running. */
    border-color: rgba(76, 141, 255, 0.4); /* Add a primary glow to the border. */
} /* End of active state styles. */

/* Process bar content layout. */
.process-bar__content { /* Align title, list, and timestamp. */
    display: flex; /* Use flex layout for horizontal alignment. */
    align-items: center; /* Vertically center items. */
    gap: 10px; /* Space between items. */
    flex-wrap: wrap; /* Allow wrapping on smaller screens. */
} /* End of process bar content styles. */

/* Process bar title styling. */
.process-bar__title { /* Style the bar title text. */
    font-weight: 700; /* Emphasize the title. */
    font-size: 12px; /* Compact title size. */
    letter-spacing: 0.06em; /* Slight letter spacing for clarity. */
    text-transform: uppercase; /* Uppercase title for compactness. */
} /* End of process bar title styles. */

/* Process list layout. */
.process-bar__list { /* Style the list of active processes. */
    display: flex; /* Use flex layout for items. */
    flex-wrap: wrap; /* Allow wrapping of multiple processes. */
    gap: 8px; /* Space between process items. */
} /* End of process list styles. */

/* Single process item styling. */
.process-bar__item { /* Style each process pill. */
    display: flex; /* Stack name and meta text. */
    flex-direction: column; /* Arrange text vertically. */
    gap: 3px; /* Space between name and meta. */
    padding: 4px 8px; /* Inner padding for the pill. */
    border-radius: 10px; /* Rounded edges for the pill. */
    background: rgba(76, 141, 255, 0.12); /* Soft primary tint background. */
    border: 1px solid rgba(76, 141, 255, 0.22); /* Subtle border for separation. */
} /* End of process item styles. */

/* Row layout inside a process item. */
.process-bar__row { /* Align name and stop button in one row. */
    display: flex; /* Use flex layout. */
    align-items: center; /* Vertically center items. */
    justify-content: space-between; /* Space between name and action. */
    gap: 8px; /* Add spacing between elements. */
} /* End of process row styles. */

/* Process name styling. */
.process-bar__name { /* Emphasize the store name. */
    font-weight: 600; /* Make store name stand out. */
    font-size: 12px; /* Smaller name size for compact bar. */
} /* End of process name styles. */

/* Process meta styling. */
.process-bar__meta { /* Style the sync meta info text. */
    font-size: 11px; /* Smaller text for meta details. */
    color: var(--color-muted); /* Use muted color for meta text. */
} /* End of process meta styles. */

.process-bar__meta--error { /* Error meta styling. */
    color: #f97316; /* Orange error highlight. */
} /* End error meta. */

/* Stop button inside process bar. */
.process-bar__stop { /* Style stop button in process bar. */
    padding: 2px 8px; /* Compact padding. */
    font-size: 11px; /* Smaller text size. */
    border-radius: 8px; /* Rounded edges. */
    border: 1px solid rgba(248, 113, 113, 0.5); /* Soft red border. */
    background: rgba(248, 113, 113, 0.08); /* Subtle red tint. */
    color: #fca5a5; /* Light red text. */
    cursor: pointer; /* Pointer cursor for button. */
} /* End of stop button styles. */

.process-bar__stop:hover { /* Hover state for stop button. */
    border-color: rgba(248, 113, 113, 0.8); /* Stronger border on hover. */
    color: #fee2e2; /* Brighter text on hover. */
} /* End of stop hover styles. */

/* Empty state styling for process bar. */
.process-bar__empty { /* Style empty state text. */
    color: var(--color-muted); /* Use muted color for empty state. */
} /* End of empty state styles. */

/* Timestamp styling. */
.process-bar__updated { /* Style the refreshed timestamp. */
    margin-left: auto; /* Push timestamp to the right when space allows. */
    font-size: 11px; /* Smaller timestamp text. */
    color: var(--color-muted); /* Muted color for timestamp. */
} /* End of timestamp styles. */

/* Animated progress line styling. */
.process-bar__progress { /* Define the animated progress indicator. */
    position: absolute; /* Position at the bottom of the bar. */
    bottom: 0; /* Anchor to the bottom edge. */
    left: -40%; /* Start outside of the visible area. */
    height: 2px; /* Thin progress line height. */
    width: 40%; /* Width of the animated line. */
    background: linear-gradient(90deg, transparent, var(--color-primary), transparent); /* Glowing gradient line. */
    animation: processSlide 2.4s linear infinite; /* Continuous slide animation. */
    opacity: 0; /* Hidden when no active processes. */
} /* End of progress line styles. */

/* Keyframes for the process bar animation. */
@keyframes processSlide { /* Define the sliding animation. */
    from { /* Start position. */
        transform: translateX(0); /* Initial transform. */
    } /* End of start keyframe. */
    to { /* End position. */
        transform: translateX(320%); /* Move line across the bar. */
    } /* End of end keyframe. */
} /* End of processSlide animation. */

/* Table controls wrapper styling. */
.table-controls { /* Style the column controls container. */
    display: flex; /* Use flex layout for controls. */
    flex-wrap: wrap; /* Allow controls to wrap on smaller screens. */
    align-items: center; /* Align items vertically. */
    gap: 12px; /* Space between control items. */
    padding: 10px 12px; /* Inner padding for the controls bar. */
    margin-bottom: 12px; /* Space below the controls before the table. */
    border-radius: 12px; /* Rounded corners for the control bar. */
    background: rgba(15, 23, 42, 0.75); /* Dark translucent background. */
    border: 1px solid rgba(31, 42, 68, 0.8); /* Subtle border around the controls. */
} /* End of table controls styles. */

/* Quick toolbar for table filters and sorting. */
.table-toolbar { /* Wrapper for fast filters. */
    margin: 16px 0 20px; /* Space around toolbar. */
    padding: 16px; /* Inner spacing. */
    border-radius: 16px; /* Rounded corners. */
    background: rgba(15, 23, 42, 0.55); /* Subtle background. */
    border: 1px solid rgba(31, 42, 68, 0.7); /* Soft border. */
    display: grid; /* Stack sections. */
    gap: 16px; /* Space between rows. */
} /* End of table toolbar. */

.table-toolbar__header { /* Header row for toolbar. */
    display: flex; /* Align title and actions. */
    align-items: center; /* Center vertically. */
    justify-content: space-between; /* Space between title and actions. */
    gap: 12px; /* Gap between items. */
    flex-wrap: wrap; /* Allow wrap on small screens. */
} /* End of header. */

.table-toolbar__title { /* Toolbar title text. */
    font-family: var(--font-heading); /* Emphasize title. */
    font-size: 16px; /* Slightly larger title. */
} /* End of toolbar title. */

.table-toolbar__actions { /* Toolbar action buttons. */
    display: flex; /* Inline row of buttons. */
    flex-wrap: wrap; /* Wrap when needed. */
    gap: 8px; /* Space between actions. */
    align-items: center; /* Align buttons. */
} /* End of toolbar actions. */

.table-toolbar__sort { /* Sorting controls row. */
    display: flex; /* Align sorting controls. */
    flex-wrap: wrap; /* Allow wrapping on smaller screens. */
    gap: 12px; /* Space between controls. */
    align-items: flex-end; /* Align with inputs. */
} /* End sorting row. */

.table-toolbar__hint { /* Helper text under sort row. */
    margin: 0; /* Reset spacing. */
    color: var(--color-muted); /* Muted hint color. */
    font-size: 12px; /* Small hint text. */
} /* End hint text. */

/* Table controls label styling. */
.table-controls__label { /* Style the controls label. */
    font-size: 11px; /* Compact label text. */
    letter-spacing: 0.08em; /* Spaced letters for label. */
    text-transform: uppercase; /* Uppercase for label. */
    color: var(--color-muted); /* Muted color for label. */
    font-weight: 600; /* Slightly bold label. */
} /* End of controls label styles. */

/* Table controls item styling. */
.table-controls__item { /* Style each column checkbox row. */
    display: inline-flex; /* Align checkbox with text. */
    align-items: center; /* Vertically center items. */
    gap: 6px; /* Space between checkbox and label. */
    font-size: 13px; /* Slightly smaller text. */
    color: var(--color-text); /* Use base text color. */
} /* End of controls item styles. */

/* Checkbox accent color for table controls. */
.table-controls__item input { /* Target checkbox inputs. */
    accent-color: var(--color-primary); /* Use primary color for checks. */
} /* End of checkbox styling. */

/* Hidden column utility. */
.col-hidden { /* Hide table columns when toggled off. */
    display: none !important; /* Force-hide the element from layout. */
} /* End of col-hidden utility. */

/* Variant row styling. */
.table__row--variant { /* Highlight rows for product variations. */
    background: rgba(76, 141, 255, 0.08); /* Subtle tinted background for variants. */
} /* End of variant row styles. */

.table__row--variant td:first-child { /* Indent variant rows slightly. */
    padding-left: 18px; /* Offset to suggest hierarchy. */
} /* End of variant row indent. */

/* Highlighted variant row when matched by rules. */
.table__row--highlight { /* Emphasize matched variation row. */
    background: rgba(250, 204, 21, 0.22); /* Warm highlight background. */
    box-shadow: inset 0 0 0 1px rgba(250, 204, 21, 0.55); /* Subtle outline. */
} /* End of highlight styles. */

/* Indented cell styling for variations. */
.table__cell--indent { /* Add indentation for variant names. */
    padding-left: 26px; /* Indent text to show hierarchy. */
} /* End of indentation styles. */

/* Slide-in filters panel container. */
.filters-panel { /* Define the filters panel base layout. */
    position: fixed; /* Fix the panel to the viewport. */
    top: 50%; /* Center vertically. */
    left: 50%; /* Center horizontally. */
    width: min(90vw, 720px); /* Keep modal width comfortable. */
    max-height: 85vh; /* Limit height for scrollable content. */
    background: rgba(10, 16, 32, 0.98); /* Dark panel background. */
    border: 1px solid rgba(31, 42, 68, 0.9); /* Subtle border. */
    border-radius: 18px; /* Rounded modal corners. */
    padding: 20px; /* Inner padding for panel content. */
    box-shadow: 0 28px 60px rgba(2, 6, 23, 0.7); /* Shadow for separation. */
    transform: translate(-50%, -50%) scale(0.98); /* Centered, slightly scaled down. */
    opacity: 0; /* Hide by default. */
    pointer-events: none; /* Prevent interaction when hidden. */
    transition: opacity 0.2s ease, transform 0.2s ease; /* Smooth fade/scale animation. */
    z-index: 50; /* Ensure panel sits above content. */
    overflow-y: auto; /* Allow scroll inside the panel. */
} /* End of filters panel styles. */

/* Make the crawler panel span the full content width (up to the sidebar). */
.page--crawler-swiat .filters-panel { /* Override panel width for the crawler page. */
    width: min(92vw, 1100px); /* Allow a wider modal on crawler screens. */
} /* End of crawler panel override. */

/* Open state for the filters panel. */
.filters-panel--open { /* Show the panel when active. */
    transform: translate(-50%, -50%) scale(1); /* Center and scale in. */
    opacity: 1; /* Fade in. */
    pointer-events: auto; /* Allow interaction when open. */
} /* End of filters panel open styles. */

/* Filters panel header layout. */
.filters-panel__header { /* Layout for header row. */
    display: flex; /* Align title and close button. */
    align-items: center; /* Vertically center header items. */
    justify-content: space-between; /* Space between title and button. */
    margin-bottom: 16px; /* Add spacing below the header. */
} /* End of filters panel header styles. */

/* Filters panel title styling. */
.filters-panel__title { /* Style the panel title text. */
    font-family: var(--font-heading); /* Use heading font for title. */
    font-size: 16px; /* Set title size. */
} /* End of filters panel title styles. */

/* Filters panel backdrop overlay. */
.filters-panel__backdrop { /* Define the backdrop overlay. */
    position: fixed; /* Fix backdrop to the viewport. */
    inset: 0; /* Stretch backdrop across the screen. */
    background: rgba(2, 6, 23, 0.55); /* Dark overlay color. */
    opacity: 0; /* Hide backdrop by default. */
    pointer-events: none; /* Prevent clicks when hidden. */
    transition: opacity 0.2s ease; /* Smooth fade animation. */
    z-index: 20; /* Place behind the panel but above content. */
} /* End of backdrop styles. */

/* Backdrop open state. */
.filters-panel__backdrop--open { /* Show the backdrop when panel is open. */
    opacity: 1; /* Fade in the backdrop. */
    pointer-events: auto; /* Allow clicking backdrop to close. */
} /* End of backdrop open styles. */

/* Responsive tweaks for the filters panel. */
@media (max-width: 600px) { /* Mobile breakpoint adjustments. */
    .filters-panel { /* Adjust panel width on mobile. */
        width: 94vw; /* Use near-full width on small screens. */
        max-height: 90vh; /* Allow more height on small screens. */
    } /* End of mobile panel adjustments. */
} /* End of filters panel mobile breakpoint. */

/* Tabs container styling. */
.tabs { /* Define the tab button row. */
    display: flex; /* Use flex layout for tabs. */
    flex-wrap: wrap; /* Allow tabs to wrap on small screens. */
    gap: 8px; /* Space between tabs. */
    margin-bottom: 16px; /* Space below tabs. */
} /* End of tabs container styles. */

.check-grid { /* Grid of checkbox options. */
    display: flex; /* Use flex layout. */
    flex-wrap: wrap; /* Allow wrapping. */
    gap: 12px 24px; /* Space between options. */
    align-items: center; /* Align items vertically. */
} /* End of check-grid. */

/* Tab button styling. */
.tabs__tab { /* Style individual tab buttons. */
    background: rgba(15, 23, 42, 0.7); /* Dark background for tabs. */
    color: var(--color-text); /* Use base text color. */
    border: 1px solid rgba(31, 42, 68, 0.9); /* Subtle border around tabs. */
    padding: 8px 14px; /* Padding for clickable area. */
    border-radius: 999px; /* Rounded pill shape. */
    font-weight: 600; /* Emphasize tab labels. */
    cursor: pointer; /* Show pointer cursor on hover. */
} /* End of tab button styles. */

/* Active tab styling. */
.tabs__tab.is-active { /* Highlight the active tab. */
    background: rgba(76, 141, 255, 0.2); /* Use a primary tint for active tab. */
    border-color: rgba(76, 141, 255, 0.5); /* Accent border for active tab. */
    color: var(--color-primary); /* Use primary color for active text. */
} /* End of active tab styles. */

/* Tab panel styling. */
.tabs__panel { /* Define base panel styling. */
    display: none; /* Hide panels by default. */
    padding: 12px 0; /* Add spacing inside panels. */
} /* End of tab panel styles. */

/* Active tab panel styling. */
.tabs__panel.is-active { /* Show active panel. */
    display: block; /* Display the active panel. */
} /* End of active panel styles. */

/* Chart wrapper styling. */
.chart { /* Define the chart container. */
    background: rgba(15, 23, 42, 0.5); /* Subtle background for chart area. */
    border: 1px solid rgba(31, 42, 68, 0.8); /* Border around chart. */
    border-radius: 16px; /* Rounded corners for chart box. */
    padding: 16px; /* Padding inside chart container. */
    margin-bottom: 16px; /* Space below chart. */
} /* End of chart wrapper styles. */

/* Chart SVG styling. */
.chart__svg { /* Style the SVG chart element. */
    width: 100%; /* Use full width for chart. */
    height: 180px; /* Fixed height for chart. */
} /* End of chart SVG styles. */

/* Chart line styling. */
.chart__line { /* Style the SVG polyline. */
    fill: none; /* No fill for the line. */
    stroke: var(--color-primary); /* Primary color stroke. */
    stroke-width: 2; /* Line thickness. */
} /* End of chart line styles. */

/* Multi-series chart overrides. */
.chart--multi .chart__svg { /* Taller multi-series chart. */
    height: 240px; /* Increase height for multi-series display. */
} /* End of multi chart override. */

/* Chart frame with y-axis and plot area. */
.chart__frame {
    display: grid;
    grid-template-columns: 60px minmax(0, 1fr);
    gap: 12px;
    align-items: stretch;
} /* End chart frame. */

.chart__y-axis {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-size: 11px;
    color: var(--color-muted);
    text-align: right;
    padding-right: 6px;
} /* End y-axis. */

.chart__plot {
    position: relative;
} /* End plot wrapper. */

.chart__grid line {
    stroke: rgba(148, 163, 184, 0.22);
    stroke-width: 0.6;
    shape-rendering: crispEdges;
} /* End grid lines. */

.chart__dot {
    stroke: rgba(15, 23, 42, 0.9);
    stroke-width: 1;
    cursor: pointer;
} /* End chart dot. */

.chart__bar {
    rx: 0.8;
    ry: 0.8;
    opacity: 0.9;
} /* End chart bar. */

.chart__bar:hover {
    opacity: 1;
} /* End chart bar hover. */

.chart__tooltip {
    position: absolute;
    transform: translate(-50%, -110%);
    background: rgba(15, 23, 42, 0.95);
    border: 1px solid rgba(148, 163, 184, 0.3);
    padding: 6px 10px;
    border-radius: 12px;
    font-size: 12px;
    color: var(--color-text);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease;
    white-space: nowrap;
    z-index: 5;
} /* End tooltip. */

.chart__tooltip-title {
    font-weight: 600;
    margin-bottom: 2px;
} /* End tooltip title. */

.chart__tooltip-value {
    font-size: 13px;
    font-weight: 700;
} /* End tooltip value. */

.chart__tooltip-time {
    color: var(--color-muted);
    font-size: 11px;
} /* End tooltip time. */

.chart-legend { /* Layout for chart legend. */
    display: flex; /* Arrange legend items in a row. */
    flex-wrap: wrap; /* Allow wrapping. */
    gap: 10px; /* Space between legend items. */
    margin-top: 8px; /* Space above legend. */
    font-size: 12px; /* Smaller legend text. */
    color: var(--color-muted); /* Muted legend color. */
} /* End of chart legend styles. */

.chart-legend__item { /* Legend item layout. */
    display: inline-flex; /* Inline flex row. */
    align-items: center; /* Center align. */
    gap: 6px; /* Space between dot and label. */
} /* End of legend item. */

.chart-legend__dot { /* Legend color dot. */
    width: 10px; /* Dot size. */
    height: 10px; /* Dot size. */
    border-radius: 50%; /* Round dot. */
    display: inline-block; /* Inline element. */
} /* End of legend dot. */

.chart-controls { /* Layout for chart filter controls. */
    display: flex; /* Arrange controls in a row. */
    flex-wrap: wrap; /* Allow wrapping. */
    gap: 8px 16px; /* Space between controls. */
    margin-bottom: 12px; /* Space below controls. */
} /* End of chart controls. */

.chart-toggle { /* Toggle label styling. */
    display: inline-flex; /* Inline flex alignment. */
    align-items: center; /* Center align. */
    gap: 6px; /* Space between checkbox and label. */
    font-size: 13px; /* Slightly smaller text. */
    color: var(--color-text); /* Base text color. */
} /* End of chart toggle. */

.chart-empty { /* Empty state text for charts. */
    font-size: 13px; /* Small text. */
    color: var(--color-muted); /* Muted color. */
} /* End of chart empty. */

.chart-panel { /* Wrapper for chart blocks. */
    margin-bottom: 24px; /* Space below each chart panel. */
} /* End of chart panel. */

.chart-switch { /* Toggle buttons for chart selection. */
    display: inline-flex; /* Arrange buttons inline. */
    gap: 8px; /* Space between buttons. */
    margin-bottom: 12px; /* Space below switch. */
} /* End of chart switch. */

.chart-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
} /* End chart toolbar. */

.chart-toolbar .chart-switch {
    margin-bottom: 0;
} /* End chart toolbar switch override. */

.chart-settings {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    border-radius: 14px;
    border: 1px solid rgba(31, 42, 68, 0.9);
    background: rgba(15, 23, 42, 0.55);
} /* End chart settings. */

.chart-settings__group {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--color-muted);
} /* End chart settings group. */

.chart-settings__label {
    font-weight: 600;
    color: var(--color-text);
} /* End chart settings label. */

.chart-settings__hint {
    font-size: 11px;
    color: var(--color-muted);
} /* End chart settings hint. */

.chart-settings__actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
} /* End chart settings actions. */

.chart-settings__status {
    font-size: 11px;
    color: var(--color-muted);
} /* End chart settings status. */

.chart-stepper {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 6px;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.25);
    background: rgba(2, 6, 23, 0.5);
} /* End chart stepper. */

.chart-stepper__btn {
    width: 24px;
    height: 24px;
    border-radius: 999px;
    border: none;
    background: rgba(76, 141, 255, 0.16);
    color: var(--color-text);
    cursor: pointer;
} /* End stepper button. */

.chart-stepper__btn:hover {
    background: rgba(76, 141, 255, 0.32);
} /* End stepper button hover. */

.chart-stepper__input {
    width: 58px;
    border: none;
    background: transparent;
    color: var(--color-text);
    text-align: center;
    font-size: 12px;
    outline: none;
} /* End stepper input. */

.chart-tab.is-active { /* Active chart tab state. */
    border-color: rgba(76, 141, 255, 0.6); /* Highlight border. */
    color: var(--color-text); /* Stronger text. */
} /* End of chart tab active state. */

/* Chart labels row styling. */
.chart__labels { /* Style the chart labels row. */
    display: flex; /* Align labels horizontally. */
    justify-content: space-between; /* Space between min and max labels. */
    font-size: 12px; /* Smaller label font size. */
    color: var(--color-muted); /* Muted color for labels. */
    margin-top: 8px; /* Space above labels. */
    padding-left: 60px; /* Align with chart plot area. */
} /* End of chart labels styles. */

/* Table base styling. */
.table { /* Define table styling. */
    width: 100%; /* Full width table. */
    border-collapse: collapse; /* Collapse borders for clean look. */
    font-size: 14px; /* Slightly smaller text for tables. */
} /* End of table styles. */

/* Table head styling. */
.table thead th { /* Style table header cells. */
    text-align: left; /* Align header text to the left. */
    color: var(--color-muted); /* Use muted color for headers. */
    font-weight: 600; /* Emphasize header text. */
    padding: 10px 8px; /* Add spacing around headers. */
    border-bottom: 1px solid var(--color-border); /* Add bottom border. */
} /* End of table head styles. */

/* Inline filter row for tables. */
.table__filters th { /* Style filter row cells. */
    padding: 6px 8px; /* Tighten padding for filter inputs. */
    background: rgba(15, 23, 42, 0.6); /* Subtle background for filters row. */
    border-bottom: 1px solid var(--color-border); /* Keep separation line. */
} /* End of filters row styles. */

.table__filters .form__input { /* Style filter inputs. */
    width: 100%; /* Make inputs span the full cell. */
    padding: 6px 8px; /* Compact padding for filters. */
    font-size: 12px; /* Smaller font for filter row. */
    background: rgba(15, 23, 42, 0.8); /* Dark input background. */
    border: 1px solid rgba(31, 42, 68, 0.9); /* Match existing border tone. */
} /* End of filter input styles. */

.table__filters .form__input::placeholder { /* Muted placeholder styling. */
    color: var(--color-muted); /* Use muted text color. */
} /* End of placeholder styles. */

/* Loading state for AJAX tables. */
.table--loading { /* Slightly dim table while loading. */
    opacity: 0.6; /* Dim table for loading feedback. */
    pointer-events: none; /* Disable interactions during load. */
} /* End of loading state. */

/* Table body cell styling. */
.table tbody td { /* Style table body cells. */
    padding: 12px 8px; /* Add spacing around cells. */
    border-bottom: 1px solid rgba(31, 42, 68, 0.7); /* Light row separators. */
    vertical-align: top; /* Align cell content to the top. */
} /* End of table body styles. */

/* Compact table variant for dense popups. */
.table--compact tbody td {
    padding: 8px 6px; /* Tighter cell padding. */
    font-size: 12px; /* Smaller text size. */
} /* End of compact table styles. */

/* Nested table styling. */
.table--nested { /* Style nested tables for variations. */
    margin-top: 12px; /* Add spacing above nested table. */
    background: rgba(20, 30, 50, 0.6); /* Soft background for nested content. */
    border-radius: 12px; /* Rounded corners for nested table. */
    overflow: hidden; /* Clip rounded corners. */
} /* End of nested table styles. */

/* Nested row container styling. */
.table__row--nested td { /* Style nested row container cell. */
    background: rgba(20, 30, 50, 0.6); /* Soft background for nested area. */
    border-bottom: none; /* Remove bottom border for nested container. */
} /* End of nested row styles. */

/* Details wrapper for variations. */
.table__details { /* Style the details element. */
    padding: 8px 4px; /* Add spacing inside details. */
} /* End of details styles. */

/* Summary label for variations. */
.table__summary { /* Style the summary text. */
    cursor: pointer; /* Show pointer cursor for toggling. */
    font-weight: 600; /* Emphasize the summary label. */
    color: var(--color-primary); /* Use primary color for summary. */
    list-style: none; /* Remove default marker. */
} /* End of summary styles. */

/* Separator for action links. */
.table__separator { /* Style the dot separator. */
    color: var(--color-muted); /* Use muted color. */
    margin: 0 6px; /* Add horizontal spacing. */
} /* End of separator styles. */

/* Actions layout inside table cells. */
.table-actions { /* Layout for action buttons. */
    display: flex; /* Align actions in a row. */
    flex-wrap: nowrap; /* Keep actions on one line. */
    gap: 6px; /* Space between buttons. */
    align-items: center; /* Align items vertically. */
} /* End of table actions styles. */

/* Compact meta line inside table cells. */
.table-meta { /* Secondary line for table row info. */
    margin-top: 4px; /* Space above meta. */
    font-size: 12px; /* Compact text size. */
    color: var(--color-muted); /* Muted meta color. */
} /* End of table meta. */

/* Action list inside dropdown panels. */
.action-list { /* Stack actions vertically. */
    display: grid; /* Grid for vertical list. */
    gap: 8px; /* Space between actions. */
} /* End action list. */

.action-list form { /* Normalize form spacing in list. */
    margin: 0; /* Remove default margins. */
} /* End form reset. */

/* Remove extra margin on inline forms inside table actions. */
.table-actions .form--inline { /* Align inline forms with other buttons. */
    margin-top: 0; /* Remove top margin. */
} /* End of inline form adjustment. */

/* Key-value layout for product summary. */
.key-value { /* Define a key-value grid layout. */
    display: grid; /* Use grid for labels and values. */
    grid-template-columns: 140px minmax(0, 1fr); /* Fixed label column. */
    gap: 8px 16px; /* Space between rows and columns. */
    font-size: 13px; /* Compact text size. */
} /* End of key-value grid. */

/* Summary grid for key product metrics. */
.summary-grid { /* Layout for key metrics. */
    display: grid; /* Use grid layout. */
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); /* Responsive columns. */
    gap: 12px; /* Space between tiles. */
    margin: 14px 0 18px; /* Space around grid. */
} /* End summary grid. */

.summary-tile { /* Single metric tile. */
    padding: 12px 14px; /* Inner spacing. */
    border-radius: 14px; /* Rounded corners. */
    background: rgba(15, 23, 42, 0.6); /* Soft background. */
    border: 1px solid rgba(31, 42, 68, 0.7); /* Subtle border. */
    display: grid; /* Stack text. */
    gap: 4px; /* Tight spacing between lines. */
} /* End summary tile. */

.summary-tile__actions { /* Action row inside tiles. */
    margin-top: 6px; /* Space above actions. */
    display: flex; /* Align buttons in a row. */
    flex-wrap: wrap; /* Allow wrapping. */
    gap: 8px; /* Space between buttons. */
} /* End tile actions. */

.summary-label { /* Metric label styling. */
    font-size: 11px; /* Compact label. */
    text-transform: uppercase; /* Uppercase label. */
    letter-spacing: 0.08em; /* Spaced lettering. */
    color: var(--color-muted); /* Muted label color. */
} /* End summary label. */

/* Quick actions toolbar. */
.quick-actions { /* Wrapper for quick actions. */
    display: grid; /* Stack rows. */
    gap: 12px; /* Space between rows. */
    margin: 12px 0; /* Vertical spacing. */
} /* End quick actions wrapper. */

.quick-actions__row { /* Row for select + manage button. */
    display: flex; /* Align in row. */
    align-items: center; /* Center items. */
    gap: 12px; /* Space between items. */
    flex-wrap: wrap; /* Wrap on small screens. */
} /* End quick actions row. */

.form__group--inline { /* Inline form group. */
    display: flex; /* Inline layout. */
    align-items: center; /* Center alignment. */
    gap: 8px; /* Space between inputs. */
    flex-wrap: wrap; /* Wrap when needed. */
} /* End inline group. */

.summary-value { /* Metric value styling. */
    font-size: 20px; /* Emphasized value. */
    font-weight: 700; /* Strong weight. */
} /* End summary value. */

.summary-value-row { /* Align value with edit icon. */
    display: inline-flex; /* Inline alignment. */
    align-items: center; /* Center vertically. */
    gap: 8px; /* Space between value and icon. */
} /* End value row. */

.summary-meta { /* Secondary meta line. */
    font-size: 12px; /* Small meta text. */
    color: var(--color-muted); /* Muted meta color. */
} /* End summary meta. */

.summary-meta.delta--up { /* Positive delta color. */
    color: var(--color-error); /* Use error color for increases. */
} /* End delta up. */

.summary-meta.delta--down { /* Negative delta color. */
    color: var(--color-success); /* Use success color for decreases. */
} /* End delta down. */

.summary-meta.delta--flat { /* Neutral delta color. */
    color: var(--color-muted); /* Keep muted. */
} /* End delta flat. */

.summary-actions { /* Quick action row. */
    display: flex; /* Align buttons in a row. */
    flex-wrap: wrap; /* Allow wrapping. */
    gap: 10px; /* Space between actions. */
    margin-top: 8px; /* Space above actions. */
} /* End summary actions. */

.summary-actions form { /* Normalize form spacing in action row. */
    margin: 0; /* Remove default form margins. */
} /* End summary actions form reset. */

/* Summary chips for competitor/supplier highlights. */
.summary-strip { /* Layout for chips. */
    display: flex; /* Inline layout. */
    flex-wrap: wrap; /* Wrap chips as needed. */
    gap: 8px; /* Space between chips. */
    margin: 10px 0 14px; /* Space around strip. */
    align-items: center; /* Align chips vertically. */
} /* End summary strip. */

.summary-strip__label { /* Label preceding chips. */
    font-size: 12px; /* Small label. */
    color: var(--color-muted); /* Muted label. */
} /* End strip label. */

.summary-chip { /* Single chip styling. */
    display: inline-flex; /* Inline flex for chip. */
    align-items: center; /* Center content. */
    gap: 6px; /* Space between name and value. */
    padding: 4px 10px; /* Compact padding. */
    border-radius: 999px; /* Pill shape. */
    background: rgba(76, 141, 255, 0.12); /* Soft accent background. */
    border: 1px solid rgba(76, 141, 255, 0.28); /* Accent border. */
    font-size: 12px; /* Small text size. */
} /* End summary chip. */

.summary-chip__value { /* Value emphasis inside chip. */
    font-weight: 600; /* Stronger emphasis. */
    color: var(--color-text); /* Use base text color. */
} /* End chip value. */

.summary-chip__link { /* Link inside summary chip. */
    color: var(--color-primary); /* Use primary link color. */
    font-weight: 600; /* Emphasize link. */
    text-decoration: none; /* Remove underline. */
} /* End chip link. */

.summary-chip--active { /* Active chip state. */
    background: rgba(76, 141, 255, 0.2);
    border-color: rgba(76, 141, 255, 0.4);
} /* End active chip. */

.summary-chip--active .summary-chip__link {
    color: var(--color-text);
} /* End active chip link. */

.key-value__label { /* Style key labels. */
    color: var(--color-muted); /* Muted label color. */
} /* End of label styling. */

.key-value__value { /* Style value text. */
    font-weight: 600; /* Emphasize values. */
} /* End of value styling. */

/* Action stack for product detail. */
.action-stack { /* Stack action buttons. */
    display: grid; /* Use grid layout. */
    gap: 10px; /* Space between buttons. */
    margin-top: 12px; /* Separate from intro text. */
} /* End of action stack. */

/* Field key selector stack. */
.field-key { /* Stack select and custom input. */
    display: grid; /* Use grid for vertical stacking. */
    gap: 6px; /* Space between controls. */
} /* End of field-key styles. */

.field-key [data-field-key-custom] { /* Hide custom key input by default. */
    display: none; /* Show only when custom is selected. */
} /* End of custom key input rule. */

/* Stack inputs vertically in a compact column. */
.field-stack { /* Base vertical stack for inputs. */
    display: grid; /* Use grid for vertical stacking. */
    gap: 8px; /* Space between inputs. */
} /* End of field stack. */

.field-stack--tight { /* Tighter spacing for table stacks. */
    gap: 6px; /* Reduce spacing for compact tables. */
} /* End of tight stack. */

/* Neutral, compact buttons inside action column. */
.table-actions .button { /* Override button visuals in action cells. */
    padding: 4px 10px; /* Smaller padding. */
    font-size: 12px; /* Smaller text. */
    border-radius: 10px; /* Subtle rounding. */
    color: var(--color-muted); /* Neutral text color. */
    border: 1px solid rgba(148, 163, 184, 0.35); /* Muted border. */
    background: transparent; /* No fill. */
    box-shadow: none; /* Remove glow. */
    transform: none; /* Disable lift. */
} /* End of table action button override. */

.table-actions .button:hover { /* Neutral hover state. */
    color: var(--color-text); /* Slightly brighter text. */
    border-color: rgba(148, 163, 184, 0.6); /* Stronger border. */
    transform: none; /* Keep flat. */
} /* End of action hover. */

.table-actions .button--primary { /* Remove primary color emphasis. */
    background: transparent; /* Keep transparent. */
    color: var(--color-muted); /* Neutral text. */
    box-shadow: none; /* Remove glow. */
} /* End of primary override. */

.table-actions .button--ghost { /* Normalize ghost styling. */
    color: var(--color-muted); /* Neutral text. */
    border-style: solid; /* Solid border for consistency. */
} /* End of ghost override. */

.table-price-action {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
} /* End table price action. */

.rule-table td {
    vertical-align: top;
} /* End rule table cell alignment. */

.rule-table .form__input {
    min-width: 130px;
    margin-bottom: 6px;
} /* End rule table input sizing. */

/* Extra fields pills inside tables. */
.data-pills { /* Layout for key-value pills. */
    display: flex; /* Arrange pills in a row. */
    flex-wrap: wrap; /* Wrap pills on smaller widths. */
    gap: 6px; /* Space between pills. */
} /* End of data pills styles. */

.panel-stack {
    display: grid;
    gap: 16px;
} /* End panel stack. */

.media-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
} /* End media grid. */

.media-card {
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid rgba(31, 42, 68, 0.8);
    border-radius: 12px;
    padding: 8px;
    display: grid;
    gap: 6px;
} /* End media card. */

.media-card img {
    width: 100%;
    height: 110px;
    object-fit: cover;
    border-radius: 8px;
} /* End media card image. */

.media-card__meta {
    font-size: 11px;
    color: var(--color-muted);
    word-break: break-word;
} /* End media card meta. */

.media-card__link {
    font-size: 12px;
    color: var(--color-primary);
    text-decoration: none;
    word-break: break-word;
} /* End media card link. */

/* Source cards for competitor/supplier lists. */
.source-card { /* Base source card styling. */
    text-decoration: none; /* Remove underline. */
    transition: border 0.2s ease, transform 0.2s ease; /* Smooth hover. */
} /* End of source card base. */

.source-card--active { /* Highlight active source card. */
    border-color: rgba(76, 141, 255, 0.6); /* Primary border. */
    box-shadow: 0 18px 36px rgba(76, 141, 255, 0.2); /* Soft glow. */
    transform: translateY(-2px); /* Slight lift. */
} /* End of active source card. */

.pill { /* Base pill styling. */
    display: inline-flex; /* Inline flex for alignment. */
    align-items: center; /* Vertically align text. */
    padding: 4px 8px; /* Compact padding. */
    border-radius: 999px; /* Pill shape. */
    background: rgba(76, 141, 255, 0.16); /* Soft accent background. */
    color: var(--color-text); /* Use base text color. */
    font-size: 12px; /* Small text size. */
} /* End of pill styles. */

/* Status badges for import state. */
.badge { /* Base badge styling. */
    display: inline-flex; /* Inline flex alignment. */
    align-items: center; /* Center text vertically. */
    padding: 4px 8px; /* Badge padding. */
    border-radius: 999px; /* Pill shape. */
    font-size: 12px; /* Small text. */
    font-weight: 600; /* Emphasize badge. */
} /* End of badge styles. */

.badge--muted { /* Muted badge variant. */
    background: rgba(148, 163, 184, 0.2); /* Soft muted background. */
    color: var(--color-muted); /* Muted text color. */
} /* End of muted badge. */

.badge--active { /* Active badge variant. */
    background: rgba(34, 197, 94, 0.18); /* Green background. */
    color: #22c55e; /* Green text. */
} /* End of active badge. */

.badge--mini { /* Compact badge for inline indicators. */
    padding: 2px 6px; /* Smaller padding. */
    font-size: 10px; /* Smaller text. */
    letter-spacing: 0.08em; /* Subtle tracking for letters. */
    text-transform: uppercase; /* Uppercase label. */
    margin-left: 6px; /* Space from preceding text. */
} /* End of mini badge. */

/* Log console styles. */
.log-console { /* Styling for log output area. */
    background: rgba(15, 23, 42, 0.9); /* Dark background. */
    border: 1px solid rgba(31, 42, 68, 0.9); /* Subtle border. */
    border-radius: 12px; /* Rounded corners. */
    padding: 12px; /* Inner padding. */
    min-height: 160px; /* Minimum height. */
    max-height: 360px; /* Cap height with scroll. */
    overflow-y: auto; /* Vertical scroll. */
    font-size: 12px; /* Compact font. */
    color: #e2e8f0; /* Light text. */
    white-space: pre-wrap; /* Preserve line breaks. */
} /* End of log console styles. */

/* Dynamic fields action row. */
.dynamic-fields__actions { /* Layout for dynamic fields actions. */
    display: flex; /* Align action buttons inline. */
    flex-wrap: wrap; /* Allow wrapping on smaller screens. */
    gap: 8px; /* Space between buttons. */
    margin-top: 12px; /* Add spacing above actions. */
} /* End of dynamic fields actions. */

/* Dim XPath inputs for status-only fields. */
.dynamic-field--status [data-field-xpath] { /* Reduce emphasis on disabled inputs. */
    opacity: 0.6; /* Dim the inputs visually. */
} /* End of status input styling. */

/* Soft card variant for nested panels. */
.card--soft { /* Subtle card background. */
    background: rgba(20, 30, 50, 0.55); /* Slightly lighter card shade. */
    border: 1px solid rgba(31, 42, 68, 0.7); /* Soft border. */
    padding: 16px; /* Inner padding. */
    border-radius: 16px; /* Match card radius. */
    margin-top: 16px; /* Space above nested card. */
} /* End of soft card styles. */

/* Wrapper for wide tables in analysis previews. */
.table-wrapper { /* Allow horizontal scroll for wide tables. */
    overflow-x: auto; /* Enable horizontal scrolling. */
} /* End of table wrapper. */

/* Pagination wrapper styling. */
.pagination { /* Style pagination container. */
    margin-top: 16px; /* Add spacing above pagination. */
} /* End of pagination styles. */

/* Responsive adjustments for smaller screens. */
@media (max-width: 1100px) { /* Breakpoint for layout stacking. */
    .layout { /* Adjust layout for narrower screens. */
        grid-template-columns: 1fr; /* Stack sidebar above content. */
    } /* End of layout adjustments. */

    .sidebar { /* Adjust sidebar for stacked layout. */
        position: fixed; /* Off-canvas on mobile. */
        inset: 0 auto 0 0; /* Stick to left side. */
        width: 280px; /* Fixed sidebar width. */
        height: 100vh; /* Full height. */
        transform: translateX(-110%); /* Hidden by default. */
        transition: transform 0.25s ease; /* Smooth slide-in. */
        border-right: 1px solid rgba(31, 42, 68, 0.8); /* Keep divider. */
        border-bottom: none; /* Remove bottom border. */
        z-index: 30; /* Above backdrop. */
    } /* End of sidebar adjustments. */

    .nav-toggle { /* Show mobile toggle. */
        display: inline-flex; /* Show on mobile. */
    } /* End toggle show. */

    .nav-open .sidebar { /* Reveal sidebar when open. */
        transform: translateX(0); /* Slide in. */
    } /* End sidebar open. */

    .nav-open .sidebar-backdrop { /* Show backdrop when open. */
        opacity: 1; /* Visible. */
        pointer-events: auto; /* Clickable. */
    } /* End backdrop open. */

    .nav-open { /* Prevent background scroll. */
        overflow: hidden; /* Lock scrolling. */
    } /* End nav-open state. */
} /* End of responsive breakpoint. */

@media (max-width: 1100px) { /* Match stacked layout for crawler panel. */
    .page--crawler-swiat .filters-panel { /* Keep modal centered on small screens. */
        left: 50%; /* Center horizontally. */
        width: 94vw; /* Use near-full width. */
    } /* End of crawler panel small-screen override. */
} /* End of crawler panel breakpoint. */

/* Responsive adjustments for small screens. */
@media (max-width: 600px) { /* Breakpoint for mobile layout. */
    .content { /* Adjust content padding on mobile. */
        padding: 24px 18px 64px; /* Reduce padding for smaller screens. */
    } /* End of content adjustments. */

    .page-header { /* Stack header items on mobile. */
        flex-direction: column; /* Stack title and actions. */
        align-items: flex-start; /* Align items to the left. */
    } /* End of header adjustments. */
} /* End of mobile breakpoint. */

/* Pagination link styling. */
.pagination a, /* Style pagination links. */
.pagination span { /* Style pagination spans. */
    display: inline-flex; /* Align pagination items nicely. */
    align-items: center; /* Center items vertically. */
    padding: 3px 6px; /* Tighten padding for smaller controls. */
    border-radius: 999px; /* Use pill shape. */
    border: 1px solid rgba(31, 42, 68, 0.9); /* Light border for items. */
    color: var(--color-text); /* Use base text color. */
    font-size: 11px; /* Slightly smaller font size. */
    line-height: 1; /* Keep arrows/text compact. */
    gap: 4px; /* Reduce spacing between icon/text. */
} /* End of pagination item styles. */

.pagination__disabled { /* Disabled pagination state. */
    opacity: 0.5; /* Muted appearance. */
    cursor: not-allowed; /* Show disabled cursor. */
} /* End disabled pagination. */

.pagination__dots { /* Pagination dots. */
    padding: 4px 6px; /* Slightly tighter spacing. */
} /* End pagination dots. */

/* Active pagination state. */
.pagination span[aria-current="page"] { /* Style active page indicator. */
    background: rgba(76, 141, 255, 0.18); /* Use light primary background. */
    color: var(--color-primary); /* Use primary text color. */
    border-color: rgba(76, 141, 255, 0.4); /* Highlight border for active page. */
} /* End of active pagination styles. */

/* Compact pagination arrows. */
.pagination svg { /* Resize pagination icons. */
    width: 9px; /* Smaller width. */
    height: 9px; /* Smaller height. */
} /* End pagination icon resize. */

/* Extra clamp for prev/next when icons are oversized. */
.pagination a[rel="prev"],
.pagination a[rel="next"],
.pagination__disabled { /* Target prev/next controls. */
    font-size: 11px; /* Force smaller text/arrow size. */
} /* End prev/next clamp. */

/* Hard override for Tailwind w-5 h-5 utilities inside pagination. */
.pagination svg.w-5.h-5 { /* Force smaller pagination arrows. */
    width: 9px !important; /* Override tailwind width. */
    height: 9px !important; /* Override tailwind height. */
} /* End hard override. */

/* Header layout helpers for left/right sections. */
.page-header__left { /* Left side of the page header. */
    display: flex; /* Keep title aligned. */
    align-items: center; /* Center title vertically. */
    gap: 12px; /* Add spacing for potential badges. */
} /* End of page-header__left styles. */

.page-header__right { /* Right side of the page header. */
    display: flex; /* Align processes and logout horizontally. */
    align-items: center; /* Vertically center items. */
    gap: 12px; /* Add spacing between items. */
    flex-wrap: wrap; /* Allow wrapping on smaller screens. */
} /* End of page-header__right styles. */

/* Processes indicator styling. */
.processes { /* Base styling for processes dropdown. */
    position: relative; /* Position panel relative to summary. */
    background: rgba(15, 23, 42, 0.85); /* Soft background. */
    border: 1px solid rgba(31, 42, 68, 0.9); /* Subtle border. */
    border-radius: 999px; /* Rounded pill shape. */
    padding: 6px 12px; /* Padding around summary text. */
} /* End of processes base styles. */

/* Processes summary label. */
.processes__summary { /* Style the summary text. */
    cursor: pointer; /* Show pointer cursor. */
    list-style: none; /* Remove default marker. */
    font-weight: 600; /* Emphasize summary. */
    color: var(--color-text); /* Use base text color. */
} /* End of processes summary styles. */

/* Remove default marker for summary. */
.processes__summary::-webkit-details-marker { /* Hide default marker in WebKit. */
    display: none; /* Remove marker. */
} /* End of marker removal. */

.process-bar__section { /* Section label inside process bar. */
    font-size: 12px; /* Small label size. */
    color: var(--color-muted); /* Muted label color. */
    margin-top: 8px; /* Space above label. */
} /* End process bar section. */

.process-bar__item--recent { /* Style recent items. */
    opacity: 0.75; /* Subtle appearance. */
} /* End recent item style. */

.process-bar__badge { /* Badge for trigger labels. */
    background: rgba(148, 163, 184, 0.2); /* Soft badge background. */
    color: var(--color-muted); /* Muted text color. */
    border-radius: 999px; /* Pill shape. */
    padding: 2px 8px; /* Compact padding. */
    font-size: 11px; /* Small text. */
} /* End badge style. */

/* Processes dropdown panel. */
.processes__panel { /* Style the dropdown panel. */
    position: absolute; /* Position the panel below summary. */
    top: calc(100% + 8px); /* Offset below the summary. */
    right: 0; /* Align to the right edge. */
    min-width: 260px; /* Set minimum panel width. */
    background: var(--color-surface); /* Use surface background. */
    border: 1px solid rgba(31, 42, 68, 0.9); /* Subtle border. */
    border-radius: 16px; /* Rounded corners. */
    box-shadow: 0 16px 32px var(--color-shadow); /* Add elevation. */
    padding: 12px; /* Inner padding. */
    display: none; /* Hide panel by default. */
    z-index: 10; /* Keep panel above other elements. */
} /* End of processes panel styles. */

/* Show panel when details is open. */
.processes[open] .processes__panel { /* Reveal panel when open. */
    display: block; /* Show the panel. */
} /* End of open state styles. */

/* Processes list styling. */
.processes__list { /* Style the list of processes. */
    list-style: none; /* Remove default list styling. */
    margin: 0; /* Remove default margins. */
    padding: 0; /* Remove default padding. */
    display: grid; /* Use grid for spacing. */
    gap: 10px; /* Add spacing between items. */
} /* End of processes list styles. */

/* Single process item styling. */
.processes__item { /* Style individual process rows. */
    display: flex; /* Stack name and meta. */
    flex-direction: column; /* Vertical layout for text. */
    gap: 4px; /* Space between name and meta. */
} /* End of processes item styles. */

/* Process name styling. */
.processes__name { /* Style the store name. */
    font-weight: 600; /* Emphasize store name. */
} /* End of processes name styles. */

/* Process meta styling. */
.processes__meta { /* Style the meta text. */
    color: var(--color-muted); /* Use muted color for meta. */
    font-size: 12px; /* Smaller meta text. */
} /* End of processes meta styles. */

/* Empty processes text. */
.processes__empty { /* Style empty state text. */
    margin: 0; /* Remove default margin. */
    color: var(--color-muted); /* Use muted color. */
    font-size: 13px; /* Smaller text. */
} /* End of processes empty styles. */

/* Adjust processes panel for small screens. */
@media (max-width: 600px) { /* Mobile breakpoint adjustments. */
    .processes__panel { /* Override panel positioning on mobile. */
        position: static; /* Let the panel flow naturally. */
        margin-top: 10px; /* Add spacing above panel. */
} /* End of mobile panel adjustments. */
} /* End of mobile breakpoint. */

/* Widget stack layout for product detail. */
.widget-stack { /* Stack widgets vertically. */
    display: grid; /* Use grid for consistent spacing. */
    gap: 16px; /* Space between widgets. */
} /* End of widget stack. */

/* Hidden widget state. */
.widget--hidden { /* Hide widgets when toggled off. */
    display: none !important; /* Force hidden layout. */
} /* End of hidden widget state. */

/* Row layout inside cards for title + actions. */
.card__row { /* Align title with actions. */
    display: flex; /* Use flex to align items. */
    align-items: center; /* Center items vertically. */
    justify-content: space-between; /* Spread title and actions. */
    gap: 12px; /* Space between elements. */
    margin-bottom: 10px; /* Space below the row. */
} /* End of card row layout. */

.card__actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
} /* End card actions. */

.table-action-inline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
} /* End table inline actions. */

/* Icon-only button styling. */
.icon-button { /* Compact icon action button. */
    border: 1px solid rgba(148, 163, 184, 0.4); /* Subtle border. */
    background: transparent; /* No background fill. */
    color: var(--color-muted); /* Muted icon color. */
    width: 30px; /* Square size. */
    height: 30px; /* Square size. */
    border-radius: 999px; /* Fully rounded. */
    display: inline-flex; /* Center icon. */
    align-items: center; /* Center vertically. */
    justify-content: center; /* Center horizontally. */
    cursor: pointer; /* Pointer cursor on hover. */
} /* End of icon button. */

.icon-button::before { /* Icon glyphs. */
    font-size: 13px; /* Compact icon size. */
    font-weight: 700; /* Make the glyph readable. */
    line-height: 1; /* Tight line height. */
} /* End icon glyph. */

.icon-button[data-icon="details"]::before { /* Details icon. */
    content: "i"; /* Info glyph. */
} /* End details icon. */

.icon-button[data-icon="price"]::before { /* Price icon. */
    content: "$"; /* Dollar glyph. */
} /* End price icon. */

.icon-button[data-icon="refresh"]::before { /* Refresh icon. */
    content: "↻"; /* Refresh glyph. */
} /* End refresh icon. */

.icon-button[data-icon="edit"]::before { /* Edit icon. */
    content: "✎"; /* Pencil glyph. */
} /* End edit icon. */

.icon-button[data-icon="copy"]::before { /* Copy icon. */
    content: "⧉"; /* Copy glyph. */
} /* End copy icon. */

.icon-button[data-icon="download"]::before { /* Download icon. */
    content: "↓"; /* Download glyph. */
} /* End download icon. */

.icon-button:hover { /* Hover state for icon button. */
    color: var(--color-text); /* Brighten icon. */
    border-color: rgba(148, 163, 184, 0.7); /* Stronger border. */
} /* End of hover state. */

/* Tiny icon button variant for inline actions. */
.icon-button--tiny {
    width: 22px;
    height: 22px;
} /* End tiny variant. */

.icon-button--tiny::before {
    font-size: 11px;
} /* End tiny icon size. */

.icon-button.is-copied { /* Visual feedback after copy. */
    border-color: rgba(76, 141, 255, 0.7);
    color: var(--color-primary);
    box-shadow: 0 0 0 2px rgba(76, 141, 255, 0.2);
} /* End copy feedback. */

/* Price display styling. */
.price-display { /* Layout for price values. */
    display: flex; /* Use flex for inline values. */
    flex-wrap: wrap; /* Wrap label onto new lines. */
    align-items: baseline; /* Align price values neatly. */
    gap: 6px 12px; /* Space between price elements. */
} /* End of price display. */

.price-caption { /* Caption before price values. */
    font-size: 12px; /* Small caption text. */
    letter-spacing: 0.08em; /* Spaced lettering. */
    text-transform: uppercase; /* Uppercase caption. */
    color: var(--color-muted); /* Muted caption color. */
} /* End of caption styling. */

.price-regular { /* Regular price styling. */
    font-size: 14px; /* Smaller regular price text. */
    color: var(--color-muted); /* Muted for crossed price. */
    text-decoration: line-through; /* Strike through when promo. */
} /* End of regular price. */

.price-sale, /* Promo price styling. */
.price-current { /* Current price styling. */
    font-size: 24px; /* Larger current price. */
    font-weight: 700; /* Emphasize current price. */
    color: var(--color-text); /* Use base text color. */
} /* End of price sale/current. */

.price-label { /* Price context label. */
    flex: 0 0 100%; /* Move label to a new line. */
    font-size: 12px; /* Small label text. */
    color: var(--color-muted); /* Muted label color. */
} /* End of price label. */

/* Action menu (dropdown) styling. */
.action-menu { /* Base action menu container. */
    position: relative; /* Anchor the dropdown panel. */
    display: inline-block; /* Keep menu inline. */
} /* End of action menu container. */

.action-menu__toggle { /* Summary button styling. */
    list-style: none; /* Remove default marker. */
    display: inline-flex; /* Align text in a row. */
    align-items: center; /* Center items vertically. */
    gap: 6px; /* Space between icon and text. */
    padding: 6px 12px; /* Padding for button feel. */
    border-radius: 999px; /* Pill shape. */
    border: 1px solid rgba(148, 163, 184, 0.35); /* Soft border. */
    background: transparent; /* No fill by default. */
    color: var(--color-muted); /* Muted text color. */
    cursor: pointer; /* Pointer cursor for interaction. */
} /* End of action menu toggle. */

.action-menu__toggle::-webkit-details-marker { /* Remove default marker in WebKit. */
    display: none; /* Hide marker. */
} /* End of marker removal. */

.action-menu__toggle:hover { /* Hover state for toggle. */
    color: var(--color-text); /* Brighten text. */
    border-color: rgba(148, 163, 184, 0.6); /* Stronger border. */
} /* End of hover state. */

.action-menu__panel { /* Dropdown panel styling. */
    position: absolute; /* Position relative to toggle. */
    top: calc(100% + 8px); /* Offset below toggle. */
    right: 0; /* Align to right edge. */
    min-width: 190px; /* Comfortable panel width. */
    background: var(--color-surface); /* Surface background. */
    border: 1px solid rgba(31, 42, 68, 0.9); /* Border for panel. */
    border-radius: 14px; /* Rounded corners. */
    padding: 10px; /* Inner spacing. */
    box-shadow: 0 18px 32px var(--color-shadow); /* Soft shadow. */
    display: none; /* Hidden by default. */
    z-index: 20; /* Keep above table rows. */
} /* End of panel styling. */

.action-menu[open] .action-menu__panel { /* Show when open. */
    display: block; /* Reveal panel. */
} /* End of open state. */

.action-menu__panel--wide { /* Wider panel variant. */
    min-width: 260px; /* Increase minimum width. */
} /* End of wide panel. */

.action-menu--compact .action-menu__toggle { /* Compact variant for tables. */
    padding: 4px 10px; /* Smaller padding. */
    font-size: 12px; /* Smaller text. */
} /* End of compact toggle. */

/* Table controls inside dropdown panels. */
.action-menu__panel .table-controls { /* Fit controls inside dropdown. */
    margin: 0; /* Remove extra margin. */
    padding: 8px; /* Compact padding. */
    flex-direction: column; /* Stack items vertically. */
    align-items: flex-start; /* Align labels to the left. */
    background: transparent; /* Remove background inside panel. */
    border: none; /* Remove border inside panel. */
    gap: 8px; /* Tighter spacing. */
} /* End of dropdown table controls. */

/* Layout controls inside the widget panel. */
.layout-controls { /* Stack layout control items. */
    display: grid; /* Grid layout for controls. */
    gap: 12px; /* Space between controls. */
} /* End of layout controls. */

.layout-item { /* Single layout control row. */
    display: flex; /* Align label and actions. */
    align-items: center; /* Center vertically. */
    justify-content: space-between; /* Push actions to the right. */
    gap: 12px; /* Space between label and actions. */
    padding: 10px 12px; /* Inner padding. */
    border-radius: 14px; /* Rounded corners. */
    border: 1px solid rgba(31, 42, 68, 0.7); /* Subtle border. */
    background: rgba(15, 23, 42, 0.5); /* Slightly tinted background. */
} /* End of layout item. */

.layout-item__label { /* Widget label text. */
    font-weight: 600; /* Emphasize label. */
} /* End of label styling. */

.layout-item__actions { /* Action controls row. */
    display: inline-flex; /* Align actions in a row. */
    align-items: center; /* Center vertically. */
    gap: 6px; /* Space between controls. */
} /* End of actions row. */

.layout-item__toggle { /* Visibility toggle label. */
    display: inline-flex; /* Align checkbox and text. */
    align-items: center; /* Center vertically. */
    gap: 6px; /* Space between checkbox and text. */
    font-size: 12px; /* Smaller toggle text. */
    color: var(--color-muted); /* Muted toggle color. */
} /* End of toggle styling. */

/* Current price summary for charts. */
.chart-current { /* Layout for current price labels. */
    display: flex; /* Inline layout for items. */
    flex-wrap: wrap; /* Allow wrapping. */
    gap: 6px 12px; /* Space between items. */
    margin: 10px 0 14px; /* Add spacing around block. */
    font-size: 12px; /* Compact text size. */
    color: var(--color-muted); /* Muted label color. */
} /* End of chart current. */

.chart-current__label { /* Bold label inside current block. */
    font-weight: 600; /* Emphasize label. */
    color: var(--color-text); /* Slightly brighter. */
} /* End of chart label. */

.chart-current__item { /* Single current price item. */
    background: rgba(15, 23, 42, 0.6); /* Subtle chip background. */
    border: 1px solid rgba(31, 42, 68, 0.8); /* Border for chip. */
    padding: 4px 8px; /* Padding inside chip. */
    border-radius: 999px; /* Pill shape. */
} /* End of current item. */

/* Compact search rules bar. */
.rules-bar { /* Wrapper for rules section. */
    padding: 6px 8px; /* Tighter padding. */
    border: 1px solid rgba(31, 42, 68, 0.8); /* Subtle border. */
    border-radius: 14px; /* Soft rounding. */
    background: rgba(10, 16, 34, 0.4); /* Slight contrast. */
} /* End rules bar. */

.rules-bar--sticky { /* Sticky rules bar for quick access. */
    position: sticky; /* Stick within scrolling container. */
    bottom: 12px; /* Pin near the bottom. */
    z-index: 5; /* Float above table content. */
    box-shadow: 0 12px 24px rgba(2, 6, 23, 0.35); /* Lifted shadow. */
    backdrop-filter: blur(12px); /* Maintain contrast. */
} /* End sticky rules bar. */

.rules-bar .table-wrapper { /* Reduce spacing around table. */
    margin: 6px 0 4px; /* Tight vertical spacing. */
} /* End table wrapper. */

.rules-table thead { /* Hide header row to keep bar short. */
    display: none; /* No header row. */
} /* End header hide. */

.rules-table { /* Flatten rules table. */
    width: 100%; /* Full width. */
} /* End rules table. */

.rules-table tbody { /* Stack rows with minimal gap. */
    display: flex; /* Flex column. */
    flex-direction: column; /* Vertical stack. */
    gap: 6px; /* Small gap between rows. */
} /* End tbody. */

.rules-table tr { /* Row as grid to keep bar tight. */
    display: grid; /* Grid layout. */
    grid-template-columns: 80px minmax(160px, 1.1fr) minmax(150px, 1fr) minmax(200px, 1.4fr) 70px; /* Compact columns. */
    gap: 8px; /* Small gap. */
    align-items: center; /* Vertically center. */
} /* End row grid. */

.rules-table td { /* Compact cells. */
    padding: 0; /* Remove padding. */
    border: 0; /* Remove borders. */
} /* End compact cells. */

.rules-table td:last-child { /* Actions cell alignment. */
    justify-self: end; /* Align to the right. */
} /* End actions alignment. */

.rules-table td:last-child .button { /* Action button sizing. */
    min-width: 70px; /* Consistent width. */
} /* End action button sizing. */

.rules-table .form__input { /* Smaller inputs. */
    height: 30px; /* Compact height. */
    padding: 5px 10px; /* Tight padding. */
    font-size: 12px; /* Smaller text. */
} /* End smaller inputs. */

@media (max-width: 700px) {
    .rules-table tr {
        grid-template-columns: 1fr;
    }

    .rules-table td:last-child {
        justify-self: start;
    }
} /* End rules table mobile stack. */

.rules-actions { /* Inline action row. */
    display: flex; /* Inline layout. */
    align-items: center; /* Center items. */
    gap: 4px; /* Space between. */
    margin-top: 4px; /* Tight top spacing. */
} /* End actions row. */

.rules-actions .button { /* Smaller action buttons. */
    padding: 5px 10px; /* Tight padding. */
    font-size: 12px; /* Small font. */
} /* End button sizing. */

.filters-sort__summary { /* Sort trigger styling. */
    background: rgba(59, 130, 246, 0.18); /* Subtle blue tint. */
    border: 1px solid rgba(59, 130, 246, 0.45); /* Blue outline. */
    color: var(--color-text); /* Keep readable. */
    padding: 6px 12px; /* Compact chip. */
    border-radius: 999px; /* Pill. */
} /* End sort summary. */

.filters-sort__summary::after { /* Reduce arrow spacing. */
    margin-left: 6px; /* Tighten arrow gap. */
} /* End arrow spacing. */

.rules-actions__spacer { /* Push search actions to right. */
    flex: 1; /* Fill remaining space. */
} /* End spacer. */

.table-wrapper--rule { /* Wrapper for price rule tables. */
    overflow-x: auto; /* Allow horizontal scroll if needed. */
} /* End rule table wrapper. */

.rule-table { /* Price rule tables. */
    width: 100%; /* Full width. */
    table-layout: fixed; /* Prevent overflow. */
} /* End rule table. */

.rule-table th,
.rule-table td { /* Compact rule table cells. */
    padding: 6px 6px; /* Smaller padding. */
    vertical-align: top; /* Align content to top. */
    min-width: 0; /* Allow shrinking. */
} /* End cell styles. */

.rule-table th { /* Header sizing. */
    font-size: 12px; /* Smaller header text. */
} /* End header sizing. */

.rule-table .form__input { /* Inputs inside rule table. */
    width: 100%; /* Fill cell width. */
    min-width: 0; /* Allow shrink. */
} /* End input sizing. */

.rule-table td .form__input + .form__input { /* Stack multiple selects in a cell. */
    margin-top: 6px; /* Space between stacked inputs. */
} /* End stacked inputs. */

.form--rules { /* Wider rules form. */
    max-width: none; /* Use full card width. */
} /* End rules form. */