/* Lifted verbatim from assignment-submission-content.blade.php.
   Inline it was 126,196 bytes of HTML on every render;
   as a file the browser fetches it once. */
/* ========================================
   UNIFIED DESIGN SYSTEM - Apple/Stripe Style
   Clean, consistent components for left column
   ======================================== */

/* ========================================
   REUSABLE TOGGLE SWITCH COMPONENT
   ======================================== */
.cq-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
}

.cq-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.cq-switch-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #e5e7eb;
    transition: 0.3s;
    border-radius: 24px;
}

.dark .cq-switch-slider {
    background-color: rgba(255, 255, 255, 0.15);
}

.cq-switch-slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: 0.3s;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.cq-switch input:checked + .cq-switch-slider {
    background: linear-gradient(135deg, #3b82f6, #6366f1);
}

.cq-switch input:checked + .cq-switch-slider:before {
    transform: translateX(20px);
}

.cq-switch input:focus + .cq-switch-slider {
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

.cq-switch input:disabled + .cq-switch-slider {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ========================================
   REUSABLE FEATURE TOGGLE CONTAINER
   ======================================== */
.cq-feature-toggle {
    margin: 16px 0;
    padding: 14px 16px;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.08) 0%, rgba(99, 102, 241, 0.06) 100%);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: 12px;
    transition: opacity 0.2s ease;
}

.cq-feature-toggle.saving {
    opacity: 0.7;
    pointer-events: none;
}

.cq-feature-toggle-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.cq-feature-toggle-content {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    flex: 1;
}

.cq-feature-toggle-icon {
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, #3b82f6, #6366f1);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.cq-feature-toggle-icon svg {
    width: 16px;
    height: 16px;
    color: white;
}

.cq-feature-toggle-text {
    flex: 1;
}

.cq-feature-toggle-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--foreground);
    margin-bottom: 2px;
}

.cq-feature-toggle-desc {
    font-size: 11px;
    color: var(--muted-foreground);
    line-height: 1.4;
}

/* Feature Toggle Color Variants */
.cq-feature-toggle.green {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(5, 150, 105, 0.06) 100%);
    border-color: rgba(16, 185, 129, 0.2);
}

.cq-feature-toggle.green .cq-feature-toggle-icon {
    background: linear-gradient(135deg, #10b981, #059669);
}

.cq-feature-toggle.purple {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.08) 0%, rgba(124, 58, 237, 0.06) 100%);
    border-color: rgba(139, 92, 246, 0.2);
}

.cq-feature-toggle.purple .cq-feature-toggle-icon {
    background: linear-gradient(135deg, #8b5cf6, #7c3aed);
}

.cq-feature-toggle.orange {
    background: linear-gradient(135deg, rgba(249, 115, 22, 0.08) 0%, rgba(234, 88, 12, 0.06) 100%);
    border-color: rgba(249, 115, 22, 0.2);
}

.cq-feature-toggle.orange .cq-feature-toggle-icon {
    background: linear-gradient(135deg, #f97316, #ea580c);
}

/* ========================================
   ASSIGNMENT GRID — responsive (mobile / laptop / desktop)
   Fixes overflow on laptop viewports where the default lg:grid-cols-3
   gives the right column too little room for the submissions table.
   ======================================== */

.cq-asgn-grid {
    display: grid;
    grid-template-columns: 1fr;        /* mobile: stacked */
    gap: 1.25rem;
}

@media (min-width: 1024px) {
    /* Laptops (1024-1535px): narrow fixed left column, flex right.
       minmax(0, 1fr) lets the right column shrink so the table can
       scroll horizontally instead of overflowing the page. */
    .cq-asgn-grid {
        grid-template-columns: 280px minmax(0, 1fr);
        gap: 1.75rem;
        align-items: start;
    }
    .cq-asgn-grid > * { min-width: 0; }   /* allow grid children to shrink */
}

@media (min-width: 1440px) {
    /* Larger laptops / small desktops (1440-1919px): widen the sidebar so
       the upload / paste-code panel doesn't look cramped next to the
       submissions table. */
    .cq-asgn-grid { grid-template-columns: 380px minmax(0, 1fr); gap: 2rem; }
}

@media (min-width: 1920px) {
    /* Full HD desktop (1920–2399px): the left column at 440px still felt
       cramped against the wide submissions table — bump to 520px so the
       status/CPU/memory/Recent Activity stack has real breathing room. */
    .cq-asgn-grid { grid-template-columns: 520px minmax(0, 1fr); gap: 2.25rem; }
}

@media (min-width: 2400px) {
    /* Ultrawide / 4K — cap the left column so it doesn't keep growing. */
    .cq-asgn-grid { grid-template-columns: 580px minmax(0, 1fr); gap: 2.5rem; }
}

/* Make the demo "Get Started" CTA wrap on narrower laptop widths
   so the price suffix doesn't push the button past its container. */
.cq-asgn-grid .unified-card a,
.cq-asgn-grid .unified-card button { max-width: 100%; }

/* Defensive: ensure all tables on the assignment page can scroll
   inside their column rather than expand it. */
.cq-asgn-grid .submissions-table-wrapper,
.cq-asgn-grid .kt-table-wrapper { max-width: 100%; }

/* ========================================
   APPLE-STYLE SUBMISSIONS TABLE - Premium Design
   ======================================== */

.submissions-table-wrapper {
    overflow-x: auto;
    overflow-y: visible;
    width: 100%;
    border-radius: 12px;
    background: var(--background);
}

.submissions-table-compact {
    width: 100%;
    /* Must be at least the sum of the fixed column widths below (982px). With
       table-layout:fixed, a container narrower than that makes the browser
       shrink every column proportionally, which clips the status pill and
       squashes the action buttons. At this min-width the wrapper scrolls
       horizontally instead — nothing is ever cut off. */
    min-width: 1000px;
    border-collapse: separate;
    border-spacing: 0;
    /* Fixed layout so column widths defined below are respected and the
       Submission column doesn't absorb all remaining space on wide rows. */
    table-layout: fixed;
}

.submissions-table-compact thead th {
    padding: 12px 16px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(0, 0, 0, 0.45);
    background: transparent;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    white-space: nowrap;
}

.dark .submissions-table-compact thead th {
    color: rgba(255, 255, 255, 0.45);
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

.submissions-table-compact tbody td {
    padding: 12px 16px;
    vertical-align: middle;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

/* Rings anchor to the TOP of the row, not its middle. A cell that carries a
   caption under its ring ("HyperScan result", "None found", "Scanning…") is taller
   than the cells either side of it, and centring the whole ring+caption block
   floated that ring above its neighbours - three scores on one row, none of
   them on the same line. Top alignment puts every ring at the same height and
   lets the caption hang below it. */
.submissions-table-compact tbody td.score-cell {
    overflow: visible;
    padding: 8px 12px;
    vertical-align: top;
}

/* Status and action cells trade cell padding for content room. */
.submissions-table-compact tbody td:nth-child(3),
.submissions-table-compact tbody td:last-child {
    padding-left: 8px;
    padding-right: 8px;
}

.action-btns { flex-wrap: nowrap; }
.action-btns .action-btn { flex-shrink: 0; }

.dark .submissions-table-compact tbody td {
    border-bottom-color: rgba(255, 255, 255, 0.04);
}

.submissions-table-compact tbody tr {
    transition: background 0.15s ease;
}

.submissions-table-compact tbody tr:hover {
    background: rgba(0, 0, 0, 0.02);
}

.dark .submissions-table-compact tbody tr:hover {
    background: rgba(255, 255, 255, 0.03);
}

.submissions-table-compact tbody tr:last-child td {
    border-bottom: none;
}

/* Column widths - Balanced.
   With table-layout: fixed (above), the values here are authoritative.
   col-student gets a sane width so it doesn't eat the row on wide
   screens; long filenames truncate with ellipsis inside the cell. */
.col-checkbox { width: 36px; padding-left: 12px !important; }
.col-student { width: 280px; min-width: 180px; }
/* Sized to the longest pill it renders ("HyperScanning…", ~109px) plus the
   cell padding. table-layout is fixed, so the column width IS the budget. */
.col-status { width: 150px; text-align: center; }
.col-score { width: 110px; text-align: center; overflow: visible; }
.col-score-wide { width: 120px; text-align: center; overflow: visible; }
.col-view { width: 60px; text-align: center; }
/* Three buttons once the re-run action is present. */
.col-actions { width: 96px; text-align: center; }

/* Truncate long names/emails inside the fixed-width student cell. */
.submissions-table-compact .student-info { min-width: 0; }
.submissions-table-compact .student-name,
.submissions-table-compact .student-email {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}
.col-actions { width: 72px; }

/* Submission Cell - Apple Style */
.student-cell {
    display: flex;
    align-items: center;
    gap: 12px;
}

.student-avatar {
    position: relative;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: linear-gradient(135deg, #f0f5ff 0%, #e8f0fe 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.dark .student-avatar {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15) 0%, rgba(99, 102, 241, 0.15) 100%);
}

.student-avatar i {
    font-size: 14px;
    color: #3b82f6;
}

.student-size {
    position: absolute;
    bottom: -3px;
    right: -3px;
    font-size: 9px;
    font-weight: 600;
    padding: 2px 5px;
    background: var(--background);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 6px;
    color: var(--muted-foreground);
    white-space: nowrap;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.dark .student-size {
    border-color: rgba(255, 255, 255, 0.1);
}

.student-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.student-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--foreground);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: -0.01em;
    max-width: 100%;
}

.student-email {
    font-size: 11px;
    color: var(--muted-foreground);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 0.8;
    max-width: 100%;
}

/* Status Pills - Apple Style with Text */
.status-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 5px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.01em;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.status-pill i {
    font-size: 10px;
}

.status-pill:hover {
    transform: scale(1.03);
}

.status-completed {
    background: rgba(52, 199, 89, 0.12);
    color: #34c759;
}

.status-ready {
    background: rgba(0, 122, 255, 0.12);
    color: #007aff;
}

.status-processing {
    background: rgba(255, 149, 0, 0.12);
    color: #ff9500;
}

.status-pending {
    background: rgba(142, 142, 147, 0.12);
    color: #8e8e93;
}

/* Apple-Style Radial Score Progress */
.radial-score {
    position: relative;
    width: 52px;
    height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
}

.radial-score svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
    overflow: visible;
}

.radial-score .radial-bg {
    fill: none;
    stroke: rgba(0, 0, 0, 0.06);
    stroke-width: 4;
}

.dark .radial-score .radial-bg {
    stroke: rgba(255, 255, 255, 0.1);
}

.radial-score .radial-progress {
    fill: none;
    stroke: var(--score-color);
    stroke-width: 4;
    stroke-linecap: round;
    stroke-dasharray: 97.5;
    transition: stroke-dashoffset 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.radial-value {
    position: absolute;
    font-size: 12px;
    font-weight: 700;
    color: var(--score-color);
    letter-spacing: -0.02em;
    font-feature-settings: "tnum" 1;
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', sans-serif;
}

.score-cell {
    overflow: visible !important;
}

/* ========================================
   SCORE DISPLAY OPTIONS - Apple Style
   ======================================== */
.score-display-options {
    padding: 12px 20px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.015) 0%, rgba(0, 0, 0, 0.025) 100%);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.dark .score-display-options {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.03) 100%);
    border-bottom-color: rgba(255, 255, 255, 0.06);
}

.score-options-inner {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.score-options-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: rgba(0, 0, 0, 0.4);
    padding-right: 12px;
    border-right: 1px solid rgba(0, 0, 0, 0.08);
}

.dark .score-options-label {
    color: rgba(255, 255, 255, 0.4);
    border-right-color: rgba(255, 255, 255, 0.08);
}

.score-options-label svg {
    opacity: 0.6;
}

.score-options-toggles {
    display: flex;
    align-items: center;
    gap: 20px;
}

/* Apple Toggle Switch */
.apple-toggle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
}

.apple-toggle input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.apple-toggle-track {
    position: relative;
    width: 42px;
    height: 24px;
    background: rgba(0, 0, 0, 0.15);
    border-radius: 24px;
    transition: background 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
}

.dark .apple-toggle-track {
    background: rgba(255, 255, 255, 0.2);
}

.apple-toggle-track::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    background: white;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.apple-toggle input[type="checkbox"]:checked + .apple-toggle-track {
    background: #34c759;
}

.apple-toggle input[type="checkbox"]:checked + .apple-toggle-track::after {
    transform: translateX(18px);
}

.apple-toggle:hover .apple-toggle-track {
    background: rgba(0, 0, 0, 0.22);
}

.dark .apple-toggle:hover .apple-toggle-track {
    background: rgba(255, 255, 255, 0.28);
}

.apple-toggle input[type="checkbox"]:checked + .apple-toggle-track:hover {
    background: #2db84d;
}

.apple-toggle-text {
    font-size: 13px;
    font-weight: 500;
    color: rgba(0, 0, 0, 0.7);
    transition: color 0.15s ease;
}

.dark .apple-toggle-text {
    color: rgba(255, 255, 255, 0.7);
}

.apple-toggle:hover .apple-toggle-text {
    color: rgba(0, 0, 0, 0.9);
}

.dark .apple-toggle:hover .apple-toggle-text {
    color: rgba(255, 255, 255, 0.9);
}

/* Ring-height boxes, so the placeholders and the lock line up with the rings
   beside them now that score cells anchor to the top of the row. */
.score-empty,
.score-cell .score-locked {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 52px;
}

.score-empty {
    color: var(--muted-foreground);
    font-size: 12px;
}

/* HyperScan pre-scan - same radial furniture as the peer/web/AI columns so
   the row keeps its rhythm, but always indigo and captioned, so it never
   reads as a score on the red/amber/green scale a full check earns. */
.status-pill.status-hyperscanning {
    gap: 4px;
    padding: 5px 8px;
    background: rgba(99, 102, 241, 0.12);
    color: #6366f1;
    font-size: 10.5px;
    max-width: 100%;
}

.hs-radial-wrap {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    padding: 0;
    border: none;
    background: none;
}

.hs-radial-btn {
    cursor: pointer;
    border-radius: 10px;
    transition: background 0.15s ease;
}

.hs-radial-btn:hover {
    background: rgba(99, 102, 241, 0.08);
}

/* One-shot nudge over a HyperScan result. The radial IS a button, but a score
   doesn't look clickable, so the first time one appears it says so and gets
   out of the way.

   Mounted on <body> rather than inside the cell: .submissions-table-wrapper
   is overflow-x:auto, which makes overflow-y compute to auto too, so a bubble
   sitting above a row would be clipped by the table instead of floating over
   it. Absolute (in page coordinates), not fixed - it has to stay glued to its
   radial if the instructor scrolls while it's up. pointer-events:none so it
   can never swallow the click it is advertising. */
.hs-poke {
    position: absolute;
    z-index: 1000;
    padding: 5px 10px;
    border-radius: 8px;
    background: #4f46e5;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    pointer-events: none;
    box-shadow: 0 6px 18px rgba(79, 70, 229, .35);
    animation: hs-poke-in 200ms cubic-bezier(.34, 1.56, .64, 1) both;
}

/* Arrow, pointing down at the radial it belongs to. */
.hs-poke::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border: 5px solid transparent;
    border-top-color: #4f46e5;
}

.hs-poke.is-leaving {
    animation: hs-poke-out 260ms ease both;
}

/* The -50%/-100% is what centres the bubble on the radial and lifts it clear,
   so every keyframe has to carry it - a bare scale() here would drop the
   element back onto the cell mid-animation. */
@keyframes hs-poke-in {
    from { opacity: 0; transform: translate(-50%, -100%) translateY(7px) scale(.85); }
    to   { opacity: 1; transform: translate(-50%, -100%) translateY(0) scale(1); }
}

@keyframes hs-poke-out {
    from { opacity: 1; transform: translate(-50%, -100%) translateY(0) scale(1); }
    to   { opacity: 0; transform: translate(-50%, -100%) translateY(-7px) scale(.96); }
}

.dark .hs-poke { background: #6366f1; }
.dark .hs-poke::after { border-top-color: #6366f1; }

@media (prefers-reduced-motion: reduce) {
    @keyframes hs-poke-in {
        from { opacity: 0; transform: translate(-50%, -100%); }
        to   { opacity: 1; transform: translate(-50%, -100%); }
    }
    @keyframes hs-poke-out {
        from { opacity: 1; transform: translate(-50%, -100%); }
        to   { opacity: 0; transform: translate(-50%, -100%); }
    }
}

/* Slightly smaller than a full-check radial - a pre-scan should not shout as
   loud as the real result, and it keeps the taller captioned cell from
   growing the row. */
.hs-radial.radial-score {
    width: 44px;
    height: 44px;
    padding: 2px;
    --score-color: #6366f1;
}

.hs-radial .radial-value {
    font-size: 11px;
}

.hs-radial-caption {
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.05em;
    line-height: 1.2;
    text-transform: uppercase;
    color: #6366f1;
    opacity: 0.75;
}

/* A scan in progress must not be mistakable for a finished score, so it gets
   its own treatment: a dotted track and a thinner arc. Same geometry as a
   result radial, visibly a different kind of thing. */
.hs-radial-scanning .radial-bg {
    stroke-dasharray: 2.5 3.5;
    opacity: .9;
}

.hs-radial-scanning .radial-progress {
    stroke-width: 3;
}

/* "Scanning" with cycling dots — a static caption next to a slow-moving ring
   reads as stalled. Width is reserved so the caption doesn't jitter. */
.hs-caption-dots::after {
    content: '.';
    display: inline-block;
    width: 1.1em;
    text-align: left;
    animation: hs-dots 1.2s steps(1, end) infinite;
}

@keyframes hs-dots {
    0%   { content: '.'; }
    33%  { content: '..'; }
    66%  { content: '...'; }
}

@media (prefers-reduced-motion: reduce) {
    .hs-caption-dots::after { content: '...'; animation: none; }
}

/* Live progress ring. The transition is what turns each 10s poll into motion
   instead of a jump; without it the number would tick and the ring would snap. */
.hs-radial-live {
    stroke: #6366f1;
    transition: stroke-dashoffset 400ms ease;
}

.hs-radial-pct {
    font-size: 9.5px;
    font-weight: 700;
    color: #6366f1;
}

.dark .hs-radial-live { stroke: #a5b4fc; }
.dark .hs-radial-pct { color: #a5b4fc; }

@media (prefers-reduced-motion: reduce) {
    .hs-radial-live { transition: none; }
}

/* Fallback for a database without hyperscan_progress: an indeterminate quarter
   ring chasing its own tail, in the same stroke weight as a real score so the
   column doesn't visually jump when it lands. */
.hs-radial-spinning .hs-radial-arc {
    stroke: #6366f1;
    stroke-dasharray: 24 74;
    stroke-dashoffset: 0;
    transform-origin: 50% 50%;
    animation: hs-arc-spin 1.1s linear infinite;
}

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

@media (prefers-reduced-motion: reduce) {
    .hs-radial-spinning .hs-radial-arc { animation: none; }
}

/* Nothing-found: same radial furniture, muted so a 0 never reads as a hit. */
.hs-radial-none .radial-score.hs-radial { --score-color: var(--muted-foreground); }
.hs-radial-none .radial-value { color: var(--muted-foreground); }
.hs-radial-none .hs-radial-caption { color: var(--muted-foreground); opacity: 1; }
.dark .hs-radial-none .radial-score.hs-radial { --score-color: var(--muted-foreground); }
.dark .hs-radial-none .hs-radial-caption { color: var(--muted-foreground); }

/* Peer sources are another submission, not a page — distinct from the web chips. */
.hs-source-type.is-peer { background: rgba(16, 185, 129, .14); color: #047857; }
.dark .hs-source-type.is-peer { background: rgba(16, 185, 129, .18); color: #6ee7b7; }

/* Out of scans - the one hyperscan failure the user can act on, so it's a
   link to the top-up rather than a dead badge. Muted: nothing is broken and
   the full check is unaffected. */
.hs-out {
    font-size: 11px;
    font-weight: 600;
    color: #b45309;
    text-decoration: none;
    border-bottom: 1px dotted rgba(180, 83, 9, .5);
}

.hs-out:hover { color: #92400e; }

/* Way back to the pre-scan's sources on a row the full check now owns. */
.hs-prescan-link {
    display: block;
    /* A button never stretches to its container, so this shrink-to-fit box has
       to be centred by its own margins or it sits at the left of the cell. */
    margin: 2px auto 0;
    padding: 0;
    border: none;
    background: none;
    color: #6366f1;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    cursor: pointer;
}

.hs-prescan-link:hover { text-decoration: underline; }
.dark .hs-prescan-link { color: #a5b4fc; }

.action-btn-hyperscan { color: #6366f1; }
.action-btn-hyperscan:hover { background: rgba(99, 102, 241, .12); }
.action-btn-hyperscan:disabled { opacity: .5; cursor: default; }

.dark .hs-out { color: #fbbf24; border-bottom-color: rgba(251, 191, 36, .5); }

/* Source-type chips in the sources panel - same vocabulary the driller uses
   for match_type (5 web, 4 GitHub, 3 Stack Overflow). */
.hs-source-type {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-right: 6px;
    padding: 1px 6px;
    border-radius: 999px;
    background: rgba(99, 102, 241, .12);
    color: #4f46e5;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    vertical-align: 1px;
}

.hs-source-type.is-github { background: rgba(71, 85, 105, .14); color: #334155; }
.hs-source-type.is-stackoverflow { background: rgba(234, 88, 12, .12); color: #c2410c; }

.dark .hs-source-type { background: rgba(165, 180, 252, .16); color: #a5b4fc; }
.dark .hs-source-type.is-github { background: rgba(148, 163, 184, .16); color: #cbd5e1; }
.dark .hs-source-type.is-stackoverflow { background: rgba(251, 146, 60, .16); color: #fdba74; }

.dark .status-pill.status-hyperscanning,
.dark .hs-radial-caption { color: #a5b4fc; }

.dark .hs-radial.radial-score { --score-color: #a5b4fc; }

.dark .hs-radial-spinning .hs-radial-arc { stroke: #a5b4fc; }

.hs-chip-clear {
    background: rgba(142, 142, 147, 0.12);
    color: #8e8e93;
}

.dark .hs-chip-scanning,
.dark .status-pill.status-hyperscanning { color: #a5b4fc; }
.dark .hs-chip-hit { color: #a5b4fc; }

/* Sources panel */
.hs-modal-overlay {
    position: fixed;
    inset: 0;
    /* Max z-index, and portaled to the end of <body> on open so it also wins
       on DOM order against anything that matches it. */
    z-index: 2147483647;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(15, 23, 42, 0.55);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}

.hs-modal-overlay.is-open { display: flex; }

.hs-modal {
    width: 100%;
    /* Column flex with a bounded body so the rail and the detail scroll
       independently instead of the whole modal growing. */
    /* Near-full-screen: this is a code-reading surface, and every pixel taken
       off the panes is a line of evidence you have to scroll for. */
    max-width: min(1680px, 96vw);
    width: 96vw;
    height: 92vh;
    max-height: 92vh;
    margin: 0;
    margin: 16px;
    display: flex;
    flex-direction: column;
    background: var(--background, #fff);
    border: 1px solid var(--border, #e5e5e5);
    border-radius: 12px;
    box-shadow: 0 16px 70px rgba(0, 0, 0, 0.18);
    overflow: hidden;
}

.hs-modal-head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border, #e5e5e5);
    background: linear-gradient(180deg, rgba(99, 102, 241, .05), transparent);
}

/* The badge carries the same indigo the instant-scan radial uses in the table,
   so the panel reads as that feature's surface rather than a generic dialog. */
.hs-modal-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: rgba(99, 102, 241, .12);
    color: #6366f1;
    font-size: 14px;
}

.hs-modal-headings { min-width: 0; flex: 1; }

.hs-modal-title {
    font-size: 14.5px;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--foreground, #18181b);
}

.hs-modal-sub {
    margin-top: 2px;
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--muted-foreground, #71717a);
}

.hs-modal-close {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: var(--muted-foreground, #71717a);
    font-size: 12px;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.hs-modal-close:hover {
    background: var(--background, #fff);
    border-color: var(--border, #e5e5e5);
    color: var(--foreground, #18181b);
}

.dark .hs-modal-mark { background: rgba(165, 180, 252, .16); color: #a5b4fc; }

/* Master/detail: fixed-width source rail, comparison fills the rest. Both
   scroll independently so picking a source never moves the list. */
.hs-modal-body {
    display: flex;
    min-height: 0;
    flex: 1;
}

.hs-master {
    display: flex;
    flex-direction: column;
    flex: 0 0 268px;
    min-width: 0;
    min-height: 0;
    border-right: 1px solid var(--border, #e5e5e5);
    background: var(--muted, #fafafa);
}

.hs-master-head {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 12px 12px 8px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--muted-foreground, #71717a);
}

.hs-master-count {
    padding: 1px 6px;
    border-radius: 999px;
    background: rgba(99, 102, 241, .12);
    color: #6366f1;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0;
    font-variant-numeric: tabular-nums;
}

.dark .hs-master-count { background: rgba(165, 180, 252, .16); color: #a5b4fc; }

.hs-master-list {
    flex: 1;
    min-height: 0;
    padding: 0 8px 8px;
    overflow-y: auto;
}

.hs-detail {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    min-height: 0;
    padding: 12px 16px 16px;
    overflow: hidden;
}

.hs-compare {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.hs-compare[hidden] { display: none; }

/* A card per source. The active one is lifted onto the detail's background and
   given an indigo spine, so the rail reads as tabs into the pane on the right
   rather than as a list that happens to be next to it. */
.hs-src-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 5px;
    width: 100%;
    padding: 9px 10px;
    border: 1px solid transparent;
    border-radius: 9px;
    background: none;
    text-align: left;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.hs-src-item:hover { background: rgba(99, 102, 241, .07); }

.hs-src-item.is-active {
    border-color: var(--border, #e5e5e5);
    background: var(--background, #fff);
    box-shadow: 0 1px 3px rgba(15, 23, 42, .07);
}

.hs-src-item.is-active::before {
    content: '';
    position: absolute;
    top: 9px;
    bottom: 9px;
    left: -1px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: #6366f1;
}

.dark .hs-src-item.is-active::before { background: #a5b4fc; }

.hs-src-item + .hs-src-item { margin-top: 3px; }

/* Score and provenance share the top line; the filename gets the full width
   underneath, where long paths have somewhere to go. */
.hs-src-top {
    display: flex;
    align-items: center;
    gap: 6px;
}

.hs-src-score {
    flex-shrink: 0;
    padding: 2px 7px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 700;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.hs-src-body { min-width: 0; }

.hs-src-title {
    display: block;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--foreground, #18181b);
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.hs-src-host {
    display: block;
    margin-top: 2px;
    font-size: 10px;
    color: var(--muted-foreground, #71717a);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hs-detail-head {
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border, #e5e5e5);
}

.hs-detail-top {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.hs-detail-title {
    flex: 1;
    min-width: 0;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--foreground, #18181b);
    text-decoration: none;
    overflow-wrap: anywhere;
}

a.hs-detail-title:hover { text-decoration: underline; }

/* The one outbound action in the panel, so it gets a button rather than being
   left as another underlined string in a header full of them. */
.hs-open-src {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 9px;
    border: 1px solid var(--border, #e5e5e5);
    border-radius: 7px;
    background: var(--background, #fff);
    color: var(--foreground, #18181b);
    font-size: 11px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.hs-open-src:hover {
    border-color: rgba(99, 102, 241, .45);
    background: rgba(99, 102, 241, .08);
    color: #4f46e5;
    text-decoration: none;
}

.dark .hs-open-src:hover { color: #a5b4fc; }

.hs-caption-muted { color: var(--muted-foreground) !important; }


/* Narrow screens: the rail becomes a horizontal strip above the comparison. */
@media (max-width: 820px) {
    .hs-modal-body { flex-direction: column; }
    .hs-master {
        flex: 0 0 auto;
        max-height: 30vh;
        border-right: none;
        border-bottom: 1px solid var(--border, #e5e5e5);
    }
}


/* One line, ellipsised. A wrapped 200-character URL used to push the panes
   down the screen and told the reader nothing the host and path didn't. */
.hs-source-url {
    display: block;
    margin-top: 5px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 10.5px;
    color: var(--muted-foreground, #71717a);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    direction: ltr;
}

.hs-source-meta {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
    margin-top: 7px;
    font-size: 10.5px;
    color: var(--muted-foreground, #71717a);
}

.hs-meta-chip {
    padding: 2px 7px;
    border-radius: 999px;
    background: var(--muted, #f4f4f5);
    font-weight: 600;
    white-space: nowrap;
}

.dark .hs-meta-chip { background: rgba(148, 163, 184, .16); }

.hs-modal-empty {
    padding: 26px 0;
    text-align: center;
    font-size: 12px;
    color: var(--muted-foreground);
}

/* Instant-scan-finished prompt. Built here rather than pulling in a dialog
   library: the app ships no CDN assets, and this needs the same portal +
   max-z treatment as the sources panel to clear the fixed header. */
.hs-ask-overlay {
    position: fixed;
    inset: 0;
    z-index: 2147483647;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(15, 23, 42, .55);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}

.hs-ask {
    width: 100%;
    max-width: 420px;
    padding: 24px 24px 18px;
    border-radius: 14px;
    background: var(--background, #fff);
    box-shadow: 0 24px 60px rgba(15, 23, 42, .28);
    text-align: center;
    animation: hs-ask-in .18s ease-out;
}

@keyframes hs-ask-in {
    from { opacity: 0; transform: translateY(8px) scale(.98); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) { .hs-ask { animation: none; } }

.hs-ask-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    margin-bottom: 12px;
    border-radius: 50%;
    background: rgba(99, 102, 241, .12);
    color: #6366f1;
    font-size: 20px;
}

.hs-ask-title {
    margin: 0 0 6px;
    font-size: 16px;
    font-weight: 700;
    color: var(--foreground);
}

.hs-ask-text {
    margin: 0 0 8px;
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--foreground);
}

.hs-ask-sub {
    margin: 0 0 18px;
    font-size: 12px;
    line-height: 1.55;
    color: var(--muted-foreground);
}

.hs-ask-actions { display: flex; gap: 8px; }

.hs-ask-btn {
    flex: 1;
    padding: 9px 14px;
    border: 1px solid var(--border, #e5e5e5);
    border-radius: 9px;
    background: var(--background, #fff);
    color: var(--foreground);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
}

.hs-ask-no:hover { background: var(--muted, #f4f4f5); }

.hs-ask-yes {
    border-color: transparent;
    background: #4f46e5;
    color: #fff;
}

.hs-ask-yes:hover { background: #4338ca; }

.dark .hs-ask-icon { background: rgba(165, 180, 252, .16); color: #a5b4fc; }

/* Side-by-side evidence */

/* Toolbar above the two panes: what was found, and the match stepper. The
   caption holds the left edge; the controls travel together on the right. */
.hs-compare-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.hs-compare-note {
    font-size: 10.5px;
    color: var(--muted-foreground, #71717a);
}

.hs-region-legend { margin-left: auto; }

/* One segmented control rather than three loose controls: the count belongs
   between its own arrows, not floating beside them. */
.hs-match-nav {
    display: inline-flex;
    align-items: center;
    gap: 1px;
    padding: 2px;
    border: 1px solid var(--border, #e5e5e5);
    border-radius: 8px;
    background: var(--background, #fff);
}

.hs-nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--muted-foreground, #71717a);
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    transition: background .12s ease, color .12s ease;
}

.hs-nav-btn:hover { background: rgba(99, 102, 241, .12); color: #4f46e5; }
.dark .hs-nav-btn:hover { color: #a5b4fc; }

.hs-nav-count {
    min-width: 42px;
    text-align: center;
    font-size: 10px;
    font-weight: 700;
    color: var(--muted-foreground, #71717a);
    font-variant-numeric: tabular-nums;
}

.hs-compare-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    flex: 1;
    min-height: 0;
}

@media (max-width: 640px) {
    .hs-compare-grid { grid-template-columns: 1fr; }
}

.hs-code-pane {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    border: 1px solid var(--border, #e5e5e5);
    border-radius: 8px;
    overflow: hidden;
}

/* Sticky so you always know which side you're reading while scrolling. One
   row, not two: the side label is a caption, the filename is the content, and
   stacking them spent a whole line of pane height saying so. */
.hs-code-head {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 7px 9px;
    border-bottom: 1px solid var(--border, #e5e5e5);
    background: var(--muted, #fafafa);
    font-size: 10.5px;
}

/* Which side is which, at a glance: the submission is the indigo the panel
   uses throughout, the source is neutral. */
.hs-code-head::before {
    content: '';
    flex-shrink: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #94a3b8;
}

.hs-code-pane.is-submission .hs-code-head::before { background: #6366f1; }
.dark .hs-code-pane.is-submission .hs-code-head::before { background: #a5b4fc; }

.hs-code-head strong {
    flex-shrink: 0;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--muted-foreground, #71717a);
}

.hs-code-head span {
    min-width: 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 10.5px;
    color: var(--foreground, #18181b);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Fills the full-height modal instead of a fixed box, so the panes grow with
   the screen rather than leaving dead space under them. */
.hs-code-body {
    max-height: none;
    flex: 1;
    min-height: 0;
    padding: 4px 0;
    overflow: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11px;
    line-height: 1.55;
}

.hs-code-body::-webkit-scrollbar { width: 9px; height: 9px; }
.hs-code-body::-webkit-scrollbar-thumb {
    border: 2px solid transparent;
    border-radius: 999px;
    background: rgba(100, 116, 139, .35);
    background-clip: content-box;
}
.hs-code-body::-webkit-scrollbar-thumb:hover { background: rgba(100, 116, 139, .55); background-clip: content-box; }

/* The rows sit in a max-content wrapper so every row is as wide as the WIDEST
   row, not as wide as its own text. A `white-space: pre` row overflows a
   block-width box without widening it, so scrolling a pane sideways used to
   slide the row out from under the viewport: the tint stopped at the old right
   edge and the "sticky" line numbers went with it, their containing block
   having left the screen. Sizing each row to max-content individually is not
   enough — short rows would still end early. */
.hs-code-rows { min-width: max-content; }

.hs-code-line {
    display: flex;
    gap: 8px;
    padding: 0 8px 0 0;
    white-space: pre;
}

/* Region styling is driven off two custom properties set inline per line
   (--rc, the region's colour; --rt, its wash), so every state below can be
   expressed in CSS instead of being baked into the inline style. The previous
   build had to fake the active state with a saturate() filter, and matched
   line numbers were a fixed amber that fought whatever colour the region
   actually was. */
.hs-code-line.is-match {
    background: var(--rt);
    box-shadow: inset 3px 0 0 var(--rc);
}

/* Colour, not opacity: the gutter is a sticky opaque strip, and fading the
   element would fade its background back to translucent along with the digit. */
.hs-code-line.is-match .hs-code-n {
    color: var(--rc);
    font-weight: 600;
}

/* Hairlines close the block top and bottom, so a run of matched lines reads as
   one region rather than as N tinted rows that happen to be adjacent. */
.hs-code-line.is-match.is-region-start { box-shadow: inset 3px 0 0 var(--rc), inset 0 1px 0 var(--rc); }
.hs-code-line.is-match.is-region-end { box-shadow: inset 3px 0 0 var(--rc), inset 0 -1px 0 var(--rc); }
.hs-code-line.is-match.is-region-start.is-region-end {
    box-shadow: inset 3px 0 0 var(--rc), inset 0 1px 0 var(--rc), inset 0 -1px 0 var(--rc);
}

/* The region the stepper is on: same hue, more of it. The colour IS the
   region's identity across the two panes, so it is never recoloured. */
.hs-code-line.is-current { background: var(--rt-strong, var(--rt)); }
.hs-code-line.is-current .hs-code-n { font-weight: 700; }

.hs-code-line:not(.is-match):hover { background: rgba(100, 116, 139, .06); }
.dark .hs-code-line:not(.is-match):hover { background: rgba(148, 163, 184, .08); }

.hs-region-legend {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

/* Each chip wears its region's colour, so "the teal one" names a block in both
   panes. The number sits in a solid dot of that colour — the strongest read of
   the hue available in a 20px-tall control. */
.hs-region-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px 3px 3px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: var(--rt);
    font-size: 10px;
    font-weight: 600;
    color: var(--foreground, #18181b);
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    transition: box-shadow .15s ease, border-color .15s ease;
}

.hs-region-chip:hover { border-color: var(--rc); }

.hs-region-chip.is-active {
    border-color: var(--rc);
    font-weight: 700;
    box-shadow: 0 0 0 2px var(--rt);
}

.hs-region-n {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: var(--rc);
    color: #fff;
    font-size: 9px;
    font-weight: 800;
    line-height: 1;
}

/* Line numbers stay put when a long line scrolls the pane sideways. The
   gutter must be OPAQUE to do that: inheriting the row's translucent wash let
   the code slide visibly under the digits. Solid page colour underneath, the
   region wash painted on top as a gradient layer, so the gutter still matches
   the row it belongs to. */
.hs-code-n {
    position: sticky;
    left: 0;
    z-index: 1;
    flex-shrink: 0;
    min-width: 34px;
    padding: 0 6px 0 8px;
    text-align: right;
    color: var(--muted-foreground, #71717a);
    background: var(--background, #fff);
    user-select: none;
}

.hs-code-line.is-match .hs-code-n {
    background-color: var(--background, #fff);
    background-image: linear-gradient(var(--rt), var(--rt));
}

.hs-code-line.is-current .hs-code-n {
    background-image: linear-gradient(var(--rt-strong), var(--rt-strong));
}

.hs-code-line { background: var(--background, #fff); }

.hs-code-line code { background: none; font: inherit; }

.hs-compare-empty {
    padding: 14px 8px;
    text-align: center;
    font-size: 11px;
    color: var(--muted-foreground);
}

.score-locked {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: rgba(245, 158, 11, 0.1);
    border: none;
    cursor: pointer;
    transition: all 0.15s ease;
}

.score-locked i {
    font-size: 11px;
    color: #f59e0b;
}

.score-locked:hover {
    background: rgba(245, 158, 11, 0.2);
}

/* ── Trial paywall ──────────────────────────────────────────────────────────
   The lock stands in for a radial, so it takes the radial's exact geometry:
   52px circle, same footprint, same baseline. Inheriting the generic
   .score-locked box instead gave a 28px-wide chip stretched to 52px tall — a
   capsule that read as a rendering fault rather than a deliberate lock. Muted
   rather than amber, too: amber is the warning colour used for real findings,
   and a paywall is not a finding. */
.trial-lock-wrap {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.score-cell .trial-lock-wrap .score-locked.trial-locked,
.trial-lock-wrap .score-locked.trial-locked {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    /* Tinted and solid, not a faint dashed outline. This is a button asking
       for money — it has to look like something you press, and a ghost ring
       in a table full of coloured rings just reads as a cell that failed to
       load. Brand blue rather than the amber this table uses for findings. */
    background: rgba(37, 99, 235, .08);
    border: 1.5px solid rgba(37, 99, 235, .22);
    transition: background .15s ease, border-color .15s ease, transform .12s ease;
}
.trial-lock-wrap .score-locked.trial-locked i {
    font-size: 16px;
    color: #2563eb;
    transition: color .15s ease;
}
.trial-lock-wrap .score-locked.trial-locked:hover {
    background: #2563eb;
    border-color: #2563eb;
    transform: translateY(-1px);
}
.trial-lock-wrap .score-locked.trial-locked:hover i { color: #ffffff; }
.trial-lock-caption {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .01em;
    line-height: 1.25;
    text-align: center;
    color: var(--muted-foreground, #94a3b8);
    max-width: 84px;
}
/* The zero-count fallback. It is the call to action rather than a stat, so it
   carries the brand colour the count doesn't. */
.trial-lock-caption.is-cta { color: #2563eb; font-weight: 700; }
.trial-lock-wrap:hover .trial-lock-caption { color: #2563eb; }
/* The View column's lock, matched to the score columns so a gated row reads as
   one paywall instead of three differently-styled disabled controls. */
.view-btn.view-btn-trial {
    background: rgba(37, 99, 235, .08);
    border: 1.5px solid rgba(37, 99, 235, .22);
    transition: background .15s ease, border-color .15s ease, transform .12s ease;
}
.view-btn.view-btn-trial i { color: #2563eb; }
.view-btn.view-btn-trial:hover { background: #2563eb; border-color: #2563eb; transform: translateY(-1px); }
.view-btn.view-btn-trial:hover i { color: #ffffff; }

/* Paywall banner. Sits directly above the locked table so the explanation and
   the locks are read as one thing, and carries the only CTA on the page that
   is a purchase — the cell locks just open the modal. */
.trial-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin: 0 0 1rem;
    padding: 1rem 1.25rem;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: linear-gradient(135deg, #f8fafc 0%, #ffffff 60%);
}
.trial-banner-main { display: flex; align-items: flex-start; gap: .85rem; min-width: 0; flex: 1; }
.trial-banner-icon {
    flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: 10px;
    background: rgba(37, 99, 235, .08);
}
.trial-banner-icon i { font-size: 15px; color: #2563eb; }
.trial-banner-copy { min-width: 0; }
.trial-banner-title {
    font-size: .95rem; font-weight: 700; color: #0f172a;
    letter-spacing: -.01em; margin-bottom: .15rem;
}
.trial-banner-sub {
    font-size: .82rem; line-height: 1.45; color: #475569; margin: 0; max-width: 68ch;
}
.trial-banner-sub strong { color: #0f172a; font-weight: 700; }
.trial-banner-actions { display: flex; flex-direction: column; align-items: stretch; gap: .3rem; flex: none; }
.trial-banner-cta {
    display: inline-flex; align-items: center; justify-content: center;
    height: 2.4rem; padding: 0 1.15rem;
    border: none; border-radius: 8px;
    background: #0f172a; color: #ffffff;
    font-size: .875rem; font-weight: 600; white-space: nowrap;
    text-decoration: none; cursor: pointer; transition: background .15s ease;
}
.trial-banner-cta:hover { background: #1e293b; color: #ffffff; }
.trial-banner-cta:disabled { opacity: .7; cursor: default; }
/* Same role as .trial-unlock-alt in the modal: the cheaper plan stays one
   quiet line under the headline CTA rather than becoming a second button. */
.trial-banner-alt {
    background: none; border: none; cursor: pointer; padding: 0;
    font-size: .72rem; color: #475569; text-align: center;
    text-decoration: underline; text-underline-offset: 3px;
}
.trial-banner-alt:hover { color: #0f172a; }
.trial-banner-alt:disabled { opacity: .6; cursor: default; }
@media (max-width: 720px) {
    .trial-banner { flex-direction: column; align-items: stretch; }
    .trial-banner-actions { align-items: stretch; }
}
[data-kt-theme-mode="dark"] .trial-banner {
    border-color: #1e293b;
    background: linear-gradient(135deg, #0f172a 0%, #111a2e 60%);
}
[data-kt-theme-mode="dark"] .trial-banner-title { color: #f1f5f9; }
[data-kt-theme-mode="dark"] .trial-banner-sub { color: #cbd5e1; }
[data-kt-theme-mode="dark"] .trial-banner-sub strong { color: #f1f5f9; }
[data-kt-theme-mode="dark"] .trial-banner-cta { background: #2563eb; }
[data-kt-theme-mode="dark"] .trial-banner-cta:hover { background: #3b82f6; }
[data-kt-theme-mode="dark"] .trial-banner-alt { color: #cbd5e1; }
[data-kt-theme-mode="dark"] .trial-banner-alt:hover { color: #f1f5f9; }

.trial-unlock-content {
    position: relative;
    max-width: 420px !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    background: #ffffff;
    padding: 2rem 1.75rem 1.5rem;
    text-align: center;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .18) !important;
}
.trial-unlock-x {
    position: absolute; top: .875rem; right: .875rem;
    display: flex; align-items: center; justify-content: center;
    width: 1.75rem; height: 1.75rem; border-radius: 50%;
    background: transparent; color: #94a3b8; border: none; cursor: pointer;
    transition: all .2s ease;
}
.trial-unlock-x:hover { background: #e2e8f0; color: #475569; }
.trial-unlock-badge {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border-radius: 12px;
    background: rgba(245, 158, 11, .12); margin-bottom: .85rem;
}
.trial-unlock-badge i { font-size: 18px; color: #f59e0b; }
.trial-unlock-title {
    font-size: 1.35rem; font-weight: 650; color: #0f172a;
    letter-spacing: -.025em; margin: 0 0 .35rem;
}
.trial-unlock-sub {
    font-size: .875rem; color: #64748b; line-height: 1.55; margin: 0 auto 1.25rem; max-width: 32ch;
}
.trial-unlock-list {
    list-style: none; margin: 0 0 1.35rem; padding: 1rem 0 0;
    border-top: 1px solid #e2e8f0;
    display: flex; flex-direction: column; gap: .55rem; text-align: left;
}
.trial-unlock-list li {
    position: relative; padding-left: 1.4rem;
    font-size: .84rem; line-height: 1.4; color: #475569;
}
/* Drawn tick rather than the glyph, for the same reason the billing page
   stopped using "✓": it lands differently on every platform. */
.trial-unlock-list li::before {
    content: ""; position: absolute; left: .3rem; top: .3em;
    width: .27rem; height: .54rem;
    border: solid #16a34a; border-width: 0 1.5px 1.5px 0;
    transform: rotate(42deg);
}
.trial-unlock-cta {
    display: flex; align-items: center; justify-content: center;
    width: 100%; height: 2.75rem; border: none; border-radius: 8px;
    background: #0f172a; color: #ffffff;
    font-size: .9375rem; font-weight: 600; text-decoration: none;
    cursor: pointer; transition: background .15s ease;
}
.trial-unlock-cta:hover { background: #1e293b; color: #ffffff; }
.trial-unlock-cta:disabled { opacity: .7; cursor: default; }
.trial-unlock-foot {
    font-size: .72rem; color: #94a3b8; margin: .7rem 0 0; line-height: 1.45;
}
/* The cheaper plan, kept deliberately quiet. It is a real purchase button, not
   a dismissal, so it reads darker than "Not now" but never competes with the
   Advanced CTA above it. */
.trial-unlock-alt {
    display: block; width: 100%; padding: 0;
    background: none; border: none; cursor: pointer;
    font-size: .8125rem; font-weight: 500; color: #475569;
    margin-top: .7rem;
    text-decoration: underline; text-underline-offset: 3px;
}
.trial-unlock-alt:hover { color: #0f172a; }
.trial-unlock-alt:disabled { opacity: .6; cursor: default; }
/* Sits further down than the Grow switch above it: that one is still a way to
   buy, this one is the way out, and at equal spacing the two read as a pair. */
.trial-unlock-later {
    background: none; border: none; cursor: pointer;
    font-size: .78rem; color: #94a3b8; margin-top: 1.35rem;
    text-decoration: underline; text-underline-offset: 3px;
}

/* View Button - Apple Style */
.view-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: linear-gradient(135deg, #0a84ff 0%, #007aff 100%);
    border: none;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 8px rgba(10, 132, 255, 0.3);
}

.view-btn i {
    font-size: 13px;
    color: white;
}

.view-btn:hover {
    transform: scale(1.08) translateY(-1px);
    box-shadow: 0 4px 16px rgba(10, 132, 255, 0.4);
}

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

/* Locked View Button */
.view-btn-locked {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);
}

.view-btn-locked:hover {
    box-shadow: 0 4px 16px rgba(245, 158, 11, 0.4);
}

/* Action Buttons */
.action-btns {
    display: flex;
    align-items: center;
    gap: 4px;
}

.action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: transparent;
    border: 1px solid var(--border);
    cursor: pointer;
    transition: all 0.15s ease;
}

.action-btn i {
    font-size: 12px;
    color: var(--muted-foreground);
}

.action-btn:hover {
    background: var(--muted);
    border-color: var(--muted-foreground);
}

.action-btn:hover i {
    color: var(--foreground);
}

.action-btn-danger:hover {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.3);
}

.action-btn-danger:hover i {
    color: #ef4444;
}

.score-cell {
    text-align: center;
}

/* ========================================
   SUBMISSION STATUS BADGES - Scoped Styles
   ======================================== */

/* Uploaded & Ready Status Badge */
.cq-badge-uploaded {
    background: linear-gradient(135deg, #dbeafe 0%, #e0e7ff 100%) !important;
    color: #3b82f6 !important;
    border: 1px solid rgba(59, 130, 246, 0.25) !important;
    font-weight: 600 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    padding: 4px 10px !important;
    border-radius: 6px !important;
    font-size: 11px !important;
    letter-spacing: 0.01em !important;
}

.dark .cq-badge-uploaded {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15) 0%, rgba(99, 102, 241, 0.15) 100%) !important;
    color: #93c5fd !important;
    border-color: rgba(59, 130, 246, 0.3) !important;
}

.cq-status-icon {
    flex-shrink: 0;
}

/* ========================================
   SECURITY BADGE & TOOLTIP - Scoped Styles
   ======================================== */

.cq-security-badge-wrapper {
    position: relative;
    display: inline-flex;
}

.cq-security-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: linear-gradient(135deg, #dcfce7 0%, #d1fae5 100%);
    border: 1px solid rgba(34, 197, 94, 0.3);
    border-radius: 8px;
    cursor: help;
    transition: all 0.2s ease;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.dark .cq-security-badge {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.12) 0%, rgba(16, 185, 129, 0.12) 100%);
    border-color: rgba(34, 197, 94, 0.25);
}

.cq-security-badge:hover {
    box-shadow: 0 2px 8px rgba(34, 197, 94, 0.15);
    border-color: rgba(34, 197, 94, 0.5);
}

.dark .cq-security-badge:hover {
    box-shadow: 0 2px 8px rgba(34, 197, 94, 0.2);
}

.cq-security-icon {
    color: #16a34a;
    flex-shrink: 0;
}

.dark .cq-security-icon {
    color: #4ade80;
}

.cq-security-text {
    font-size: 11px;
    font-weight: 600;
    color: #166534;
    white-space: nowrap;
    letter-spacing: 0.02em;
}

.dark .cq-security-text {
    color: #86efac;
}

/* Tooltip */
.cq-security-tooltip {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    min-width: 280px;
    padding: 14px 16px;
    background: #18181b;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.05);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 9999;
    pointer-events: none;
}

.dark .cq-security-tooltip {
    background: #27272a;
    border-color: rgba(255, 255, 255, 0.08);
}

.cq-security-badge-wrapper:hover .cq-security-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.cq-tooltip-content {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.cq-tooltip-icon {
    color: #4ade80;
    flex-shrink: 0;
    margin-top: 2px;
}

.cq-tooltip-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cq-tooltip-title {
    font-size: 13px;
    font-weight: 600;
    color: #ffffff;
    display: flex;
    align-items: center;
    gap: 6px;
}

.cq-tooltip-title::before {
    content: "🔒";
    font-size: 12px;
}

.cq-tooltip-desc {
    font-size: 12px;
    color: #a1a1aa;
    line-height: 1.5;
}

.cq-tooltip-arrow {
    position: absolute;
    bottom: 100%;
    right: 20px;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid #18181b;
}

.dark .cq-tooltip-arrow {
    border-bottom-color: #27272a;
}

/* ======================================== */

/* Main Card Container */
.unified-card {
    background: var(--background);
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.dark .unified-card {
    background: rgba(255, 255, 255, 0.02);
    border-color: rgba(255, 255, 255, 0.08);
}

.unified-card:hover {
    border-color: rgba(0, 0, 0, 0.12);
}

.dark .unified-card:hover {
    border-color: rgba(255, 255, 255, 0.12);
}

/* Card Inner Padding */
.unified-card-inner {
    padding: 20px;
}

/* Header Section (Icon + Title + Subtitle) */
.unified-header-section {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 20px;
}

.unified-icon-container {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: white;
    flex-shrink: 0;
}

.unified-header-text {
    flex: 1;
    min-width: 0;
}

.unified-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--foreground);
    margin: 0 0 4px 0;
    line-height: 1.3;
    letter-spacing: -0.01em;
}

.unified-subtitle {
    font-size: 13px;
    color: var(--muted-foreground);
    margin: 0;
    line-height: 1.4;
}

/* Section Headers (smaller than main header) */
.unified-section {
    margin-top: 16px;
    position: relative;
    z-index: 10;
}

.unified-section-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

.unified-section-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.04);
    color: var(--foreground);
    flex-shrink: 0;
}

.dark .unified-section-icon {
    background: rgba(255, 255, 255, 0.06);
}

.unified-section-text {
    flex: 1;
    min-width: 0;
}

.unified-section-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--foreground);
    margin: 0 0 2px 0;
    line-height: 1.3;
    letter-spacing: -0.005em;
}

.unified-section-subtitle {
    font-size: 12px;
    color: var(--muted-foreground);
    margin: 0;
    line-height: 1.3;
}

/* Divider */
.unified-divider {
    height: 1px;
    background: var(--border);
    margin: 20px 0;
}

/* Bulk Actions Section - Ensure proper z-index */
.bulk-actions-section {
    position: relative;
    z-index: 10;
}

/* Action Buttons Grid */
.unified-actions-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: relative;
    z-index: 10;
}

.unified-action-btn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    font-size: 13px;
    font-weight: 500;
    color: var(--foreground);
    background: var(--background);
    border: 1px solid var(--border);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: left;
}

.unified-action-btn:hover {
    border-color: var(--foreground);
    background: rgba(0, 0, 0, 0.02);
}

.dark .unified-action-btn:hover {
    background: rgba(255, 255, 255, 0.03);
}

.unified-action-btn svg {
    flex-shrink: 0;
    opacity: 0.7;
}

.unified-action-btn:hover svg {
    opacity: 1;
}

/* FAQ List */
.unified-faq-list {
    display: flex;
    flex-direction: column;
    gap: 1px;
    background: rgba(0, 0, 0, 0.04);
    border-radius: 8px;
    overflow: hidden;
}

.dark .unified-faq-list {
    background: rgba(255, 255, 255, 0.06);
}

.unified-faq-item {
    background: var(--background);
}

.dark .unified-faq-item {
    background: rgba(255, 255, 255, 0.02);
}

.unified-faq-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 16px;
    font-size: 13px;
    font-weight: 500;
    color: var(--foreground);
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    transition: all 0.2s ease;
}

.unified-faq-trigger:hover {
    background: rgba(0, 0, 0, 0.02);
}

.dark .unified-faq-trigger:hover {
    background: rgba(255, 255, 255, 0.03);
}

.unified-faq-arrow {
    flex-shrink: 0;
    opacity: 0.5;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.unified-faq-trigger:hover .unified-faq-arrow {
    opacity: 0.8;
}

.unified-faq-item.active .unified-faq-arrow {
    transform: rotate(180deg);
    opacity: 1;
}

.unified-faq-answer {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.unified-faq-answer:not(.hidden) {
    max-height: 500px;
    opacity: 1;
    padding: 0 16px 16px;
}

.unified-faq-answer p {
    font-size: 12px;
    line-height: 1.6;
    color: var(--muted-foreground);
    margin: 0;
}

/* Progress Bar */
.unified-progress-container {
    margin-bottom: 16px;
}

.unified-progress-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    font-weight: 500;
    color: var(--foreground);
    margin-bottom: 8px;
}

.unified-progress-bar {
    width: 100%;
    height: 6px;
    background: rgba(0, 0, 0, 0.06);
    border-radius: 8px;
    overflow: hidden;
}

.dark .unified-progress-bar {
    background: rgba(255, 255, 255, 0.08);
}

.unified-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #3b82f6, #2563eb);
    border-radius: 8px;
    transition: width 0.5s ease;
}

/* Worker Telemetry Ticker (CPU / Memory) */
.worker-ticker {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 16px;
}

.worker-ticker-card {
    position: relative;
    overflow: hidden;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--background);
    transition: border-color 0.2s ease, background 0.2s ease;
}

.dark .worker-ticker-card {
    background: rgba(255, 255, 255, 0.02);
    border-color: rgba(255, 255, 255, 0.08);
}

.worker-ticker-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 10px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.worker-ticker[data-state="live"] .worker-ticker-cpu::before {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.08), transparent 60%);
    opacity: 1;
}

.worker-ticker[data-state="live"] .worker-ticker-mem::before {
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.08), transparent 60%);
    opacity: 1;
}

.worker-ticker-head {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted-foreground);
}

.worker-ticker-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #2563eb;
}

.worker-ticker-mem .worker-ticker-icon {
    color: #0891b2;
}

.worker-ticker-label {
    flex: 1;
}

.worker-ticker-pulse {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #d1d5db;
    transition: background 0.2s ease, box-shadow 0.2s ease;
}

.worker-ticker[data-state="live"] .worker-ticker-cpu .worker-ticker-pulse {
    background: #3b82f6;
    box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.6);
    animation: workerTickerPulse 1.6s ease-out infinite;
}

.worker-ticker[data-state="live"] .worker-ticker-mem .worker-ticker-pulse {
    background: #06b6d4;
    box-shadow: 0 0 0 0 rgba(6, 182, 212, 0.6);
    animation: workerTickerPulse 1.6s ease-out infinite;
}

@keyframes workerTickerPulse {
    0%   { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.55); }
    70%  { box-shadow: 0 0 0 6px rgba(59, 130, 246, 0); }
    100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); }
}

.worker-ticker-value {
    display: flex;
    align-items: baseline;
    gap: 4px;
    margin-bottom: 8px;
    font-variant-numeric: tabular-nums;
}

.worker-ticker-number {
    font-size: 22px;
    font-weight: 700;
    color: var(--foreground);
    letter-spacing: -0.02em;
    transition: color 0.2s ease;
}

.worker-ticker-unit {
    font-size: 11px;
    font-weight: 600;
    color: var(--muted-foreground);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.worker-ticker[data-state="idle"] .worker-ticker-number {
    color: var(--muted-foreground);
    opacity: 0.55;
}

.worker-ticker-bar {
    position: relative;
    height: 4px;
    background: rgba(0, 0, 0, 0.06);
    border-radius: 999px;
    overflow: hidden;
}

.dark .worker-ticker-bar {
    background: rgba(255, 255, 255, 0.06);
}

.worker-ticker-bar-fill {
    height: 100%;
    width: 0%;
    border-radius: 999px;
    transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1), background 0.3s ease;
}

.worker-ticker-bar-cpu {
    background: linear-gradient(90deg, #60a5fa, #2563eb);
}

.worker-ticker-bar-mem {
    background: linear-gradient(90deg, #22d3ee, #0891b2);
}

.worker-ticker-card.is-hot .worker-ticker-bar-fill {
    background: linear-gradient(90deg, #f59e0b, #ef4444);
}

.worker-ticker-card.is-hot .worker-ticker-number {
    color: #ef4444;
}

/* Status Logs - AWS-style Console */
.unified-logs-container {
    margin-bottom: 16px;
    background: var(--background);
    border-radius: 8px;
    border: 1px solid var(--border);
}

.dark .unified-logs-container {
    background: rgba(0, 0, 0, 0.2);
    border-color: rgba(255, 255, 255, 0.08);
}

/* Simple Header */
.unified-logs-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    border-bottom: 1px solid var(--border);
}

.dark .unified-logs-header {
    border-color: rgba(255, 255, 255, 0.08);
}

.unified-logs-title {
    font-size: 11px;
    font-weight: 600;
    color: var(--foreground);
    opacity: 0.7;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.unified-clear-btn {
    font-size: 10px;
    font-weight: 500;
    color: #6b7280;
    background: transparent;
    border: 1px solid var(--border);
    cursor: pointer;
    padding: 3px 8px;
    border-radius: 4px;
    transition: all 0.15s ease;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.unified-logs-actions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.unified-sound-btn {
    font-size: 12px;
    line-height: 1;
    background: transparent;
    border: 1px solid var(--border);
    cursor: pointer;
    padding: 3px 6px;
    border-radius: 4px;
    transition: all 0.15s ease;
}

.unified-sound-btn:hover {
    background: rgba(0, 0, 0, 0.05);
    border-color: var(--foreground);
}

.dark .unified-sound-btn:hover {
    background: rgba(255, 255, 255, 0.08);
}

.unified-clear-btn:hover {
    color: var(--foreground);
    background: rgba(0, 0, 0, 0.05);
    border-color: var(--foreground);
}

.dark .unified-clear-btn:hover {
    background: rgba(255, 255, 255, 0.08);
}

/* Console Content Area */
.unified-logs-content {
    background: #0d1117;
    padding: 10px 12px;
    max-height: 130px;
    overflow-y: auto;
    font-family: 'SF Mono', 'Consolas', 'Monaco', 'Menlo', monospace;
    border-radius: 0 0 7px 7px;
    /* Log lines are appended several times a second during a check. Without
       containment each append invalidates layout for the whole page; `contain`
       scopes the work to this box. `overscroll-behavior` stops the pinned
       auto-scroll from chaining into a page scroll. */
    contain: content;
    overscroll-behavior: contain;
}

.dark .unified-logs-content {
    background: #0a0c10;
}

/* Custom Scrollbar */
.unified-logs-content::-webkit-scrollbar {
    width: 6px;
}

.unified-logs-content::-webkit-scrollbar-track {
    background: transparent;
}

.unified-logs-content::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 3px;
}

.unified-logs-content::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.25);
}

/* Log Entry Styles */
.unified-log-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 11px;
    line-height: 1.5;
    padding: 3px 0;
    font-family: 'SF Mono', 'Consolas', 'Monaco', 'Menlo', monospace;
}

.unified-log-item:last-child {
    margin-bottom: 0;
}

/* Status indicator dot */
.unified-log-item .log-status {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 5px;
    background: #58a6ff;
}

/* Timestamp styling */
.unified-log-item .log-timestamp {
    color: #6e7681;
    font-size: 10px;
    flex-shrink: 0;
    min-width: 58px;
    font-weight: 400;
}

/* Message text */
.unified-log-item .log-message {
    color: #c9d1d9;
    word-break: break-word;
    flex: 1;
}

/* Legacy support - direct span children */
.unified-log-item > span:first-child {
    color: #58a6ff;
    flex-shrink: 0;
}

.unified-log-item > span:last-child {
    color: #c9d1d9;
}

/* Log type colors */
.unified-log-item.log-success .log-status { background: #3fb950; }
.unified-log-item.log-success .log-message,
.unified-log-item.log-success > span:last-child { color: #3fb950; }

.unified-log-item.log-error .log-status { background: #f85149; }
.unified-log-item.log-error .log-message,
.unified-log-item.log-error > span:last-child { color: #f85149; }

.unified-log-item.log-warning .log-status { background: #d29922; }
.unified-log-item.log-warning .log-message,
.unified-log-item.log-warning > span:last-child { color: #d29922; }

.unified-log-item.log-info .log-status { background: #58a6ff; }
.unified-log-item.log-info .log-message,
.unified-log-item.log-info > span:last-child { color: #c9d1d9; }

/* Repeat counter — shown when the same status message arrives multiple
   times in a row (server polling). Keeps the log readable instead of
   stacking ten copies of the same line. */
.unified-log-item .log-repeat {
    margin-left: auto;
    align-self: center;
    font-size: 9.5px;
    font-weight: 600;
    color: #8b949e;
    background: rgba(139, 148, 158, 0.14);
    border: 1px solid rgba(139, 148, 158, 0.22);
    padding: 1px 6px;
    border-radius: 9999px;
    letter-spacing: 0.02em;
    font-variant-numeric: tabular-nums;
}
.unified-log-item.log-success .log-repeat { color: #6ee7b7; background: rgba(63, 185, 80, 0.12); border-color: rgba(63, 185, 80, 0.28); }
.unified-log-item.log-error   .log-repeat { color: #fca5a5; background: rgba(248, 81, 73, 0.12); border-color: rgba(248, 81, 73, 0.28); }
.unified-log-item.log-warning .log-repeat { color: #fcd34d; background: rgba(210, 153, 34, 0.14); border-color: rgba(210, 153, 34, 0.30); }

/* Control Buttons */
.unified-control-buttons {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.unified-control-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 500;
    color: var(--foreground);
    background: var(--background);
    border: 1px solid var(--border);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.unified-control-btn:hover {
    border-color: var(--foreground);
    background: rgba(0, 0, 0, 0.02);
}

.dark .unified-control-btn:hover {
    background: rgba(255, 255, 255, 0.03);
}

.unified-control-btn svg {
    flex-shrink: 0;
    opacity: 0.7;
}

.unified-control-btn:hover svg {
    opacity: 1;
}

.unified-control-btn-danger {
    color: #ef4444;
    border-color: rgba(239, 68, 68, 0.3);
}

.unified-control-btn-danger:hover {
    background: rgba(239, 68, 68, 0.08);
    border-color: #ef4444;
}

.unified-control-btn-danger-intense {
    color: white;
    background: linear-gradient(to bottom, #dc2626, #b91c1c);
    border-color: #dc2626;
    font-weight: 600;
    box-shadow: 0 2px 6px rgba(220, 38, 38, 0.3);
}

.unified-control-btn-danger-intense:hover {
    background: linear-gradient(to bottom, #b91c1c, #991b1b);
    border-color: #991b1b;
    box-shadow: 0 3px 8px rgba(220, 38, 38, 0.4);
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .unified-card-inner {
        padding: 16px;
    }
    
    .unified-header-section {
        gap: 12px;
    }
    
    .unified-icon-container {
        width: 36px;
        height: 36px;
    }
    
    .unified-title {
        /* font-size is now handled globally in app.blade.php */
    }
    
    .unified-subtitle {
        font-size: 12px;
    }
}

/* ========================================
   UNIFIED TABLE DESIGN
   Clean table card styling
   ======================================== */

/* Table Header */
.unified-table-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px;
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
}

.unified-table-title-section {
    display: flex;
    align-items: center;
    gap: 12px;
}

.unified-table-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.04);
    color: var(--foreground);
    flex-shrink: 0;
}

.dark .unified-table-icon {
    background: rgba(255, 255, 255, 0.06);
}

.unified-table-title-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.unified-table-title {
    /* font-family, font-size, and font-weight are now handled globally in app.blade.php */
    color: var(--foreground);
    margin: 0;
    line-height: 1.3;
    letter-spacing: -0.01em;
}

.unified-table-count {
    font-size: 12px;
    color: var(--muted-foreground);
    margin: 0;
}

.unified-table-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* Search Box */
.unified-search-box {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--background);
    border: 1px solid var(--border);
    border-radius: 8px;
    transition: all 0.2s ease;
    min-width: 200px;
}

.unified-search-box:focus-within {
    border-color: var(--foreground);
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.05);
}

.dark .unified-search-box:focus-within {
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.05);
}

.unified-search-box svg {
    flex-shrink: 0;
    opacity: 0.5;
    color: var(--foreground);
}

.unified-search-box input {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 13px;
    color: var(--foreground);
    outline: none;
    padding: 0;
}

.unified-search-box input::placeholder {
    color: var(--muted-foreground);
}

/* Danger Button - Apple Style */
.unified-danger-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 7px 14px;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: -0.01em;
    color: #fff;
    background: linear-gradient(180deg, #ff6b6b 0%, #ee5a5a 100%);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-shadow: 
        0 1px 2px rgba(239, 68, 68, 0.15),
        0 2px 8px rgba(239, 68, 68, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.unified-danger-btn:hover {
    background: linear-gradient(180deg, #ff5252 0%, #e53935 100%);
    transform: translateY(-1px);
    box-shadow: 
        0 2px 4px rgba(239, 68, 68, 0.2),
        0 4px 12px rgba(239, 68, 68, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.unified-danger-btn:active {
    transform: translateY(0);
    background: linear-gradient(180deg, #e53935 0%, #d32f2f 100%);
    box-shadow: 
        0 1px 2px rgba(239, 68, 68, 0.15),
        inset 0 1px 2px rgba(0, 0, 0, 0.1);
}

.unified-danger-btn svg {
    flex-shrink: 0;
    opacity: 0.95;
}

/* Table Content */
.unified-table-content {
    /* Table inherits styles from kt-table */
}

/* Empty State - Apple Inspired */
.unified-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 64px 32px 56px;
    text-align: center;
    background: linear-gradient(180deg, rgba(249, 250, 251, 0.5) 0%, rgba(243, 244, 246, 0.3) 100%);
    border-radius: 0 0 16px 16px;
    position: relative;
    overflow: hidden;
}

.dark .unified-empty-state {
    background: linear-gradient(180deg, rgba(30, 32, 38, 0.5) 0%, rgba(24, 26, 31, 0.3) 100%);
}

/* Subtle grid pattern background */
.unified-empty-state::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: 
        linear-gradient(rgba(0, 0, 0, 0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 0, 0, 0.02) 1px, transparent 1px);
    background-size: 32px 32px;
    pointer-events: none;
}

.dark .unified-empty-state::before {
    background-image: 
        linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
}

.unified-empty-icon {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 24px;
    background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
    box-shadow: 
        0 1px 3px rgba(0, 0, 0, 0.04),
        0 8px 24px rgba(0, 0, 0, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
    color: #6366f1;
    margin-bottom: 24px;
    position: relative;
    z-index: 1;
}

.dark .unified-empty-icon {
    background: linear-gradient(145deg, rgba(55, 65, 81, 0.8) 0%, rgba(31, 41, 55, 0.9) 100%);
    box-shadow: 
        0 1px 3px rgba(0, 0, 0, 0.2),
        0 8px 24px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    color: #a5b4fc;
}

.unified-empty-title {
    font-size: 20px;
    font-weight: 600;
    color: #111827;
    margin: 0 0 8px 0;
    letter-spacing: -0.02em;
    position: relative;
    z-index: 1;
}

.dark .unified-empty-title {
    color: #f9fafb;
}

.unified-empty-subtitle {
    font-size: 15px;
    color: #6b7280;
    margin: 0 0 32px 0;
    max-width: 420px;
    line-height: 1.6;
    position: relative;
    z-index: 1;
}

.dark .unified-empty-subtitle {
    color: #9ca3af;
}

/* Feature cards */
.unified-empty-features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    max-width: 640px;
    width: 100%;
    margin-bottom: 32px;
    position: relative;
    z-index: 1;
}

@media (max-width: 640px) {
    .unified-empty-features {
        grid-template-columns: 1fr;
        max-width: 320px;
    }
}

.unified-feature-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 20px 16px;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(0, 0, 0, 0.04);
    border-radius: 16px;
    transition: all 0.2s ease;
    backdrop-filter: blur(8px);
}

.dark .unified-feature-card {
    background: rgba(55, 65, 81, 0.3);
    border-color: rgba(255, 255, 255, 0.05);
}

.unified-feature-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
}

.dark .unified-feature-card:hover {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.unified-feature-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    font-size: 18px;
}

.unified-feature-icon.secure {
    background: linear-gradient(135deg, #dcfce7 0%, #d1fae5 100%);
    color: #16a34a;
}

.dark .unified-feature-icon.secure {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.2) 0%, rgba(22, 163, 74, 0.15) 100%);
    color: #4ade80;
}

.unified-feature-icon.capacity {
    background: linear-gradient(135deg, #dbeafe 0%, #e0e7ff 100%);
    color: #2563eb;
}

.dark .unified-feature-icon.capacity {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.2) 0%, rgba(67, 56, 202, 0.15) 100%);
    color: #60a5fa;
}

.unified-feature-icon.speed {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    color: #d97706;
}

.dark .unified-feature-icon.speed {
    background: linear-gradient(135deg, rgba(217, 119, 6, 0.2) 0%, rgba(245, 158, 11, 0.15) 100%);
    color: #fbbf24;
}

.unified-feature-text {
    font-size: 12px;
    font-weight: 500;
    color: #374151;
    text-align: center;
    line-height: 1.5;
}

.dark .unified-feature-text {
    color: #e5e7eb;
}

.unified-feature-text span {
    display: block;
    font-size: 11px;
    font-weight: 400;
    color: #6b7280;
    margin-top: 2px;
}

.dark .unified-feature-text span {
    color: #9ca3af;
}

/* Pro tip section */
.unified-empty-tip {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.08) 0%, rgba(139, 92, 246, 0.06) 100%);
    border: 1px solid rgba(99, 102, 241, 0.15);
    border-radius: 12px;
    max-width: 480px;
    position: relative;
    z-index: 1;
}

.dark .unified-empty-tip {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.15) 0%, rgba(139, 92, 246, 0.1) 100%);
    border-color: rgba(99, 102, 241, 0.25);
}

.unified-tip-icon {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    color: white;
    font-size: 12px;
    flex-shrink: 0;
}

.unified-tip-text {
    font-size: 12px;
    color: #4b5563;
    line-height: 1.5;
    text-align: left;
}

.dark .unified-tip-text {
    color: #d1d5db;
}

.unified-tip-text strong {
    color: #6366f1;
    font-weight: 600;
}

.dark .unified-tip-text strong {
    color: #a5b4fc;
}

/* Table Footer */
.unified-table-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 20px;
    border-top: 1px solid var(--border);
    flex-wrap: wrap;
}

.unified-footer-info {
    font-size: 12px;
    color: var(--muted-foreground);
}

.unified-footer-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

.unified-footer-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    font-size: 12px;
    font-weight: 500;
    color: var(--foreground);
    background: var(--background);
    border: 1px solid var(--border);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.unified-footer-btn:hover:not(:disabled) {
    border-color: var(--foreground);
    background: rgba(0, 0, 0, 0.02);
}

.dark .unified-footer-btn:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.03);
}

.unified-footer-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.unified-footer-btn svg {
    flex-shrink: 0;
}

/* Page Numbers - Apple Style */
.unified-page-numbers {
    display: flex;
    align-items: center;
    gap: 4px;
}

.unified-page-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    font-size: 13px;
    font-weight: 500;
    color: var(--foreground);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.unified-page-btn:hover {
    background: rgba(0, 0, 0, 0.04);
}

.dark .unified-page-btn:hover {
    background: rgba(255, 255, 255, 0.06);
}

.unified-page-btn.active {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
    box-shadow: 0 1px 3px rgba(99, 102, 241, 0.25);
}

.unified-page-btn.active:hover {
    background: var(--primary);
}

.unified-page-ellipsis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    font-size: 12px;
    color: var(--muted-foreground);
    letter-spacing: 1px;
}

/* Responsive Table Adjustments */
@media (max-width: 768px) {
    .unified-table-header {
        padding: 16px;
    }
    
    .unified-table-title-section {
        gap: 10px;
    }
    
    .unified-table-icon {
        width: 32px;
        height: 32px;
    }
    
    .unified-table-title {
        font-size: 15px;
    }
    
    .unified-search-box {
        min-width: 160px;
    }
    
    .unified-table-footer {
        padding: 14px 16px;
    }
}

/* ========================================
   Upload & Check Settings Enhanced Styles
   ======================================== */

/* Enhanced Filepond Wrapper */
.enhanced-filepond-wrapper {
    position: relative;
    transition: all 0.3s ease;
}

.enhanced-filepond-wrapper:hover {
    transform: translateY(-2px);
}

/* Card Hover Effects */
.kt-card.rounded-xl {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.kt-card.rounded-xl:hover {
    transform: translateY(-2px);
}

/* Button Hover Animation */
@keyframes pulse-glow {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.4);
    }
    50% {
        box-shadow: 0 0 0 8px rgba(99, 102, 241, 0);
    }
}

.kt-btn.bg-gradient-to-r:hover {
    animation: pulse-glow 2s infinite;
}

/* Icon Scale Animation */
@keyframes icon-bounce {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

.group:hover .group-hover\\/btn\\:scale-110 {
    animation: icon-bounce 0.5s ease;
}

/* Gradient Background Animation */
@keyframes gradient-shift {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

.bg-gradient-to-br,
.bg-gradient-to-r {
    background-size: 200% 200%;
    transition: all 0.3s ease;
}

/* Status Badge Pulse */
@keyframes status-pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

.animate-pulse {
    animation: status-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Shadow Glow Effect */
.shadow-lg {
    transition: box-shadow 0.3s ease;
}

.group:hover .shadow-lg {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* Card Border Shimmer */
@keyframes border-shimmer {
    0% {
        border-color: rgba(99, 102, 241, 0.2);
    }
    50% {
        border-color: rgba(147, 51, 234, 0.3);
    }
    100% {
        border-color: rgba(99, 102, 241, 0.2);
    }
}

.border-border {
    transition: border-color 0.3s ease;
}

/* Modern Upload Section - Apple/Stripe Inspired */
.upload-section-modern {
    margin-top: 1.5rem;
}

.upload-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--border), transparent);
    margin: 1.5rem 0;
}

.upload-options-stack {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.filepond-wrapper-quick {
    margin-top: 0;
    position: relative;
    z-index: 1;
}

.filepond-wrapper-quick .filepond--root {
    margin-bottom: 0;
    font-family: inherit;
    position: relative;
    z-index: 1;
}

.filepond-wrapper-quick .filepond--drop-label {
    min-height: 160px;
    background: var(--background);
    border: 1.5px dashed rgba(0, 0, 0, 0.12);
    border-radius: 12px;
    transition: all 0.2s ease;
    position: relative;
    z-index: 1;
}

.dark .filepond-wrapper-quick .filepond--drop-label {
    background: rgba(255, 255, 255, 0.02);
    border-color: rgba(255, 255, 255, 0.12);
}

.filepond-wrapper-quick .filepond--drop-label:hover {
    border-color: rgba(59, 130, 246, 0.4);
    background: rgba(59, 130, 246, 0.02);
}

.dark .filepond-wrapper-quick .filepond--drop-label:hover {
    background: rgba(59, 130, 246, 0.04);
    border-color: rgba(59, 130, 246, 0.5);
}

.filepond-wrapper-quick .filepond--panel-root {
    background: transparent;
    border-radius: 10px;
}

.filepond-wrapper-quick .filepond--drop-label label {
    cursor: pointer;
}

.filepond-wrapper-quick .filepond--drop-label,
.filepond-wrapper-quick .filepond--drop-label label {
    color: var(--foreground) !important;
}

.filepond-wrapper-quick .filepond--label-action {
    color: #3b82f6 !important;
    font-weight: 500 !important;
}

.filepond-wrapper-quick .filepond--label-action:hover {
    text-decoration: underline !important;
}

.filepond-wrapper-quick .filepond--file-info-main,
.filepond-wrapper-quick .filepond--file-info-sub {
    color: #111827 !important;
}

.dark .filepond-wrapper-quick .filepond--file-info-main,
.dark .filepond-wrapper-quick .filepond--file-info-sub {
    color: #f9fafb !important;
}

.filepond-wrapper-quick .filepond--item {
    border-radius: 8px !important;
}

.filepond-wrapper-quick .filepond--item-panel {
    background: rgba(16, 185, 129, 0.08) !important;
    border: 1px solid rgba(16, 185, 129, 0.2) !important;
}

.dark .filepond-wrapper-quick .filepond--item-panel {
    background: rgba(16, 185, 129, 0.12) !important;
    border-color: rgba(16, 185, 129, 0.3) !important;
}

.filepond-wrapper-quick .filepond--action-remove-item,
.filepond-wrapper-quick .filepond--action-process-item {
    border-radius: 8px !important;
}

.filepond-wrapper-quick .filepond--credits {
    display: none !important;
}

/* Upload Info Tip */
.upload-info-tip {
    margin-top: 1rem;
    padding: 0.75rem 0.875rem;
    background: transparent;
    border-radius: 8px;
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.upload-info-tip svg {
    margin-top: 2px;
    color: #9ca3af;
    flex-shrink: 0;
}

.upload-info-tip-text {
    font-size: 12px;
    line-height: 1.5;
    color: #9ca3af;
}

.upload-info-tip-text strong {
    color: var(--muted-foreground);
    font-weight: 500;
}

.upload-info-link {
    color: #3b82f6;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.15s ease;
}

.upload-info-link:hover {
    color: #2563eb;
    text-decoration: underline;
}

.upload-privacy-notice {
    margin-top: 0.875rem;
    padding: 0.625rem 0.75rem;
    background: rgba(34, 197, 94, 0.06);
    border: 1px solid rgba(34, 197, 94, 0.15);
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 11.5px;
    color: #6b7280;
    line-height: 1.4;
}

.upload-privacy-notice svg {
    color: #22c55e;
    flex-shrink: 0;
}


/* Modern FAQ Styling - Apple/Stripe Inspired */
.faq-modern-container {
    background: transparent;
}

.faq-modern-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--foreground);
    margin-bottom: 1.5rem;
    letter-spacing: -0.01em;
}

.faq-modern-grid {
    display: grid;
    gap: 0.5rem;
}

.faq-modern-item {
    background: var(--background);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.dark .faq-modern-item {
    border-color: rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.02);
}

.faq-modern-item:hover {
    border-color: rgba(0, 0, 0, 0.12);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.dark .faq-modern-item:hover {
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.faq-modern-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    transition: all 0.2s ease;
}

.faq-modern-trigger:hover {
    background: rgba(0, 0, 0, 0.02);
}

.dark .faq-modern-trigger:hover {
    background: rgba(255, 255, 255, 0.03);
}

.faq-modern-question {
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--foreground);
    letter-spacing: -0.005em;
}

.faq-modern-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--muted-foreground);
    transition: transform 0.2s ease;
}

.faq-icon-plus {
    display: block;
}

.faq-icon-minus {
    display: none;
}

.faq-modern-item.active .faq-icon-plus {
    display: none;
}

.faq-modern-item.active .faq-icon-minus {
    display: block;
}

.faq-modern-answer {
    padding: 0 1.25rem 1rem;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.faq-modern-answer:not(.hidden) {
    max-height: 500px;
    opacity: 1;
    padding: 0 1.25rem 1.25rem;
}

.faq-modern-answer p {
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--muted-foreground);
    margin: 0;
}

/* Old accordion style (keeping for compatibility) */
.accordion-style2 {
    border: none;
    background: transparent;
}

.accordion-style2 .accordion-item {
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    margin-bottom: 1rem;
    overflow: hidden;
    background: #ffffff;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    transition: all 0.3s ease;
}

.accordion-style2 .accordion-item:hover {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.accordion-style2 .accordion-header {
    border: none;
    background: transparent;
}

.accordion-style2 .accordion-header a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem;
    color: #374151;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    background: transparent;
    border: none;
    width: 100%;
    text-align: left;
}

.accordion-style2 .accordion-header a:hover {
    background: #f9fafb;
    color: #1f2937;
}

.accordion-style2 .accordion-header a.collapsed {
    color: #6b7280;
}

.accordion-style2 .accordion-header a.collapsed:hover {
    color: #374151;
}

.accordion-style2 .accordion-controls {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.accordion-style2 .accordion-controls .expand,
.accordion-style2 .accordion-controls .shrink {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #f3f4f6;
    color: #6b7280;
    transition: all 0.3s ease;
}

.accordion-style2 .accordion-header a:hover .accordion-controls .expand,
.accordion-style2 .accordion-header a:hover .accordion-controls .shrink {
    background: #e5e7eb;
    color: #374151;
}

.accordion-style2 .accordion-controls .shrink {
    display: none;
}

.accordion-style2 .accordion-header a[aria-expanded="true"] .expand {
    display: none;
}

.accordion-style2 .accordion-header a[aria-expanded="true"] .shrink {
    display: flex;
}

.accordion-style2 .accordion-collapse {
    border-top: 1px solid #e5e7eb;
}

.accordion-style2 .accordion-body {
    padding: 1.25rem;
    background: #f9fafb;
    color: #6b7280;
    line-height: 1.6;
}

.accordion-style2 .accordion-body p {
    margin-bottom: 1rem;
}

.accordion-style2 .accordion-body p:last-child {
    margin-bottom: 0;
}

.accordion-style2 .accordion-body ul {
    margin-bottom: 1rem;
    padding-left: 0;
}

.accordion-style2 .accordion-body li {
    margin-bottom: 0.5rem;
    padding-left: 0;
}

.accordion-style2 .accordion-body li:last-child {
    margin-bottom: 0;
}

/* Dark mode support for accordion */
.dark .accordion-style2 .accordion-item {
    background: #1f2937;
    border-color: #374151;
}

.dark .accordion-style2 .accordion-header a {
    color: #d1d5db;
}

.dark .accordion-style2 .accordion-header a:hover {
    background: #374151;
    color: #f9fafb;
}

.dark .accordion-style2 .accordion-header a.collapsed {
    color: #9ca3af;
}

.dark .accordion-style2 .accordion-header a.collapsed:hover {
    color: #d1d5db;
}

.dark .accordion-style2 .accordion-controls .expand,
.dark .accordion-style2 .accordion-controls .shrink {
    background: #374151;
    color: #9ca3af;
}

.dark .accordion-style2 .accordion-header a:hover .accordion-controls .expand,
.dark .accordion-style2 .accordion-header a:hover .accordion-controls .shrink {
    background: #4b5563;
    color: #d1d5db;
}

.dark .accordion-style2 .accordion-collapse {
    border-top-color: #374151;
}

.dark .accordion-style2 .accordion-body {
    background: #374151;
    color: #9ca3af;
}

/* Enhanced FilePond Styles - Override default sizing */
.enhanced-filepond-wrapper .filepond--credits {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
}

.enhanced-filepond-wrapper .filepond--drop-label label {
    cursor: pointer;
}

.enhanced-filepond-wrapper .filepond--item {
    background: rgba(79, 70, 229, 0.1) !important;
    border: 1px solid rgba(79, 70, 229, 0.2) !important;
    border-radius: 8px !important;
}

.dark .enhanced-filepond-wrapper .filepond--item {
    background: rgba(124, 58, 237, 0.15) !important;
    border-color: rgba(124, 58, 237, 0.3) !important;
}

/* Modern Info Button - Small, Clean Apple-style */
.info-btn-modern {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    border: none;
    color: white;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 1px 3px rgba(59, 130, 246, 0.3);
}

.info-btn-modern:hover {
    transform: translateY(-1px) scale(1.05);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
}

.info-btn-modern:active {
    transform: translateY(0) scale(0.98);
}

.info-btn-modern i {
    font-size: 14px;
}

/* Status Change Notification - Apple Style */
.status-notification {
    margin-bottom: 16px;
    animation: appleSlideIn 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes appleSlideIn {
    from {
        opacity: 0;
        transform: translateY(-12px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.status-notification-content {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    padding-right: 40px;
    border-radius: 12px;
    position: relative;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.status-notification.success .status-notification-content {
    background: rgba(52, 199, 89, 0.12);
    border: 1px solid rgba(52, 199, 89, 0.2);
}

.status-notification.error .status-notification-content {
    background: rgba(255, 59, 48, 0.12);
    border: 1px solid rgba(255, 59, 48, 0.2);
}

.status-notification.info .status-notification-content {
    background: rgba(10, 132, 255, 0.12);
    border: 1px solid rgba(10, 132, 255, 0.2);
}

.dark .status-notification.success .status-notification-content {
    background: rgba(48, 209, 88, 0.15);
    border-color: rgba(48, 209, 88, 0.25);
}

.dark .status-notification.error .status-notification-content {
    background: rgba(255, 69, 58, 0.15);
    border-color: rgba(255, 69, 58, 0.25);
}

.dark .status-notification.info .status-notification-content {
    background: rgba(10, 132, 255, 0.15);
    border-color: rgba(10, 132, 255, 0.25);
}

.status-notification-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
}

.status-notification.success .status-notification-icon {
    background: #34c759;
    color: #ffffff;
}

.status-notification.error .status-notification-icon {
    background: #ff3b30;
    color: #ffffff;
}

.status-notification.info .status-notification-icon {
    background: #0a84ff;
    color: #ffffff;
}

.status-notification-icon-symbol {
    font-size: 14px;
}

.status-notification-message {
    flex-grow: 1;
    min-width: 0;
}

.status-notification-title {
    font-size: 13px;
    font-weight: 600;
    margin: 0;
    line-height: 1.4;
    letter-spacing: -0.01em;
}

.status-notification.success .status-notification-title {
    color: #1d7a3c;
}

.status-notification.error .status-notification-title {
    color: #c9302c;
}

.status-notification.info .status-notification-title {
    color: #0066cc;
}

.dark .status-notification.success .status-notification-title {
    color: #30d158;
}

.dark .status-notification.error .status-notification-title {
    color: #ff453a;
}

.dark .status-notification.info .status-notification-title {
    color: #0a84ff;
}

.status-notification-text {
    font-size: 12px;
    margin: 2px 0 0 0;
    line-height: 1.4;
    opacity: 0.8;
}

.status-notification.success .status-notification-text {
    color: #1d7a3c;
}

.status-notification.error .status-notification-text {
    color: #c9302c;
}

.status-notification.info .status-notification-text {
    color: #0066cc;
}

.dark .status-notification.success .status-notification-text {
    color: rgba(48, 209, 88, 0.8);
}

.dark .status-notification.error .status-notification-text {
    color: rgba(255, 69, 58, 0.8);
}

.dark .status-notification.info .status-notification-text {
    color: rgba(10, 132, 255, 0.8);
}

.status-notification-close {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    opacity: 0.4;
}

.status-notification-close i {
    font-size: 10px;
}

.status-notification-close:hover {
    opacity: 0.8;
    background: rgba(0, 0, 0, 0.08);
}

.dark .status-notification-close:hover {
    background: rgba(255, 255, 255, 0.1);
}

.status-notification.success .status-notification-close {
    color: #1d7a3c;
}

.status-notification.error .status-notification-close {
    color: #c9302c;
}

.status-notification.info .status-notification-close {
    color: #0066cc;
}

.dark .status-notification.success .status-notification-close {
    color: #30d158;
}

.dark .status-notification.error .status-notification-close {
    color: #ff453a;
}

.dark .status-notification.info .status-notification-close {
    color: #0a84ff;
}

/* Consumption Estimate Modal Styles */
.consumption-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    animation: fadeIn 0.3s ease;
}

.consumption-modal-overlay.show {
    display: flex;
}

.consumption-modal {
    background: white;
    border-radius: 8px;
    max-width: 500px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    animation: slideUp 0.3s ease;
}

.dark .consumption-modal {
    background: #1f2937;
    border: 1px solid #374151;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.consumption-modal-header {
    padding: 1.5rem;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.dark .consumption-modal-header {
    border-bottom-color: #374151;
}

.consumption-modal-body {
    padding: 1.5rem;
}

.consumption-modal-footer {
    padding: 1.5rem;
    border-top: 1px solid #e5e7eb;
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
}

.dark .consumption-modal-footer {
    border-top-color: #374151;
}

.consumption-stat-card {
    background: rgba(59, 130, 246, 0.05);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 0.75rem;
    transition: all 0.3s ease;
}

.consumption-stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
}

.dark .consumption-stat-card {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(37, 99, 235, 0.15) 100%);
    border-color: rgba(59, 130, 246, 0.3);
}

.consumption-stat-label {
    font-size: 0.8125rem;
    font-weight: 500;
    color: #0369a1;
    margin-bottom: 0.25rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.dark .consumption-stat-label {
    color: #7dd3fc;
}

.consumption-stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: #0c4a6e;
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}

.dark .consumption-stat-value {
    color: #bae6fd;
}

.consumption-stat-unit {
    font-size: 0.875rem;
    font-weight: 500;
    color: #0369a1;
}

.dark .consumption-stat-unit {
    color: #7dd3fc;
}

.consumption-engine-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.875rem;
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    border: 1px solid #93c5fd;
    border-radius: 8px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #1e40af;
}

.dark .consumption-engine-badge {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2) 0%, rgba(37, 99, 235, 0.25) 100%);
    border-color: rgba(59, 130, 246, 0.4);
    color: #93c5fd;
}

/* ========================================
   Apple-Style Design Improvements
   ======================================== */

/* Clean card styling */
.apple-card {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 8px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

.dark .apple-card {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.08);
}

.apple-card:hover {
    border-color: rgba(0, 0, 0, 0.12);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.dark .apple-card:hover {
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

/* Clean submission item */
.submission-item-clean {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 12px;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.dark .submission-item-clean {
    background: rgba(255, 255, 255, 0.02);
    border-color: rgba(255, 255, 255, 0.08);
}

.submission-item-clean:hover {
    background: rgba(0, 0, 0, 0.02);
    border-color: rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.dark .submission-item-clean:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.12);
}

/* Clean typography */
.apple-title {
    font-size: 17px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.02em;
    color: #1d1d1f;
}

.dark .apple-title {
    color: #f5f5f7;
}

.apple-subtitle {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    color: #86868b;
}

.dark .apple-subtitle {
    color: #a1a1a6;
}

/* Clean button styling */
.apple-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    border-radius: 8px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    background: rgba(0, 0, 0, 0.02);
    color: #1d1d1f;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
}

.dark .apple-button {
    border-color: rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.04);
    color: #f5f5f7;
}

.apple-button:hover {
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.12);
    transform: translateY(-1px);
}

.dark .apple-button:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.16);
}

/* Clean badges */
.apple-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.04);
    color: #6e6e73;
}

.dark .apple-badge {
    background: rgba(255, 255, 255, 0.08);
    color: #a1a1a6;
}

/* Success badge */
.apple-badge-success {
    background: rgba(52, 199, 89, 0.1);
    color: #30d158;
}

.dark .apple-badge-success {
    background: rgba(48, 209, 88, 0.15);
    color: #32d74b;
}

/* Warning badge */
.apple-badge-warning {
    background: rgba(255, 204, 0, 0.1);
    color: #ff9f0a;
}

.dark .apple-badge-warning {
    background: rgba(255, 159, 10, 0.15);
    color: #ff9f0a;
}

/* Clean divider */
.apple-divider {
    height: 1px;
    background: rgba(0, 0, 0, 0.06);
    border: none;
    margin: 20px 0;
}

.dark .apple-divider {
    background: rgba(255, 255, 255, 0.08);
}

/* Clean section headers */
.apple-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.apple-section-title {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: #1d1d1f;
}

.dark .apple-section-title {
    color: #f5f5f7;
}

/* Score indicators */
.apple-score {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px;
    background: rgba(0, 0, 0, 0.02);
    border-radius: 8px;
}

.dark .apple-score {
    background: rgba(255, 255, 255, 0.04);
}

.apple-score-label {
    font-size: 13px;
    font-weight: 500;
    color: #6e6e73;
}

.dark .apple-score-label {
    color: #a1a1a6;
}

.apple-score-value {
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -0.02em;
}

/* Clean list styling */
.apple-list {
    display: flex;
    flex-direction: column;
    gap: 1px;
    background: rgba(0, 0, 0, 0.04);
    border-radius: 8px;
    overflow: hidden;
}

.dark .apple-list {
    background: rgba(255, 255, 255, 0.06);
}

.apple-list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    background: #ffffff;
    transition: background 0.2s ease;
}

.dark .apple-list-item {
    background: rgba(255, 255, 255, 0.02);
}

.apple-list-item:hover {
    background: rgba(0, 0, 0, 0.02);
}

.dark .apple-list-item:hover {
    background: rgba(255, 255, 255, 0.04);
}

/* ========================================
   ASSIGNMENT SUBMISSION - DARK MODE FIXES
   ======================================== */

/* Icon Blue */
.unified-icon-blue {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
}

.dark .unified-icon-blue {
    background: rgba(59, 130, 246, 0.2);
    color: #60a5fa;
}

/* Demo Account Warning */
.unified-demo-title {
    color: #d97706;
}

.dark .unified-demo-title {
    color: #fbbf24;
}

.unified-demo-subtitle {
    color: #f59e0b;
}

.dark .unified-demo-subtitle {
    color: #fcd34d;
}

/* Results Loading Spinner - Apple Blue */
.results-loading-spinner {
    border: 3px solid #dbeafe;
    border-top-color: #3b82f6;
}

.dark .results-loading-spinner {
    border: 3px solid #1e3a8a;
    border-top-color: #60a5fa;
}

/* ===== CREDITS MODAL - Apple/Stripe Style ===== */
.credits-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 2147483645;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    padding: 1rem;
    /* When the modal is taller than the viewport (mobile), the flex
       centering would clip its top unreachably — the page body is
       overflow:hidden while a modal is open, so the backdrop itself
       must scroll. margin:auto on the modal keeps it centered when it
       fits and top-aligned + scrollable when it doesn't. */
    overflow-y: auto;
}
.credits-modal-backdrop .credits-modal { margin: auto 0; }

.credits-modal {
    position: relative;
    width: 100%;
    max-width: 380px;
    background: #ffffff;
    border-radius: 20px;
    box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.18);
    animation: creditsModalIn 0.2s ease-out;
}

[data-kt-theme-mode="dark"] .credits-modal,
.dark .credits-modal {
    background: #1c1c1e;
    box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.5);
}

@keyframes creditsModalIn {
    from { opacity: 0; transform: scale(0.96) translateY(8px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

.credits-modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.06);
    border: none;
    border-radius: 50%;
    color: #86868b;
    cursor: pointer;
    transition: all 0.15s ease;
}

.credits-modal-close:hover {
    background: rgba(0, 0, 0, 0.1);
    color: #1d1d1f;
}

[data-kt-theme-mode="dark"] .credits-modal-close,
.dark .credits-modal-close {
    background: rgba(255, 255, 255, 0.1);
    color: #98989d;
}

[data-kt-theme-mode="dark"] .credits-modal-close:hover,
.dark .credits-modal-close:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #f5f5f7;
}

.credits-modal-content {
    padding: 32px 28px 24px;
    text-align: center;
}

.credits-modal-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    background: linear-gradient(180deg, #f5f5f7 0%, #e8e8ed 100%);
    border-radius: 16px;
    margin-bottom: 20px;
    color: #1d1d1f;
}

[data-kt-theme-mode="dark"] .credits-modal-icon,
.dark .credits-modal-icon {
    background: linear-gradient(180deg, #3a3a3c 0%, #2c2c2e 100%);
    color: #f5f5f7;
}

.credits-modal-title {
    font-size: 20px;
    font-weight: 600;
    color: #1d1d1f;
    margin: 0 0 8px;
    letter-spacing: -0.02em;
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', sans-serif;
}

[data-kt-theme-mode="dark"] .credits-modal-title,
.dark .credits-modal-title {
    color: #f5f5f7;
}

.credits-modal-desc {
    font-size: 14px;
    color: #86868b;
    margin: 0 0 24px;
    line-height: 1.5;
}

[data-kt-theme-mode="dark"] .credits-modal-desc,
.dark .credits-modal-desc {
    color: #98989d;
}

.credits-modal-balance {
    background: #f5f5f7;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 20px;
}

[data-kt-theme-mode="dark"] .credits-modal-balance,
.dark .credits-modal-balance {
    background: #2c2c2e;
}

.credits-balance-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.credits-balance-label {
    font-size: 14px;
    color: #86868b;
}

[data-kt-theme-mode="dark"] .credits-balance-label,
.dark .credits-balance-label {
    color: #98989d;
}

.credits-balance-value {
    font-size: 14px;
    font-weight: 600;
    color: #1d1d1f;
}

[data-kt-theme-mode="dark"] .credits-balance-value,
.dark .credits-balance-value {
    color: #f5f5f7;
}

.credits-balance-required {
    color: #ff3b30;
}

[data-kt-theme-mode="dark"] .credits-balance-required,
.dark .credits-balance-required {
    color: #ff453a;
}

.credits-modal-info {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.credits-info-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 13px;
    color: #86868b;
}

.credits-info-row svg {
    color: #34c759;
    flex-shrink: 0;
}

[data-kt-theme-mode="dark"] .credits-info-row,
.dark .credits-info-row {
    color: #98989d;
}

[data-kt-theme-mode="dark"] .credits-info-row svg,
.dark .credits-info-row svg {
    color: #30d158;
}

.credits-modal-actions {
    display: flex;
    gap: 12px;
    padding: 0 28px 28px;
}

.credits-btn {
    flex: 1;
    padding: 14px 20px;
    font-size: 15px;
    font-weight: 500;
    border-radius: 12px;
    border: none;
    cursor: pointer;
    transition: all 0.15s ease;
    text-decoration: none;
    text-align: center;
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', sans-serif;
}

.credits-btn-secondary {
    background: #f5f5f7;
    color: #1d1d1f;
}

.credits-btn-secondary:hover {
    background: #e8e8ed;
}

[data-kt-theme-mode="dark"] .credits-btn-secondary,
.dark .credits-btn-secondary {
    background: #3a3a3c;
    color: #f5f5f7;
}

[data-kt-theme-mode="dark"] .credits-btn-secondary:hover,
.dark .credits-btn-secondary:hover {
    background: #48484a;
}

.credits-btn-primary {
    background: #0071e3;
    color: #ffffff;
}

.credits-btn-primary:hover {
    background: #0077ed;
    color: #ffffff;
}

[data-kt-theme-mode="dark"] .credits-btn-primary,
.dark .credits-btn-primary {
    background: #0a84ff;
}

[data-kt-theme-mode="dark"] .credits-btn-primary:hover,
.dark .credits-btn-primary:hover {
    background: #409cff;
}

/* ===== OUT-OF-CHECKS UPGRADE — quiet, single-decision layout ===== */
.credits-modal--wide {
    max-width: 720px;
    width: calc(100% - 32px);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 18px;
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.24);
}
.credits-modal-content--upsell {
    padding: 36px;
    text-align: left;
}
.cu-head { margin: 0 48px 24px 0; }
.cu-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 12px;
    padding: 5px 9px;
    border: 1px solid #d9d9de;
    border-radius: 999px;
    background: #f7f7f8;
    color: #56565c;
    font-size: 11px;
    font-weight: 650;
    letter-spacing: 0.02em;
}
.cu-eyebrow-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #f04438;
}
.cu-title {
    margin: 0 0 7px;
    color: #202123;
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', sans-serif;
    font-size: 26px;
    font-weight: 650;
    letter-spacing: -0.035em;
    line-height: 1.15;
}
.cu-sub {
    max-width: 560px;
    margin: 0;
    color: #6b6c70;
    font-size: 14px;
    line-height: 1.55;
}

.cu-plans {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}
.cu-plan {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 22px 20px;
    border: 1px solid #dcdce0;
    border-radius: 14px;
    background: #fff;
}
.cu-plan--featured { border-color: #202123; border-width: 1.5px; }
.cu-plan-tag {
    position: absolute;
    top: -10px;
    right: 18px;
    padding: 4px 9px;
    border-radius: 999px;
    background: #202123;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.055em;
    text-transform: uppercase;
}
.cu-plan-line {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}
.cu-plan-name {
    color: #202123;
    font-size: 17px;
    font-weight: 650;
}
.cu-price {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
}
.cu-price-amt {
    color: #202123;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.04em;
    font-feature-settings: "tnum";
}
.cu-price-unit { color: #6b6c70; font-size: 12px; }
.cu-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 9px 18px;
    flex: 1;
    margin: 0;
    padding: 0;
    list-style: none;
}
.cu-list li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    color: #45464a;
    font-size: 12.5px;
    line-height: 1.4;
}
.cu-list li svg {
    width: 14px;
    height: 14px;
    margin-top: 2px;
    flex: 0 0 auto;
    color: #10a37f;
}
.cu-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: 100%;
    min-height: 44px;
    padding: 0 16px;
    border: 0;
    border-radius: 8px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 650;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.cu-btn:focus-visible,
.credits-modal-close:focus-visible,
.cu-foot a:focus-visible {
    outline: 3px solid rgba(16, 163, 127, 0.28);
    outline-offset: 2px;
}
.cu-btn:disabled { cursor: wait; opacity: 0.65; }
.cu-btn--primary { background: #202123; color: #fff; }
.cu-btn--primary:hover { background: #343541; color: #fff; transform: translateY(-1px); }
.cu-btn--ghost {
    border: 1px solid #d1d1d6;
    background: #fff;
    color: #202123;
}
.cu-btn--ghost:hover { border-color: #9b9ba1; background: #f7f7f8; color: #202123; }
.cu-foot {
    display: flex;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 17px;
    color: #77787d;
    font-size: 12px;
    text-align: center;
}
.cu-foot a { color: #4b4c50; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.cu-foot a:hover { color: #202123; }

[data-kt-theme-mode="dark"] .credits-modal--wide, .dark .credits-modal--wide { border-color: #424248; }
[data-kt-theme-mode="dark"] .cu-eyebrow, .dark .cu-eyebrow { border-color: #4b4b50; background: #2b2c2f; color: #b6b6bb; }
[data-kt-theme-mode="dark"] .cu-title, .dark .cu-title,
[data-kt-theme-mode="dark"] .cu-plan-name, .dark .cu-plan-name,
[data-kt-theme-mode="dark"] .cu-price-amt, .dark .cu-price-amt { color: #f4f4f5; }
[data-kt-theme-mode="dark"] .cu-sub, .dark .cu-sub,
[data-kt-theme-mode="dark"] .cu-price-unit, .dark .cu-price-unit,
[data-kt-theme-mode="dark"] .cu-foot, .dark .cu-foot { color: #a5a5aa; }
[data-kt-theme-mode="dark"] .cu-plan, .dark .cu-plan { border-color: #4b4b52; background: #212225; }
[data-kt-theme-mode="dark"] .cu-plan--featured, .dark .cu-plan--featured { border-color: #a5a5aa; }
[data-kt-theme-mode="dark"] .cu-plan-tag, .dark .cu-plan-tag { background: #f4f4f5; color: #202123; }
[data-kt-theme-mode="dark"] .cu-list li, .dark .cu-list li { color: #d5d5d8; }
[data-kt-theme-mode="dark"] .cu-btn--primary, .dark .cu-btn--primary { background: #f4f4f5; color: #202123; }
[data-kt-theme-mode="dark"] .cu-btn--primary:hover, .dark .cu-btn--primary:hover { background: #fff; color: #202123; }
[data-kt-theme-mode="dark"] .cu-btn--ghost, .dark .cu-btn--ghost { border-color: #56565d; background: #292a2d; color: #f4f4f5; }
[data-kt-theme-mode="dark"] .cu-btn--ghost:hover, .dark .cu-btn--ghost { background: #34353a; color: #fff; }
[data-kt-theme-mode="dark"] .cu-foot a, .dark .cu-foot a { color: #d5d5d8; }

@media (max-width: 680px) {
    .credits-modal-content--upsell { padding: 30px 20px 22px; }
    .cu-title { font-size: 23px; }
    .cu-plans { grid-template-columns: 1fr; }
    .cu-plan { padding: 20px; }
}
@media (max-width: 440px) {
    .credits-modal-backdrop { padding: 10px; }
    .credits-modal--wide { width: 100%; }
    .credits-modal-content--upsell { padding: 28px 16px 18px; }
    .cu-head { margin-right: 38px; }
    .cu-btn--ghost { width: 100%; }
}

/* ===== END CONVERSION UPSELL ===== */

/* ===== END CREDITS MODAL ===== */