/* ==========================================================================
   AllTracts App Styles

   Design System:
   - Spacing: 4px base (4, 8, 12, 16, 24, 32, 48, 64)
   - Colors: Automatic light/dark based on system preference
   - Typography: Roboto Mono, monospace
   - Borders: var(--border-color)
   - Radius: 6px standard, 8px cards
   - Transitions: 0.2s ease
   ========================================================================== */

/* ==========================================================================
   COLOR SCHEME - CSS Custom Properties
   Automatically switches based on system preference (prefers-color-scheme)
   ========================================================================== */

:root {
    /* Light mode (default) */
    --bg-primary: #f5f5f5;
    --bg-secondary: #fff;
    --bg-tertiary: #fafafa;
    --bg-hover: #f0f0f0;
    --bg-input: #fff;

    --text-primary: #111;
    --text-secondary: #374151;
    --text-muted: #6b7280;
    --text-placeholder: #9ca3af;

    --border-color: #e5e7eb;
    --border-hover: #d1d5db;
    --border-focus: #111;

    --nav-bg: #111;
    --nav-text: #fff;
    --nav-text-muted: #888;

    --card-bg: #fff;
    --card-border: #e5e7eb;
    --card-shadow: rgba(0, 0, 0, 0.08);

    --btn-primary-bg: #111;
    --btn-primary-text: #fff;
    --btn-primary-hover: #333;
    --btn-secondary-bg: #fff;
    --btn-secondary-text: #111;
    --btn-secondary-border: #e5e7eb;

    --modal-overlay: rgba(0, 0, 0, 0.5);
    --modal-bg: #fff;

    --toast-bg: #111;
    --toast-text: #fff;

    --success-bg: #f0fdf4;
    --success-text: #16a34a;
    --success-border: #bbf7d0;

    --danger-bg: #fef2f2;
    --danger-text: #dc2626;
    --danger-border: #fecaca;

    --spinner-track: #e5e7eb;
    --spinner-fill: #111;

    color-scheme: light dark;
}

/* Dark mode - triggered by system preference */
@media (prefers-color-scheme: dark) {
    :root {
        --bg-primary: #0d1117;
        --bg-secondary: #161b22;
        --bg-tertiary: #21262d;
        --bg-hover: #30363d;
        --bg-input: #21262d;

        --text-primary: #e6edf3;
        --text-secondary: #c9d1d9;
        --text-muted: #8b949e;
        --text-placeholder: #6e7681;

        --border-color: #30363d;
        --border-hover: #484f58;
        --border-focus: #58a6ff;

        --nav-bg: #161b22;
        --nav-text: #e6edf3;
        --nav-text-muted: #8b949e;

        --card-bg: #161b22;
        --card-border: #30363d;
        --card-shadow: rgba(0, 0, 0, 0.3);

        --btn-primary-bg: #238636;
        --btn-primary-text: #fff;
        --btn-primary-hover: #2ea043;
        --btn-secondary-bg: #21262d;
        --btn-secondary-text: #c9d1d9;
        --btn-secondary-border: #30363d;

        --modal-overlay: rgba(0, 0, 0, 0.7);
        --modal-bg: #161b22;

        --toast-bg: #21262d;
        --toast-text: #e6edf3;

        --success-bg: #0d1f0d;
        --success-text: #3fb950;
        --success-border: #238636;

        --danger-bg: #2d0a0a;
        --danger-text: #f85149;
        --danger-border: #da3633;

        --spinner-track: #30363d;
        --spinner-fill: #58a6ff;
    }
}

/* ==========================================================================
   RESET & BASE
   ========================================================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: 'Roboto Mono', monospace;
    font-weight: 400;
    font-size: 0.9rem;
    line-height: 1.5;
    background: var(--bg-primary);
    color: var(--text-primary);
    min-height: 100vh;
}

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

button {
    font-family: inherit;
    cursor: pointer;
}

input, select, textarea {
    font-family: inherit;
}

/* ==========================================================================
   NAVIGATION
   ========================================================================== */

.nav {
    background: var(--nav-bg);
    padding: 0 32px;
    height: 56px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 1000;
}

.nav .logo {
    color: var(--nav-text);
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 2px;
}

.nav .logo .logo-short {
    display: none;
}

.nav .logo .logo-full {
    display: inline;
}

.nav .tabs {
    display: flex;
    gap: 8px;
}

.nav .tabs a {
    color: var(--nav-text-muted);
    padding: 8px 16px;
    font-size: 0.8rem;
    font-weight: 500;
    border-radius: 6px;
    transition: color 0.2s, background 0.2s;
}

.nav .tabs a:hover {
    color: var(--nav-text);
    background: rgba(255, 255, 255, 0.1);
}

.nav .tabs a.active {
    color: var(--nav-text);
    background: rgba(255, 255, 255, 0.15);
}

/* ==========================================================================
   LAYOUT
   ========================================================================== */

.main {
    max-width: 1080px;
    margin: 0 auto;
    padding: 32px 24px;
    min-height: calc(100vh - 56px);
}

/* ==========================================================================
   TYPOGRAPHY
   ========================================================================== */

h1 {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 24px;
    color: var(--text-primary);
}

h2 {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 16px;
    color: var(--text-primary);
}

h3 {
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 12px;
    color: var(--text-primary);
}

/* ==========================================================================
   BUTTONS - Consistent styling
   ========================================================================== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    font-size: 0.85rem;
    font-weight: 600;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

/* Primary Button */
.btn-primary {
    background: var(--btn-primary-bg);
    color: var(--btn-primary-text);
    border: 2px solid var(--btn-primary-bg);
}

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

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

/* Secondary Button */
.btn-secondary {
    background: var(--btn-secondary-bg);
    color: var(--btn-secondary-text);
    border: 2px solid var(--btn-secondary-border);
}

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

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

/* Ghost Button - No background */
.btn-ghost {
    background: transparent;
    color: var(--text-muted);
    border: 2px solid transparent;
}

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

/* Danger Button */
.btn-danger {
    background: var(--danger-bg);
    color: var(--danger-text);
    border: 2px solid var(--danger-border);
}

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

/* Success state */
.btn-success {
    background: var(--success-bg);
    color: var(--success-text);
    border: 2px solid var(--success-border);
}

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

/* Button sizes */
.btn-sm {
    padding: 6px 12px;
    font-size: 0.8rem;
}

.btn-lg {
    padding: 14px 28px;
    font-size: 0.95rem;
}

/* ==========================================================================
   FORMS
   ========================================================================== */

.form-group {
    margin-bottom: 16px;
}

.form-group label {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    margin-bottom: 6px;
    color: var(--text-secondary);
}

.form-input {
    width: 100%;
    padding: 10px 14px;
    font-size: 0.9rem;
    border: 2px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-input);
    color: var(--text-primary);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.form-input:focus {
    outline: none;
    border-color: var(--border-focus);
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.05);
}

.form-input::placeholder {
    color: var(--text-placeholder);
}

/* ==========================================================================
   CARDS BASE
   ========================================================================== */

.card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 8px;
    transition: all 0.2s ease;
}

.card:hover {
    border-color: var(--border-hover);
    box-shadow: 0 4px 12px var(--card-shadow);
}

/* ==========================================================================
   LOADING & TRANSITIONS
   ========================================================================== */

.spinner {
    width: 20px;
    height: 20px;
    border: 2px solid var(--spinner-track);
    border-top-color: var(--spinner-fill);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

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

/* Fade in animation for new content */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in {
    animation: fadeIn 0.3s ease forwards;
}

/* Staggered fade for lists */
.contract-card {
    opacity: 0;
    animation: fadeIn 0.3s ease forwards;
}

.contract-card:nth-child(1) { animation-delay: 0.0s; }
.contract-card:nth-child(2) { animation-delay: 0.05s; }
.contract-card:nth-child(3) { animation-delay: 0.1s; }
.contract-card:nth-child(4) { animation-delay: 0.15s; }
.contract-card:nth-child(5) { animation-delay: 0.2s; }
.contract-card:nth-child(6) { animation-delay: 0.25s; }
.contract-card:nth-child(7) { animation-delay: 0.3s; }
.contract-card:nth-child(8) { animation-delay: 0.35s; }
.contract-card:nth-child(9) { animation-delay: 0.4s; }
.contract-card:nth-child(10) { animation-delay: 0.45s; }
.contract-card:nth-child(n+11) { animation-delay: 0.5s; }

/* ==========================================================================
   TOAST NOTIFICATIONS
   ========================================================================== */

.toast-container {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.toast {
    padding: 12px 20px;
    background: var(--toast-bg);
    color: var(--toast-text);
    font-size: 0.85rem;
    font-weight: 500;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    animation: slideIn 0.3s ease;
    transition: opacity 0.3s, transform 0.3s;
}

.toast-success {
    background: var(--success-text);
}

.toast-error {
    background: var(--danger-text);
}

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

/* ==========================================================================
   MODAL
   ========================================================================== */

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--modal-overlay);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    z-index: 2000;
    opacity: 0;
    animation: fadeOverlay 0.2s ease forwards;
}

@keyframes fadeOverlay {
    to { opacity: 1; }
}

.modal {
    background: var(--modal-bg);
    border-radius: 8px;
    max-width: 700px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    transform: scale(0.95);
    animation: scaleModal 0.2s ease forwards;
}

@keyframes scaleModal {
    to { transform: scale(1); }
}

.modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-tertiary);
    border: none;
    border-radius: 6px;
    font-size: 1.25rem;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s;
}

.modal-close:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.modal-header {
    padding: 24px 24px 0;
}

.modal-header h2 {
    font-size: 1.1rem;
    margin-bottom: 0;
    padding-right: 40px;
}

.modal-body {
    padding: 24px;
}

body.modal-open {
    overflow: hidden;
}

/* ==========================================================================
   RESPONSIVE - TABLET
   ========================================================================== */

@media (max-width: 768px) {
    .nav {
        padding: 0 16px;
    }

    .nav .tabs {
        gap: 4px;
    }

    .nav .tabs a {
        padding: 8px 12px;
        font-size: 0.75rem;
    }

    .main {
        padding: 24px 16px;
    }
}

/* ==========================================================================
   RESPONSIVE - MOBILE
   ========================================================================== */

@media (max-width: 480px) {
    .nav {
        padding: 0 12px;
        height: 52px;
    }

    .nav .logo {
        font-size: 1.1rem;
        font-weight: 800;
        letter-spacing: 0;
    }

    .nav .logo .logo-full {
        display: none;
    }

    .nav .logo .logo-short {
        display: inline;
    }

    .nav .tabs a {
        padding: 6px 10px;
        font-size: 0.7rem;
    }

    .main {
        padding: 16px 12px;
    }

    .btn {
        padding: 12px 20px;
    }

    .toast-container {
        left: 12px;
        right: 12px;
        bottom: 12px;
    }

    .toast {
        text-align: center;
    }
}
/* ==========================================================================
   CONTRACT CARDS - Clean, adaptive design v2
   Uses CSS variables from app.css for automatic dark mode support
   ========================================================================== */

.contract-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ==========================================================================
   CONTRACT CARD
   ========================================================================== */

.contract-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 6px;
    padding: 16px;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.contract-card:hover {
    border-color: var(--border-focus);
    box-shadow: 0 1px 3px var(--card-shadow), 0 8px 24px var(--card-shadow);
}

/* ==========================================================================
   CARD HEADER - Title + Location pill
   ========================================================================== */

.contract-card .card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 4px;
}

.contract-card .title-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    flex: 1;
}

.contract-card .title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.4;
    flex: 1;
}

/* Location as pill badge */
.contract-card .location {
    flex-shrink: 0;
    font-size: 12px;
    color: var(--text-muted);
    background: var(--bg-tertiary);
    padding: 2px 8px;
    border-radius: 20px;
    white-space: nowrap;
}

/* ==========================================================================
   SOURCE LINE - OrgType + Entity (subtle)
   ========================================================================== */

.contract-card .source-line {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.contract-card .source-line .org-type {
    font-weight: 500;
}

.contract-card .source-line .entity::before {
    content: '·';
    margin-right: 4px;
}

/* Legacy support for old org-type class */
.contract-card .org-type:not(.source-line .org-type) {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 8px;
}

/* ==========================================================================
   MATCHED KEYWORDS - For feed alerts
   ========================================================================== */

.contract-card .matched-keywords {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.contract-card .keyword-tag {
    background: var(--btn-primary-bg);
    color: var(--btn-primary-text);
    padding: 2px 8px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 500;
}

/* ==========================================================================
   DESCRIPTION - 3 line clamp
   ========================================================================== */

.contract-card .description-wrapper {
    margin-bottom: 12px;
}

.contract-card .description {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.contract-card .description.expanded {
    display: block;
    -webkit-line-clamp: unset;
}

.contract-card .show-more-btn {
    background: none;
    border: none;
    color: var(--border-focus);
    font-size: 12px;
    font-weight: 500;
    padding: 0;
    margin-top: 4px;
    cursor: pointer;
}

.contract-card .show-more-btn:hover {
    text-decoration: underline;
}

/* ==========================================================================
   META INFO
   ========================================================================== */

.contract-card .meta {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
    font-size: 12px;
    color: var(--text-secondary);
}

/* Due date with label */
.contract-card .due {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--text-secondary);
}

.contract-card .due::before {
    content: 'Due:';
    color: var(--text-muted);
}

.contract-card .due.urgent {
    color: var(--danger-text);
}

.contract-card .due.urgent::before {
    color: var(--danger-text);
}

/* Days badge */
.days-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 8px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
}

.days-badge.urgent {
    background: var(--danger-bg);
    color: var(--danger-text);
}

.days-badge.soon {
    background: rgba(245, 158, 11, 0.15);
    color: #d29922;
}

.days-badge.normal {
    background: var(--success-bg);
    color: var(--success-text);
}

.days-badge.expired {
    background: var(--bg-tertiary);
    color: var(--text-muted);
}

.contract-card .value-range {
    color: var(--success-text);
    font-weight: 500;
}

.contract-card .posted {
    color: var(--text-muted);
}

.contract-card .duration {
    color: var(--text-secondary);
}

/* ==========================================================================
   NOTICE TYPE BADGE
   ========================================================================== */

.contract-card .notice-type-badge,
.notice-type-badge {
    flex-shrink: 0;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 2px 6px;
    border-radius: 4px;
    background: rgba(88, 166, 255, 0.15);
    color: var(--border-focus);
}

.notice-type-badge.awarded {
    background: var(--bg-tertiary);
    color: var(--text-muted);
}

.notice-type-badge.presol {
    background: rgba(245, 158, 11, 0.15);
    color: #d29922;
}

.notice-type-badge.sources {
    background: rgba(163, 113, 247, 0.15);
    color: #a371f7;
}

/* Awarded contract styling */
.contract-card.awarded {
    opacity: 0.85;
    border-left: 3px solid var(--text-muted);
}

.contract-card .due.awarded::before {
    content: '';
}

.days-badge.awarded {
    background: var(--bg-tertiary);
    color: var(--text-muted);
}

/* ==========================================================================
   TAGS ROW - Industry codes and set-asides
   ========================================================================== */

.contract-card .tags-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border-color);
}

.contract-card .code-tags {
    display: inline-flex;
    gap: 6px;
    flex-wrap: wrap;
}

.contract-card .code-tag {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    padding: 2px 8px;
    border-radius: 20px;
    font-size: 11px;
    font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;
}

.contract-card .code-tag.naics {
    background: rgba(88, 166, 255, 0.15);
    color: var(--border-focus);
}

.contract-card .code-tag.cpv {
    background: rgba(163, 113, 247, 0.15);
    color: #a371f7;
}

.contract-card .code-tag.setaside {
    background: var(--success-bg);
    color: var(--success-text);
}

/* ==========================================================================
   SET-ASIDE PROGRAM BADGES
   ========================================================================== */

.contract-card .setaside-tags {
    display: inline-flex;
    gap: 4px;
    flex-wrap: wrap;
}

.contract-card .code-tag.setaside-8a {
    background: var(--success-bg);
    color: var(--success-text);
    font-weight: 600;
}

.contract-card .code-tag.setaside-hubzone {
    background: rgba(88, 166, 255, 0.15);
    color: var(--border-focus);
    font-weight: 600;
}

.contract-card .code-tag.setaside-sdvosb {
    background: rgba(245, 158, 11, 0.15);
    color: #d29922;
    font-weight: 600;
}

.contract-card .code-tag.setaside-wosb {
    background: rgba(163, 113, 247, 0.15);
    color: #a371f7;
    font-weight: 600;
}

.contract-card .code-tag.setaside-edwosb {
    background: var(--danger-bg);
    color: var(--danger-text);
    font-weight: 600;
}

/* ==========================================================================
   CARD ACTIONS
   ========================================================================== */

.contract-card .card-actions {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border-color);
}

/* Track button - outlined pill with hover fill */
.contract-card .action-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 500;
    font-family: inherit;
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.15s;
}

.contract-card .action-btn:hover {
    background: var(--btn-primary-bg);
    color: var(--btn-primary-text);
    border-color: var(--btn-primary-bg);
}

.contract-card .action-btn .btn-icon {
    font-size: 14px;
    line-height: 1;
}

/* Save/Track button */
.contract-card .action-btn.save {
    color: var(--text-primary);
    border-color: var(--text-primary);
}

.contract-card .action-btn.save:hover {
    background: var(--btn-primary-bg);
    color: var(--btn-primary-text);
}

/* Tracked state */
.contract-card .action-btn.tracked {
    background: var(--success-bg);
    color: var(--success-text);
    border-color: var(--success-text);
}

.contract-card .action-btn.tracked:hover {
    background: var(--success-text);
    color: #fff;
}

/* Dismiss button */
.contract-card .action-btn.dismiss {
    color: var(--text-muted);
    border-color: var(--border-color);
}

.contract-card .action-btn.dismiss:hover {
    background: var(--danger-bg);
    color: var(--danger-text);
    border-color: var(--danger-text);
}

/* Untrack button */
.contract-card .action-btn.untrack {
    color: var(--text-muted);
}

.contract-card .action-btn.untrack:hover {
    background: var(--danger-bg);
    color: var(--danger-text);
    border-color: var(--danger-text);
}

/* ==========================================================================
   KEYBOARD SELECTION
   ========================================================================== */

.contract-card.keyboard-selected {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
}

/* ==========================================================================
   TRACKED CARD
   ========================================================================== */

.tracked-card .tracked-date {
    color: var(--text-muted);
}

.tracked-card .changes-indicator {
    margin-top: 8px;
    padding: 6px 10px;
    background: rgba(245, 158, 11, 0.15);
    color: #d29922;
    font-size: 12px;
    font-weight: 500;
    border-radius: 6px;
}

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

@media (max-width: 768px) {
    .contract-card .card-header {
        flex-direction: column;
        gap: 6px;
    }

    .contract-card .location {
        align-self: flex-start;
    }
}

@media (max-width: 480px) {
    .contract-list {
        gap: 8px;
    }

    .contract-card {
        padding: 12px;
        border-radius: 0;
        margin-left: -12px;
        margin-right: -12px;
        border-left: none;
        border-right: none;
    }

    .contract-card + .contract-card {
        margin-top: -1px;
    }

    .contract-card .title {
        font-size: 15px;
    }

    .contract-card .card-actions {
        flex-wrap: wrap;
    }

    .contract-card .tags-row {
        margin-top: 8px;
        padding-top: 8px;
    }
}
/* ==========================================================================
   SEARCH PAGE - Linear/GitHub style
   Uses CSS variables from app.css for automatic dark mode support
   ========================================================================== */

.search-page {
    max-width: 900px;
    margin: 0 auto;
    padding: 32px 24px;
}

/* ==========================================================================
   SEARCH BAR - Full width, clean rounded input
   ========================================================================== */

.search-container {
    margin-bottom: 24px;
    position: relative;
}

.search-box {
    display: flex;
    align-items: center;
    gap: 12px;
}

.search-input-group {
    flex: 1;
    display: flex;
    align-items: center;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.search-input-group:focus-within {
    border-color: var(--border-focus);
    box-shadow: 0 0 0 3px rgba(88, 166, 255, 0.15);
}

.search-input {
    flex: 1;
    min-width: 0;
    padding: 10px 12px;
    border: none;
    background: transparent;
    font-size: 14px;
    font-family: inherit;
    color: var(--text-primary);
    outline: none;
}

.search-input::placeholder {
    color: var(--text-placeholder);
}

/* Help button - now outside the input group */
.search-help-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    min-width: 40px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    cursor: pointer;
    color: var(--text-secondary);
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

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

.search-help-btn svg {
    width: 18px;
    height: 18px;
    pointer-events: none;
}

/* Search button - solid dark */
.search-submit {
    padding: 10px 16px;
    background: var(--btn-primary-bg);
    color: var(--btn-primary-text);
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s;
}

.search-submit:hover {
    background: var(--btn-primary-hover);
}

/* Map button (can be button or link) */
.search-map-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    text-decoration: none;
}

.search-map-btn svg {
    width: 18px;
    height: 18px;
    stroke: var(--text-secondary);
}

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

.search-map-btn:hover svg {
    stroke: var(--text-primary);
}

.search-map-btn.active {
    background: var(--btn-primary-bg);
    border-color: var(--btn-primary-bg);
}

.search-map-btn.active svg {
    stroke: var(--btn-primary-text);
}

/* ==========================================================================
   SEARCH CLASSIFICATION TAGS - Live feedback as user types
   ========================================================================== */

.search-classification {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
    min-height: 0;
    transition: min-height 0.15s ease;
}

.search-classification:empty {
    margin-top: 0;
}

.search-classification.has-tags {
    min-height: 26px;
}

.search-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    font-size: 11px;
    font-weight: 500;
    border-radius: 4px;
    animation: tagFadeIn 0.15s ease;
}

@keyframes tagFadeIn {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}

/* Tag type colors */
.search-tag.tag-naics {
    background: var(--success-bg);
    color: var(--success-text);
    border: 1px solid var(--success-border);
}

.search-tag.tag-psc {
    background: rgba(88, 166, 255, 0.15);
    color: var(--border-focus);
    border: 1px solid rgba(88, 166, 255, 0.3);
}

.search-tag.tag-cpv {
    background: rgba(163, 113, 247, 0.15);
    color: #a371f7;
    border: 1px solid rgba(163, 113, 247, 0.3);
}

.search-tag.tag-state {
    background: rgba(88, 166, 255, 0.15);
    color: var(--border-focus);
    border: 1px solid rgba(88, 166, 255, 0.3);
}

.search-tag.tag-country {
    background: rgba(245, 158, 11, 0.15);
    color: #d29922;
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.search-tag.tag-keyword {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
}

.search-tag.tag-phrase {
    background: rgba(245, 158, 11, 0.2);
    color: #d29922;
    border: 1px solid rgba(245, 158, 11, 0.4);
}

.search-tag.tag-phrase.in-progress {
    background: rgba(245, 158, 11, 0.1);
    border-style: dashed;
}

.search-tag.tag-orgtype {
    background: rgba(163, 113, 247, 0.15);
    color: #a371f7;
    border: 1px solid rgba(163, 113, 247, 0.3);
}

.search-tag.tag-setaside {
    background: rgba(248, 81, 73, 0.15);
    color: var(--danger-text);
    border: 1px solid rgba(248, 81, 73, 0.3);
}

.search-tag .tag-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    opacity: 0.8;
}

.search-tag .tag-value {
    font-weight: 600;
}

/* ==========================================================================
   SEARCH OPTIONS BAR - Mode toggle and classification tags
   ========================================================================== */

.search-options {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-top: 10px;
    flex-wrap: wrap;
}

.search-mode-toggle {
    display: flex;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 2px;
    flex-shrink: 0;
}

.mode-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: transparent;
    border: none;
    border-radius: 4px;
    font-size: 12px;
    font-family: inherit;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s ease;
}

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

.mode-btn.active {
    background: var(--bg-secondary);
    color: var(--text-primary);
    box-shadow: 0 1px 2px var(--card-shadow);
}

.mode-btn .mode-indicator {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--border-color);
    transition: background 0.15s;
}

.mode-btn.active .mode-indicator {
    background: var(--success-text);
}

.mode-btn[data-sort="posted"] .mode-indicator {
    display: none;
}

/* ==========================================================================
   SEARCH HELP TOOLTIP - Clean dropdown with examples
   ========================================================================== */

.search-help-tooltip {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    max-width: 360px;
    z-index: 100;
    background: var(--modal-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 8px 24px var(--card-shadow);
    padding: 16px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: all 0.15s ease;
}

.search-help-tooltip.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.search-help-tooltip .tooltip-content {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.search-help-tooltip .tooltip-content strong {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}

.search-help-tooltip .help-subtitle {
    font-size: 12px;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.4;
}

.search-help-tooltip .help-examples {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.search-help-tooltip .help-example {
    display: flex;
    align-items: center;
    gap: 8px;
}

.search-help-tooltip .example-input {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
    font-size: 12px;
    background: var(--bg-tertiary);
    padding: 3px 8px;
    border-radius: 4px;
    color: var(--text-primary);
}

.search-help-tooltip .example-arrow {
    color: var(--text-muted);
    font-size: 12px;
}

.search-help-tooltip .help-tip {
    font-size: 12px;
    color: var(--text-secondary);
    margin: 0;
    padding-top: 8px;
    border-top: 1px solid var(--border-color);
}

.search-help-tooltip .help-tip code {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
    font-size: 11px;
    background: var(--bg-tertiary);
    padding: 2px 6px;
    border-radius: 4px;
    color: var(--text-primary);
}

/* Legacy tooltip styles for compatibility */
.search-help-tooltip ul {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
}

.search-help-tooltip li {
    font-size: 12px;
    color: var(--text-secondary);
    background: var(--bg-tertiary);
    padding: 4px 10px;
    border-radius: 20px;
}

.search-help-tooltip li strong {
    color: var(--text-primary);
    font-weight: 500;
}

/* ==========================================================================
   RESULTS HEADER
   ========================================================================== */

.results-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-color);
}

.results-info {
    font-size: 14px;
    color: var(--text-secondary);
}

.results-controls {
    display: flex;
    align-items: center;
    gap: 12px;
}

.sort-control {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sort-control label {
    font-size: 12px;
    color: var(--text-secondary);
}

.sort-control select {
    padding: 5px 8px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 12px;
    font-family: inherit;
    background: var(--bg-tertiary);
    color: var(--text-primary);
    cursor: pointer;
}

.sort-control select:focus {
    outline: none;
    border-color: var(--border-focus);
    box-shadow: 0 0 0 3px rgba(88, 166, 255, 0.15);
}

/* ==========================================================================
   EMPTY STATES
   ========================================================================== */

.empty-state {
    text-align: center;
    padding: 64px 24px;
}

.empty-state h3 {
    font-size: 20px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.empty-state p {
    font-size: 14px;
    color: var(--text-secondary);
    max-width: 360px;
    margin: 0 auto;
    line-height: 1.5;
}

/* ==========================================================================
   LOADING
   ========================================================================== */

.search-loading {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--border-focus);
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.2s;
}

.search-loading.htmx-request {
    opacity: 1;
    animation: loading-progress 1.5s ease infinite;
}

@keyframes loading-progress {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.loading-more {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 24px;
    color: var(--text-secondary);
    font-size: 14px;
}

/* ==========================================================================
   MAP
   ========================================================================== */

.map-container {
    margin-top: 16px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
}

#map {
    width: 100%;
    height: calc(100vh - 200px);
    min-height: 500px;
    max-height: 800px;
    background: var(--bg-secondary);
}

/* Cluster markers */
.map-cluster-icon {
    background: transparent !important;
    border: none !important;
}

.map-cluster {
    background: linear-gradient(135deg, var(--border-focus) 0%, #1f6feb 100%);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-family: inherit;
    box-shadow: 0 2px 8px var(--card-shadow), 0 0 0 2px rgba(255,255,255,0.2);
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.map-cluster:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 12px var(--card-shadow), 0 0 0 3px rgba(255,255,255,0.3);
}

/* Map popup */
.map-popup {
    min-width: 200px;
    max-width: 300px;
}

.map-popup h4 {
    margin: 0 0 8px 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.3;
}

.map-popup p {
    margin: 0 0 4px 0;
    font-size: 12px;
    color: var(--text-secondary);
}

.map-popup .popup-entity {
    font-weight: 500;
    color: var(--text-primary);
}

.map-popup .popup-due {
    color: var(--danger-text);
}

.popup-view-btn {
    margin-top: 8px;
    padding: 6px 12px;
    background: var(--btn-primary-bg);
    color: var(--btn-primary-text);
    border: none;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    width: 100%;
    transition: background 0.15s;
}

.popup-view-btn:hover {
    background: var(--btn-primary-hover);
}

/* Leaflet tooltip styling */
.leaflet-tooltip {
    background: var(--toast-bg);
    color: var(--toast-text);
    border: none;
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 12px;
    font-family: inherit;
    box-shadow: 0 2px 8px var(--card-shadow);
}

.leaflet-tooltip-top:before {
    border-top-color: var(--toast-bg);
}

/* Map button active state - duplicate removed, already defined above */

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

@media (max-width: 768px) {
    .search-page {
        padding: 20px 16px;
    }

    .search-box {
        gap: 8px;
    }

    .search-submit {
        padding: 10px 12px;
    }

    .results-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
}

@media (max-width: 480px) {
    .search-page {
        padding: 16px 12px;
        /* Prevent horizontal overflow */
        overflow-x: hidden;
    }

    .search-container {
        /* Ensure container respects parent width */
        max-width: 100%;
    }

    .search-box {
        gap: 6px;
        /* Prevent overflow */
        max-width: 100%;
    }

    .search-input-group {
        /* Allow input to shrink */
        min-width: 0;
    }

    .search-input {
        font-size: 16px;
        /* Prevent iOS zoom on focus */
        padding: 10px 10px;
    }

    .search-help-tooltip {
        left: -12px;
        right: -12px;
        max-width: none;
    }

    .search-help-btn,
    .search-map-btn {
        width: 36px;
        height: 36px;
        min-width: 36px;
        flex-shrink: 0;
    }

    .search-submit {
        padding: 8px 12px;
        font-size: 13px;
        flex-shrink: 0;
        white-space: nowrap;
    }
}

/* Narrow mobile screens (most phones in portrait) */
@media (max-width: 420px) {
    .search-page {
        padding: 16px 10px;
    }

    .search-box {
        gap: 5px;
    }

    .search-help-btn,
    .search-map-btn {
        width: 34px;
        height: 34px;
        min-width: 34px;
    }

    .search-help-btn svg,
    .search-map-btn svg {
        width: 16px;
        height: 16px;
    }

    .search-submit {
        padding: 8px 10px;
        font-size: 12px;
    }

    .search-input {
        padding: 8px 8px;
    }
}

/* Very narrow screens */
@media (max-width: 375px) {
    .search-page {
        padding: 12px 8px;
    }

    .search-box {
        gap: 4px;
    }

    .search-help-btn,
    .search-map-btn {
        width: 32px;
        height: 32px;
        min-width: 32px;
    }

    .search-help-btn svg,
    .search-map-btn svg {
        width: 15px;
        height: 15px;
    }

    .search-submit {
        padding: 7px 8px;
        font-size: 11px;
    }

    .search-input {
        padding: 7px 6px;
        font-size: 15px;
    }
}

/* ==========================================================================
   LOCATION AUTOCOMPLETE - Disambiguation dropdown for ambiguous locations
   ========================================================================== */

.search-input-group {
    position: relative;
}

.location-autocomplete {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: var(--modal-bg);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    box-shadow: 0 4px 12px var(--card-shadow);
    z-index: 200;
    max-height: 280px;
    overflow-y: auto;
}

.location-autocomplete.active {
    display: block;
}

.location-autocomplete-header {
    padding: 8px 12px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--text-secondary);
    background: var(--bg-tertiary);
    border-bottom: 1px solid var(--border-color);
    letter-spacing: 0.02em;
}

.location-autocomplete-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    cursor: pointer;
    border-bottom: 1px solid var(--border-color);
    transition: background 0.1s;
}

.location-autocomplete-item:last-child {
    border-bottom: none;
}

.location-autocomplete-item:hover,
.location-autocomplete-item.selected {
    background: var(--bg-tertiary);
}

.location-autocomplete-item.selected {
    background: rgba(88, 166, 255, 0.15);
}

.location-item-left {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.location-item-name {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
}

.location-item-type {
    font-size: 11px;
    color: var(--text-secondary);
}

.location-item-count {
    font-size: 12px;
    color: var(--text-secondary);
    background: var(--bg-tertiary);
    padding: 2px 8px;
    border-radius: 10px;
    white-space: nowrap;
}

/* Empty state */
.location-autocomplete-empty {
    padding: 16px;
    text-align: center;
    color: var(--text-secondary);
    font-size: 13px;
}

/* Loading state */
.location-autocomplete-loading {
    padding: 16px;
    text-align: center;
    color: var(--text-secondary);
    font-size: 13px;
}

.location-autocomplete-loading::after {
    content: '';
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-left: 8px;
    border: 2px solid var(--border-color);
    border-top-color: var(--border-focus);
    border-radius: 50%;
    animation: location-spinner 0.6s linear infinite;
}

@keyframes location-spinner {
    to { transform: rotate(360deg); }
}
/* ==========================================================================
   MODALS - All modal dialogs, overlays, and action sheets
   ========================================================================== */

/* Base Modal Overlay */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--modal-overlay);
    z-index: 10001;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 48px 24px;
    overflow-y: auto;
}

/* Base Modal */
.modal {
    background: var(--modal-bg);
    max-width: 800px;
    width: 100%;
    position: relative;
}
.modal-header {
    padding: 24px;
    border-bottom: 1px solid var(--border-color);
}
.modal-header h2 {
    font-size: 1.1rem;
    font-weight: 700;
    padding-right: 40px;
    line-height: 1.4;
}
.modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    background: none;
    border: none;
    font-size: 28px;
    cursor: pointer;
    color: var(--text-muted);
    padding: 8px;
    line-height: 1;
}
.modal-close:hover { color: var(--text-primary); }
.modal-body { padding: 24px; }
.modal-section { margin-bottom: 24px; }
.modal-section:last-child { margin-bottom: 0; }
.modal-section h3 {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 10px;
    letter-spacing: 0.5px;
}
.modal-section p {
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--text-secondary);
    white-space: pre-wrap;
}
.modal-actions {
    padding: 20px 24px;
    border-top: 1px solid var(--border-color);
    display: flex;
    gap: 12px;
}

/* Modal v2 (Contract Detail Enhanced) */
.modal-v2 { max-width: 700px; border-radius: 12px; }
.modal-v2 .modal-header {
    background: linear-gradient(135deg, var(--nav-bg) 0%, #333 100%);
    color: var(--nav-text);
    border-radius: 12px 12px 0 0;
    padding: 20px 24px;
}
.modal-v2 .modal-header h2 { color: var(--nav-text); padding-right: 48px; }
.modal-v2 .modal-close { color: rgba(255,255,255,0.7); }
.modal-v2 .modal-close:hover { color: #fff; }
.modal-v2 .date-cards {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
}
.modal-v2 .date-card {
    flex: 1;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 12px;
    text-align: center;
}
.modal-v2 .date-card .label {
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
    margin-bottom: 4px;
}
.modal-v2 .date-card .value {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
}
.modal-v2 .date-card.urgent {
    background: var(--danger-bg);
    border-color: var(--danger-border);
}
.modal-v2 .date-card.urgent .value { color: var(--danger-text); }

/* Modal v2 Sections */
.modal-v2 .section { padding: 16px 24px; border-bottom: 1px solid var(--border-color); }
.modal-v2 .section:last-of-type { border-bottom: none; }
.modal-v2 .section h3 { font-size: 0.9rem; color: var(--text-secondary); text-transform: uppercase; margin: 0 0 12px 0; letter-spacing: 0.5px; font-weight: 700; }
.modal-v2 .description { line-height: 1.6; color: var(--text-secondary); margin: 0; }
.modal-v2 .description-container { position: relative; }
.modal-v2 .description.truncated { max-height: 9em; overflow: hidden; }
.modal-v2 .description.truncated::after { content: '...'; position: absolute; bottom: 0; right: 0; padding-left: 40px; background: linear-gradient(to right, transparent, var(--modal-bg) 50%); }
.modal-v2 .description.expanded { max-height: none; overflow: visible; }
.modal-v2 .description.expanded::after { display: none; }
.modal-v2 .show-more-btn { background: none; border: none; color: var(--border-focus); cursor: pointer; padding: 0; font-size: 0.85rem; font-weight: 500; margin-top: 8px; display: block; }
.modal-v2 .show-more-btn:hover { text-decoration: underline; }

/* Collapsible description text for modal */
.modal-v2 .description-section .description-text {
    line-height: 1.7;
    color: var(--text-secondary);
    white-space: pre-wrap;
    word-break: break-word;
}
.modal-v2 .description-section .description-text.collapsed {
    max-height: 200px;
    overflow: hidden;
    position: relative;
}
.modal-v2 .description-section .description-text.collapsed::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: linear-gradient(to bottom, transparent, var(--modal-bg));
    pointer-events: none;
}
.modal-v2 .description-section .description-text.expanded {
    max-height: none;
}
.modal-v2 .description-section .description-text.expanded::after {
    display: none;
}
.modal-v2 .entity-line { font-size: 0.85rem; color: var(--text-muted); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.modal-v2 .entity-line .badge { background: var(--bg-tertiary); color: var(--text-secondary); padding: 2px 10px; border-radius: 12px; font-size: 0.75rem; }
.modal-v2 .original-link { display: inline-block; background: var(--bg-tertiary); border: 1px solid var(--border-color); padding: 8px 16px; border-radius: 6px; color: var(--text-secondary); font-weight: 500; font-size: 0.85rem; text-decoration: none; transition: background 0.2s; margin-top: 12px; }
.modal-v2 .original-link:hover { background: var(--bg-hover); color: var(--text-primary); }
.modal-v2 .contact-grid { display: grid; gap: 8px; }
.modal-v2 .contact-item { display: flex; align-items: center; gap: 8px; word-break: break-word; }
.modal-v2 .contact-item a { color: var(--border-focus); text-decoration: none; word-break: break-all; }
.modal-v2 .contact-item a:hover { text-decoration: underline; }
.modal-v2 .doc-list { list-style: none; padding: 0; margin: 0; }
.modal-v2 .doc-list li { padding: 10px 12px; background: var(--bg-tertiary); border-radius: 6px; margin-bottom: 8px; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.modal-v2 .doc-list li:hover { background: var(--bg-hover); }
.modal-v2 .doc-list li span { flex: 1; word-break: break-word; font-size: 0.85rem; }
.modal-v2 .doc-list a { color: var(--border-focus); text-decoration: none; font-weight: 500; }
.modal-v2 .doc-list .view-btn { font-size: 0.75rem; color: var(--text-muted); white-space: nowrap; }
.modal-v2 .data-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.modal-v2 .data-table td { padding: 8px 0; border-bottom: 1px solid var(--border-color); word-break: break-word; }
.modal-v2 .data-table td:first-child { color: var(--text-muted); width: 40%; }
.modal-v2 .modal-actions { padding: 16px 24px; background: var(--bg-tertiary); border-radius: 0 0 12px 12px; display: flex; gap: 12px; flex-wrap: wrap; }
.modal-v2 .modal-actions .btn { padding: 10px 20px; border-radius: 6px; font-weight: 600; font-size: 0.9rem; text-decoration: none; text-align: center; cursor: pointer; border: none; flex: 1; min-width: 120px; }
.modal-v2 .btn-track { background: var(--btn-primary-bg); color: var(--btn-primary-text); }
.modal-v2 .btn-track.tracked { background: var(--success-text); }
.modal-v2 .btn-email { background: var(--bg-tertiary); color: var(--text-secondary); }
.modal-v2 .btn-copy { background: var(--bg-tertiary); color: var(--text-secondary); }
.modal-v2 .related-loading { text-align: center; padding: 20px; color: var(--text-muted); }
.modal-v2 .related-item { display: flex; gap: 12px; text-decoration: none; color: inherit; }
.modal-v2 .related-item .related-info { flex: 1; min-width: 0; }
.modal-v2 .related-item .related-title { font-size: 0.85rem; font-weight: 600; color: var(--text-primary); margin: 0 0 4px 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.modal-v2 .related-item .related-meta { font-size: 0.75rem; color: var(--text-muted); display: flex; gap: 8px; flex-wrap: wrap; }
.modal-v2 .related-item .related-badge { display: inline-block; padding: 2px 6px; background: rgba(88, 166, 255, 0.15); color: var(--border-focus); border-radius: 4px; font-size: 0.7rem; font-weight: 600; }

.modal-v2 .related-contracts {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--border-color);
}
.modal-v2 .related-contracts h4 {
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 12px;
}
.modal-v2 .related-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.modal-v2 .related-item {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 10px 12px;
    cursor: pointer;
    transition: all 0.15s;
}
.modal-v2 .related-item:hover {
    border-color: var(--border-focus);
    background: var(--bg-secondary);
}
.modal-v2 .related-item .title {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-primary);
}
.modal-v2 .related-item .meta {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 2px;
}

/* Share Result */
.share-result {
    display: inline-flex;
    align-items: center;
    margin-left: 8px;
    font-size: 0.85rem;
}
.share-success {
    color: var(--success-text);
    font-weight: 500;
}
.share-success a {
    color: var(--success-text);
    text-decoration: underline;
}
.share-error {
    color: var(--danger-text);
    font-weight: 500;
}

/* Related Section Loading */
.related-section .loading-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 20px;
    color: var(--text-muted);
    font-size: 0.85rem;
}
.spinner-small {
    width: 16px;
    height: 16px;
    border: 2px solid var(--spinner-track);
    border-top-color: var(--spinner-fill);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}
@keyframes spin {
    to { transform: rotate(360deg); }
}
.no-related {
    color: var(--text-muted);
    font-size: 0.85rem;
    text-align: center;
    padding: 12px;
}

/* Detail Grid */
.detail-grid {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 8px 16px;
    font-size: 0.9rem;
}
.detail-grid .label { font-weight: 600; color: var(--text-muted); }
.detail-grid .value { color: var(--text-primary); }

/* Data Fields (Definition List) */
.data-fields {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
    margin: 0;
    padding: 0;
}
.data-fields dt {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-bottom: 4px;
}
.data-fields dd {
    font-size: 0.9rem;
    color: var(--text-primary);
    margin: 0 0 16px 0;
    padding: 8px 12px;
    background: var(--bg-tertiary);
    border-radius: 4px;
    word-break: break-word;
}
@media (min-width: 640px) {
    .data-fields {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (min-width: 960px) {
    .data-fields {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Document List */
.document-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.document-list li {
    margin-bottom: 8px;
}
.document-list li:last-child {
    margin-bottom: 0;
}
.doc-download {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-primary);
    text-decoration: none;
    font-size: 0.9rem;
    transition: all 0.15s;
}
.doc-download:hover {
    background: var(--btn-primary-bg);
    border-color: var(--btn-primary-bg);
    color: var(--btn-primary-text);
}
.doc-download .doc-icon {
    font-size: 1.1rem;
    font-weight: 600;
    flex-shrink: 0;
}
.doc-download .doc-name {
    flex: 1;
    word-break: break-word;
}

/* Legacy doc-list support */
.doc-list { list-style: none; }
.doc-list li { padding: 10px 0; border-bottom: 1px solid var(--border-color); }
.doc-list li:last-child { border-bottom: none; }
.doc-list a { color: var(--text-primary); text-decoration: none; font-size: 0.9rem; }
.doc-list a:hover { text-decoration: underline; }

/* Data Grid */
.data-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
    margin-top: 16px;
}
.data-item {
    background: var(--bg-tertiary);
    padding: 10px 12px;
    border-left: 3px solid var(--border-color);
}
.data-item .data-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    margin-bottom: 4px;
}
.data-item .data-value {
    font-size: 0.9rem;
    color: var(--text-primary);
    word-break: break-word;
}

/* Glossary Modal */
.glossary-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--modal-overlay);
    z-index: 10002;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.glossary-modal.show { display: flex; }
.glossary-content {
    background: var(--modal-bg);
    border-radius: 12px;
    max-width: 600px;
    width: 100%;
    max-height: 85vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.glossary-header {
    padding: 20px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.glossary-header h3 { margin: 0; font-size: 1.1rem; }
.glossary-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--text-muted);
    padding: 4px;
    line-height: 1;
}
.glossary-close:hover { color: var(--text-primary); }
.glossary-search { padding: 12px 20px; border-bottom: 1px solid var(--border-color); }
.glossary-search input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 0.9rem;
    background: var(--bg-input);
    color: var(--text-primary);
}
.glossary-regions {
    display: flex;
    gap: 8px;
    padding: 12px 20px;
    border-bottom: 1px solid var(--border-color);
    flex-wrap: wrap;
}
.glossary-region-btn {
    padding: 8px 16px;
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-primary);
    transition: all 0.2s;
}
.glossary-region-btn:hover { background: var(--bg-hover); }
.glossary-region-btn.active { background: var(--btn-primary-bg); color: var(--btn-primary-text); border-color: var(--btn-primary-bg); }
.glossary-region-btn.us { border-color: #93c5fd; }
.glossary-region-btn.us.active { background: #1e40af; border-color: #1e40af; }
.glossary-region-btn.ca { border-color: #fca5a5; }
.glossary-region-btn.ca.active { background: #dc2626; border-color: #dc2626; }
.glossary-region-btn.eu { border-color: #fcd34d; }
.glossary-region-btn.eu.active { background: #d97706; border-color: #d97706; }
.glossary-region-btn.au { border-color: #6ee7b7; }
.glossary-region-btn.au.active { background: #059669; border-color: #059669; }
.glossary-region-btn.intl { border-color: #c4b5fd; }
.glossary-region-btn.intl.active { background: #7c3aed; border-color: #7c3aed; }
.glossary-body { padding: 20px; overflow-y: auto; flex: 1; }
.glossary-term {
    margin-bottom: 16px;
    padding: 12px;
    background: var(--bg-tertiary);
    border-radius: 8px;
    border-left: 3px solid var(--border-color);
}
.glossary-term:last-child { margin-bottom: 0; }
.glossary-term.us { border-left-color: #3b82f6; }
.glossary-term.ca { border-left-color: #ef4444; }
.glossary-term.eu { border-left-color: #f59e0b; }
.glossary-term.au { border-left-color: #10b981; }
.glossary-term.intl { border-left-color: #8b5cf6; }
.glossary-term h4 { margin: 0 0 6px 0; font-size: 0.95rem; color: var(--text-primary); }
.glossary-term p { margin: 0; font-size: 0.85rem; color: var(--text-secondary); line-height: 1.5; }
.glossary-term .example { font-size: 0.8rem; color: var(--text-muted); margin-top: 4px; font-style: italic; }
.glossary-empty { text-align: center; color: var(--text-muted); padding: 40px 20px; }

/* Search Help Modal */
.search-help-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--modal-overlay);
    z-index: 10002;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.search-help-modal.show { display: flex; }
.search-help-content {
    background: var(--modal-bg);
    border-radius: 12px;
    max-width: 550px;
    width: 100%;
    max-height: 85vh;
    overflow-y: auto;
}
.search-help-header {
    padding: 20px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.search-help-header h3 { margin: 0; font-size: 1.1rem; }
.search-help-close { background: none; border: none; font-size: 1.5rem; cursor: pointer; color: var(--text-muted); }
.search-help-body { padding: 20px; }
.search-help-section { margin-bottom: 24px; }
.search-help-section:last-child { margin-bottom: 0; }
.search-help-section h4 {
    margin: 0 0 12px 0;
    font-size: 0.95rem;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
}
.search-help-section h4 .badge {
    font-size: 0.65rem;
    padding: 2px 8px;
    background: rgba(88, 166, 255, 0.15);
    color: var(--border-focus);
    border-radius: 4px;
    font-weight: 500;
}
.search-example {
    background: var(--bg-tertiary);
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 10px;
    border-left: 3px solid var(--border-focus);
}
.search-example:last-child { margin-bottom: 0; }
.search-example .query {
    font-family: monospace;
    background: var(--nav-bg);
    color: var(--nav-text);
    padding: 6px 10px;
    border-radius: 4px;
    display: inline-block;
    margin-bottom: 8px;
    font-size: 0.85rem;
}
.search-example .result { font-size: 0.85rem; color: var(--text-secondary); line-height: 1.5; }
.search-example .result strong { color: var(--text-primary); }
.search-tip {
    background: rgba(245, 158, 11, 0.15);
    border: 1px solid rgba(245, 158, 11, 0.4);
    border-radius: 8px;
    padding: 12px;
    font-size: 0.85rem;
    color: #d29922;
}
.search-tip strong { color: #d29922; }

/* Help Guide Modal */
.help-guide-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--modal-overlay);
    z-index: 10003;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.help-guide-modal.show { display: flex; }
.help-guide-content {
    background: var(--modal-bg);
    border-radius: 16px;
    max-width: 800px;
    width: 100%;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.help-guide-header {
    padding: 24px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(135deg, var(--nav-bg) 0%, #333 100%);
    color: var(--nav-text);
    border-radius: 16px 16px 0 0;
}
.help-guide-header h2 { margin: 0; font-size: 1.25rem; font-weight: 700; }
.help-guide-close {
    background: none;
    border: none;
    font-size: 1.75rem;
    cursor: pointer;
    color: var(--nav-text);
    opacity: 0.7;
    transition: opacity 0.2s;
    line-height: 1;
    padding: 4px;
}
.help-guide-close:hover { opacity: 1; }
.help-guide-body { padding: 24px; overflow-y: auto; flex: 1; }
.help-topics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
}
.help-topic-card {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 20px;
    cursor: pointer;
    transition: all 0.2s;
}
.help-topic-card:hover {
    background: var(--bg-secondary);
    border-color: var(--border-focus);
    box-shadow: 0 4px 12px var(--card-shadow);
    transform: translateY(-2px);
}
.help-topic-icon { font-size: 2rem; margin-bottom: 8px; }
.help-topic-card h3 { margin: 0 0 8px 0; font-size: 1rem; font-weight: 600; color: var(--text-primary); }
.help-topic-card p { margin: 0; font-size: 0.85rem; color: var(--text-muted); line-height: 1.4; }
.help-topic-detail { display: none; }
.help-topics-view { display: block; }
.help-back-btn {
    background: var(--bg-tertiary);
    border: none;
    padding: 8px 16px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.9rem;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 6px;
    transition: background 0.2s;
    margin-bottom: 16px;
}
.help-back-btn:hover { background: var(--bg-hover); }
.help-topic-detail h3 { margin: 0 0 12px 0; font-size: 1.1rem; font-weight: 600; }
.help-topic-detail h4 { margin: 20px 0 12px 0; font-size: 0.95rem; font-weight: 600; color: var(--text-secondary); }
.help-topic-detail p { margin: 0 0 12px 0; font-size: 0.9rem; color: var(--text-secondary); line-height: 1.6; }
.help-list { margin: 12px 0; padding-left: 20px; }
.help-list li { margin-bottom: 10px; font-size: 0.9rem; color: var(--text-secondary); line-height: 1.5; }
.help-list code {
    background: var(--bg-tertiary);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: monospace;
    font-size: 0.85em;
    color: var(--text-primary);
}
.help-note { font-size: 0.85rem; color: var(--text-muted); font-style: italic; margin-top: 12px; }
.help-glossary-link { margin-top: 20px; text-align: center; }

/* Action Sheet (Mobile Bottom Sheet) */
.action-sheet-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--modal-overlay);
    z-index: 2000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
}
.action-sheet-overlay.show { opacity: 1; visibility: visible; }
.action-sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--modal-bg);
    border-radius: 16px 16px 0 0;
    padding: 0;
    z-index: 2001;
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
    padding-bottom: env(safe-area-inset-bottom, 20px);
}
.action-sheet-overlay.show .action-sheet { transform: translateY(0); }
.action-sheet-handle {
    width: 36px;
    height: 5px;
    background: var(--border-color);
    border-radius: 3px;
    margin: 10px auto 6px;
}
.action-sheet-header { padding: 12px 20px 16px; border-bottom: 1px solid var(--border-color); }
.action-sheet-header h3 {
    font-size: 1rem;
    font-weight: 700;
    margin: 0;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.action-sheet-header .subtitle { font-size: 0.8rem; color: var(--text-muted); margin-top: 4px; }
.action-sheet-actions { padding: 8px 0; }
.action-sheet-btn {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    padding: 16px 20px;
    border: none;
    background: none;
    font-size: 1rem;
    color: var(--text-primary);
    cursor: pointer;
    text-align: left;
    text-decoration: none;
}
.action-sheet-btn:hover, .action-sheet-btn:active { background: var(--bg-hover); }
.action-sheet-btn .icon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}
.action-sheet-btn.tracked .icon { color: var(--success-text); }
.action-sheet-cancel { border-top: 8px solid var(--bg-tertiary); padding: 16px 20px; }
.action-sheet-cancel button {
    width: 100%;
    padding: 14px;
    border: none;
    background: var(--bg-tertiary);
    border-radius: 10px;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
}
.action-sheet-cancel button:active { background: var(--bg-hover); }

/* FABs (Floating Action Buttons) */
.glossary-fab {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 48px;
    height: 48px;
    background: var(--btn-primary-bg);
    color: var(--btn-primary-text);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.2rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px var(--card-shadow);
    z-index: 9999;
    transition: background 0.2s, transform 0.2s;
}
.glossary-fab:hover { background: var(--btn-primary-hover); transform: scale(1.05); }
.glossary-fab:active { transform: scale(0.95); }
.help-fab {
    position: fixed;
    bottom: 20px;
    left: 20px;
    width: 48px;
    height: 48px;
    background: var(--btn-primary-bg);
    color: var(--btn-primary-text);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.2rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px var(--card-shadow);
    z-index: 9999;
    transition: background 0.2s, transform 0.2s;
}
.help-fab:hover { background: var(--btn-primary-hover); transform: scale(1.05); }
.help-fab:active { transform: scale(0.95); }
.term-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    background: var(--bg-tertiary);
    color: var(--text-muted);
    font-size: 0.6rem;
    border-radius: 50%;
    cursor: pointer;
    margin-left: 4px;
    font-weight: 600;
    vertical-align: middle;
    transition: background 0.2s, color 0.2s;
}
.term-link:hover { background: var(--border-focus); color: var(--btn-primary-text); }

/* Modal Responsive */
@media (max-width: 768px) {
    .modal-overlay { padding: 24px 12px; }
    .modal { max-width: 100%; }
    .modal-header { padding: 20px 16px; }
    .modal-header h2 { font-size: 1rem; padding-right: 32px; }
    .modal-body { padding: 16px; }
    .modal-actions { padding: 16px; flex-direction: column; }
    .modal-actions button, .modal-actions a { width: 100%; text-align: center; }
    .detail-grid { grid-template-columns: 100px 1fr; gap: 6px 12px; }
    .data-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .help-guide-modal { padding: 0; }
    .help-guide-content { max-width: 100%; max-height: 100vh; border-radius: 0; height: 100%; }
    .help-guide-header { padding: 16px; padding-top: max(16px, env(safe-area-inset-top)); border-radius: 0; }
    .help-guide-body { padding: 16px; }
    .help-topics-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
    .glossary-fab { bottom: 70px; width: 44px; height: 44px; font-size: 1rem; }
    .help-fab { bottom: 70px; width: 44px; height: 44px; font-size: 1rem; }
    .glossary-modal { padding: 0; }
    .glossary-content { max-width: 100%; max-height: 100vh; border-radius: 0; height: 100%; }
    .glossary-header { padding: 16px; padding-top: max(16px, env(safe-area-inset-top)); }
    .glossary-region-btn { padding: 6px 12px; font-size: 0.8rem; }
    .glossary-regions { padding: 10px 16px; gap: 6px; }
    .glossary-body { padding: 16px; }
    .search-help-modal { padding: 0; }
    .search-help-content { max-width: 100%; max-height: 100vh; border-radius: 0; height: 100%; }
    .search-help-header { padding: 16px; padding-top: max(16px, env(safe-area-inset-top)); }
    .search-help-body { padding: 16px; }
    .search-help-section { margin-bottom: 20px; }
    .search-example { padding: 10px; }
    .search-example .query { font-size: 0.8rem; padding: 5px 8px; }
    .modal-overlay { padding: 0; align-items: stretch; }
    .modal { width: 100%; max-width: 100%; min-height: 100vh; border-radius: 0; }
    .modal-close { top: 12px; right: 12px; font-size: 32px; padding: 12px; }
    .modal-header { padding: 16px; padding-top: 48px; }
    .modal-header h2 { font-size: 1rem; }
    .modal-body { padding: 16px; }
    .modal-section { margin-bottom: 16px; }
    .modal-section p { font-size: 0.9rem; }
    .modal-actions { padding: 16px; gap: 10px; }

    /* Mobile Drawer Modal - slides up from bottom like native app */
    .modal-v2 {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        top: auto;
        max-height: 90vh;
        border-radius: 20px 20px 0 0;
        transform: translateY(100%);
        transition: transform 0.3s ease-out;
        margin: 0;
    }

    .modal-overlay.active .modal-v2,
    body.modal-open .modal-v2 {
        transform: translateY(0);
    }

    .modal-v2 .modal-header {
        border-radius: 20px 20px 0 0;
        padding-top: 24px;
    }

    /* Drawer handle indicator */
    .modal-v2 .modal-header::before {
        content: '';
        position: absolute;
        top: 8px;
        left: 50%;
        transform: translateX(-50%);
        width: 40px;
        height: 4px;
        background: rgba(255,255,255,0.3);
        border-radius: 2px;
    }

    .modal-v2 .modal-body {
        max-height: calc(90vh - 180px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .modal-v2 .modal-actions {
        border-radius: 0;
        padding-bottom: calc(16px + env(safe-area-inset-bottom));
    }
}

/* ==========================================================================
   NOTICE TYPE BADGE (Modal)
   ========================================================================== */

.modal-v2 .modal-header .notice-type-badge {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 4px 10px;
    border-radius: 4px;
    background: rgba(255,255,255,0.2);
    color: #fff;
    margin-bottom: 8px;
}

.modal-v2 .modal-header .notice-type-badge.awarded {
    background: rgba(255,255,255,0.3);
}

.modal-v2 .modal-header .notice-type-badge.presol {
    background: #fef08a;
    color: #713f12;
}

.modal-v2 .modal-header .notice-type-badge.sources {
    background: #e9d5ff;
    color: #6b21a8;
}

/* Solicitation Number */
.modal-v2 .solicitation-number {
    font-size: 0.8rem;
    color: rgba(255,255,255,0.8);
    margin-top: 8px;
}

.modal-v2 .solicitation-number .label {
    font-weight: 600;
}

/* Duration badge */
.modal-v2 .duration-badge {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    padding: 4px 12px;
    border-radius: 16px;
    font-size: 0.85rem;
    font-weight: 500;
}

/* ==========================================================================
   SET-ASIDE PROGRAM BADGES (Modal)
   ========================================================================== */

.modal-v2 .setaside-section .setaside-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.modal-v2 .setaside-badge {
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
}

.modal-v2 .setaside-badge.badge-8a {
    background: #dcfce7;
    color: #166534;
}

.modal-v2 .setaside-badge.badge-hubzone {
    background: #dbeafe;
    color: #1e40af;
}

.modal-v2 .setaside-badge.badge-sdvosb {
    background: #ffedd5;
    color: #9a3412;
}

.modal-v2 .setaside-badge.badge-wosb {
    background: #f3e8ff;
    color: #7e22ce;
}

.modal-v2 .setaside-badge.badge-edwosb {
    background: #fee2e2;
    color: #991b1b;
}

/* ==========================================================================
   AWARDEE / INCUMBENT SECTIONS
   ========================================================================== */

.modal-v2 .awardee-section .awardee-name,
.modal-v2 .incumbent-section .incumbent-name {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
    padding: 12px 16px;
    background: var(--bg-tertiary);
    border-radius: 8px;
    border-left: 4px solid var(--success-text);
}

.modal-v2 .incumbent-section .incumbent-name {
    border-left-color: #d29922;
}

/* ==========================================================================
   PLACE OF PERFORMANCE
   ========================================================================== */

.modal-v2 .pop-section p {
    font-size: 0.95rem;
    color: var(--text-secondary);
    margin: 0;
    padding: 12px 16px;
    background: var(--bg-tertiary);
    border-radius: 8px;
}

/* ==========================================================================
   PERFORMANCE PERIOD
   ========================================================================== */

.modal-v2 .performance-section .performance-dates {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
}

.modal-v2 .performance-section .performance-dates span {
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.modal-v2 .performance-section .performance-dates strong {
    color: var(--text-muted);
    font-weight: 500;
}

.modal-v2 .performance-section .duration-note {
    background: var(--bg-tertiary);
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* ==========================================================================
   ORGANIZATION HIERARCHY
   ========================================================================== */

.modal-v2 .org-hierarchy-section .org-hierarchy {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.modal-v2 .org-hierarchy-section .org-level {
    font-size: 0.9rem;
    color: var(--text-secondary);
    padding: 8px 12px;
    background: var(--bg-tertiary);
    border-radius: 6px;
    border-left: 3px solid var(--border-color);
}

.modal-v2 .org-hierarchy-section .org-level .label {
    color: var(--text-muted);
    font-weight: 500;
    margin-right: 4px;
}

/* ==========================================================================
   CONTRACT DETAIL PAGE (Full Page View)
   ========================================================================== */

/* View Original Link in Header */
.contract-detail .view-original-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    padding: 8px 16px;
    background: #2563eb;
    color: #fff;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.2s;
}

.contract-detail .view-original-link:hover {
    background: #1d4ed8;
}

.contract-detail .view-original-link::before {
    content: "";
    display: inline-block;
    width: 14px;
    height: 14px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='white' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}

/* Contract Description - Collapsible */
.contract-detail .contract-description .description-text {
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--text-secondary);
    white-space: pre-wrap;
    word-break: break-word;
}

.contract-detail .contract-description .description-text.collapsed {
    max-height: 200px;
    overflow: hidden;
    position: relative;
}

.contract-detail .contract-description .description-text.collapsed::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: linear-gradient(to bottom, transparent, var(--bg-secondary));
    pointer-events: none;
}

.contract-detail .contract-description .description-text.expanded {
    max-height: none;
    overflow: visible;
}

.contract-detail .contract-description .description-text.expanded::after {
    display: none;
}

.contract-detail .show-more-btn {
    display: inline-block;
    background: none;
    border: none;
    color: var(--border-focus);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    padding: 8px 0;
    margin-top: 8px;
}

.contract-detail .show-more-btn:hover {
    text-decoration: underline;
}

/* Hide show more button if description is short */
.contract-detail .show-more-btn.hidden {
    display: none;
}
/* ==========================================================================
   FEED - Feed page styles (list mode only)
   ========================================================================== */

/* Feed Page Header */
.feed-header {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.feed-header .header-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.feed-header .header-title {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
}

.feed-header .header-title h1 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 600;
}

.feed-header .header-controls {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.feed-header .header-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-left: auto;
}

.feed-header .sort-control {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.feed-header .sort-control label {
    font-size: 0.8rem;
    color: var(--text-muted);
    display: none;
}

.feed-header .sort-control select {
    font-size: 0.8rem;
    padding: 6px 10px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-input);
    color: var(--text-primary);
    cursor: pointer;
}

/* Export button icon-only style */
.feed-header .header-actions .btn-outline {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px 8px;
}

.feed-header .header-actions .btn-outline svg {
    flex-shrink: 0;
}

/* Feed Empty State */
.feed-empty {
    text-align: center;
    padding: 60px 24px;
}
.feed-empty h2 {
    font-size: 1.25rem;
    margin-bottom: 8px;
    color: var(--text-primary);
}
.feed-empty p {
    color: var(--text-muted);
    font-size: 0.95rem;
    margin-bottom: 24px;
}
.feed-empty .btn {
    display: inline-block;
}

/* Feed Loading */
.feed-loading {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px;
}
.spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--spinner-track);
    border-top-color: var(--spinner-fill);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}
@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Results Count */
.results-count {
    font-size: 0.85rem;
    color: var(--text-muted);
}

/* Unread Badge */
.unread-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    border-radius: 12px;
    animation: pulse-glow 2s ease-in-out infinite;
}

@keyframes pulse-glow {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.4);
    }
    50% {
        box-shadow: 0 0 0 6px rgba(59, 130, 246, 0);
    }
}

/* Viewed contract indicator */
.contract-card.viewed {
    opacity: 0.75;
}

.contract-card.viewed::after {
    content: '';
    position: absolute;
    top: 8px;
    right: 8px;
    width: 8px;
    height: 8px;
    background: var(--text-muted);
    border-radius: 50%;
}

/* No Keywords Alert */
.no-keywords-alert {
    background: rgba(245, 158, 11, 0.15);
    border: 1px solid rgba(245, 158, 11, 0.4);
    color: #d29922;
    padding: 16px 20px;
    border-radius: 8px;
    margin-bottom: 20px;
    font-size: 0.9rem;
}
.no-keywords-alert a {
    color: #d29922;
    font-weight: 600;
}

/* Time Range Tabs */
.time-range-tabs {
    display: flex;
    gap: 0;
    background: var(--bg-tertiary);
    border-radius: 8px;
    padding: 4px;
}
.time-tab {
    padding: 8px 16px;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-muted);
    text-decoration: none;
    border-radius: 6px;
    transition: all 0.15s ease;
}
.time-tab:hover {
    color: var(--text-primary);
    background: var(--bg-hover);
}
.time-tab.active {
    background: var(--bg-secondary);
    color: var(--text-primary);
    box-shadow: 0 1px 3px var(--card-shadow);
}

/* Empty State Actions */
.empty-state-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-top: 20px;
}

@media (max-width: 768px) {
    .feed-header .header-top {
        flex-wrap: wrap;
    }

    .feed-header .header-title {
        width: 100%;
        justify-content: space-between;
    }

    .feed-header .header-controls {
        width: 100%;
    }

    .time-range-tabs {
        flex: 1;
        justify-content: center;
    }
    .time-tab {
        padding: 8px 12px;
        font-size: 0.8rem;
        flex: 1;
        text-align: center;
    }

    .feed-header .header-actions {
        margin-left: 0;
        justify-content: flex-end;
    }

    .feed-header .sort-control select {
        max-width: 100px;
    }
}

@media (max-width: 480px) {
    .feed-header .header-controls {
        flex-direction: column;
        align-items: stretch;
    }

    .feed-header .header-actions {
        justify-content: space-between;
    }
}
/* ==========================================================================
   ACCOUNT - Account page, settings, pills, location cascade
   ========================================================================== */

/* Logout Button */
.logout-btn {
    background: var(--danger-text);
    color: #fff;
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.9rem;
    transition: background 0.2s;
}
.logout-btn:hover { background: #b91c1c; }

/* Keyword Input */
.keyword-input-row {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}
.keyword-input-row input {
    flex: 1;
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 0.9rem;
    background: var(--bg-input);
    color: var(--text-primary);
}
.keyword-input-row button {
    padding: 10px 16px;
    background: var(--btn-primary-bg);
    color: var(--btn-primary-text);
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
}
.keyword-input-row button:hover { background: var(--btn-primary-hover); }

/* Pills (Keywords/Tags) */
.pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}
.pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 16px;
    font-size: 0.85rem;
    font-weight: 500;
}
.pill.include {
    background: rgba(88, 166, 255, 0.15);
    color: var(--border-focus);
}
.pill.exclude {
    background: var(--danger-bg);
    color: var(--danger-text);
}
.pill .remove-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    opacity: 0.6;
    padding: 0;
    color: inherit;
}
.pill .remove-btn:hover { opacity: 1; }

/* Location Cascade */
.location-cascade {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    flex-wrap: wrap;
}
.location-cascade .loc-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.location-cascade .loc-group label {
    font-size: 0.75rem;
    color: var(--text-muted);
}
.location-cascade select {
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 0.9rem;
    min-width: 150px;
    background: var(--bg-input);
    color: var(--text-primary);
}
.location-cascade button {
    padding: 10px 16px;
    background: var(--btn-primary-bg);
    color: var(--btn-primary-text);
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    align-self: flex-end;
}
.location-cascade button:hover { background: var(--btn-primary-hover); }

/* Location Pills */
.location-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}
.location-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--success-bg);
    color: var(--success-text);
    border-radius: 16px;
    font-size: 0.85rem;
    font-weight: 500;
}
.location-pill .remove-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    opacity: 0.6;
    padding: 0;
    color: inherit;
}
.location-pill .remove-btn:hover { opacity: 1; }

/* Settings Sections */
.settings-section {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
}
.settings-section h3 {
    font-size: 0.9rem;
    font-weight: 700;
    margin-bottom: 16px;
    color: var(--text-primary);
}
.settings-section:last-child { margin-bottom: 0; }

/* Notification Preferences */
.notification-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--border-color);
}
.notification-row:last-child { border-bottom: none; }
.notification-row .label { font-size: 0.9rem; color: var(--text-secondary); }
.notification-row .description { font-size: 0.8rem; color: var(--text-muted); margin-top: 2px; }

/* Toggle Switch */
.toggle-switch {
    position: relative;
    width: 44px;
    height: 24px;
}
.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}
.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--border-color);
    transition: .3s;
    border-radius: 24px;
}
.toggle-slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: var(--bg-secondary);
    transition: .3s;
    border-radius: 50%;
}
.toggle-switch input:checked + .toggle-slider { background-color: var(--success-text); }
.toggle-switch input:checked + .toggle-slider:before { transform: translateX(20px); }

/* Account Stats */
.account-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}
.account-stat {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 16px;
    text-align: center;
}
.account-stat .value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
}
.account-stat .label {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    margin-top: 4px;
}

/* Subscription Card */
.subscription-card {
    background: linear-gradient(135deg, var(--nav-bg) 0%, #333 100%);
    color: var(--nav-text);
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 24px;
}
.subscription-card h3 {
    font-size: 0.8rem;
    text-transform: uppercase;
    opacity: 0.7;
    margin-bottom: 8px;
}
.subscription-card .plan-name {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 4px;
}
.subscription-card .plan-price {
    font-size: 0.9rem;
    opacity: 0.8;
    margin-bottom: 16px;
}
.subscription-card .plan-features {
    list-style: none;
    font-size: 0.85rem;
    opacity: 0.9;
}
.subscription-card .plan-features li {
    padding: 4px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}
.subscription-card .plan-features li::before {
    content: "✓";
    color: var(--success-text);
}

/* Account Responsive */
@media (max-width: 480px) {
    .pills { gap: 6px; }
    .pill { padding: 5px 10px; font-size: 0.8rem; }
    .location-cascade { flex-direction: column; }
    .location-cascade .loc-group { width: 100%; }
    .location-cascade select { width: 100%; min-width: unset; }
    .location-cascade button { width: 100%; }
    .keyword-input-row { flex-direction: column; }
    .keyword-input-row input { width: 100%; }
    .keyword-input-row button { width: 100%; }
    .settings-section { padding: 16px; }
    .account-stats { grid-template-columns: 1fr 1fr; gap: 12px; }
    .account-stat { padding: 12px; }
    .account-stat .value { font-size: 1.25rem; }
}

/* ==========================================================================
   BILLING & INVOICES
   ========================================================================== */

/* Payment Method Display */
.payment-method-display {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* Invoice List */
.invoice-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.invoice-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    gap: 16px;
}

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

.invoice-date {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-primary);
}

.invoice-number {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-family: 'Roboto Mono', monospace;
}

.invoice-amount {
    display: flex;
    align-items: center;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
}

.invoice-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.btn-sm {
    padding: 6px 12px;
    font-size: 0.75rem;
}

.btn-sm svg {
    vertical-align: middle;
    margin-right: 4px;
}

.btn-outline {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    padding: 8px 16px;
    border-radius: 6px;
    font-weight: 500;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.btn-outline:hover {
    border-color: var(--text-muted);
    background: var(--bg-hover);
}

/* Responsive */
@media (max-width: 600px) {
    .invoice-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .invoice-amount {
        width: 100%;
    }

    .invoice-actions {
        width: 100%;
    }

    .invoice-actions .btn-sm {
        flex: 1;
        text-align: center;
        justify-content: center;
    }
}
/* ==========================================================================
   UTILITIES - Loading, skeleton, toast, alerts, and utility classes
   ========================================================================== */

/* Loading Spinner */
.loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px;
    color: var(--text-muted);
}
.loading::after {
    content: '';
    width: 24px;
    height: 24px;
    border: 2px solid var(--spinner-track);
    border-top-color: var(--spinner-fill);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin-left: 12px;
}
@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Skeleton Loading */
.skeleton {
    background: linear-gradient(90deg, var(--bg-tertiary) 25%, var(--border-color) 50%, var(--bg-tertiary) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: 4px;
}
@keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
.skeleton-card {
    background: var(--card-bg);
    padding: 20px;
    border: 1px solid var(--card-border);
    border-radius: 8px;
    margin-bottom: 12px;
}
.skeleton-title {
    height: 20px;
    width: 70%;
    margin-bottom: 12px;
}
.skeleton-text {
    height: 14px;
    width: 100%;
    margin-bottom: 8px;
}
.skeleton-text.short { width: 40%; }
.skeleton-text.medium { width: 60%; }
.skeleton-meta {
    display: flex;
    gap: 12px;
    margin-top: 16px;
}
.skeleton-badge {
    height: 20px;
    width: 60px;
    border-radius: 10px;
}

/* Toast Notifications */
.toast-container {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
}
.toast {
    background: var(--nav-bg);
    color: var(--nav-text);
    padding: 12px 20px;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 500;
    box-shadow: 0 4px 12px var(--card-shadow);
    animation: toastIn 0.3s ease;
    pointer-events: auto;
}
.toast.success { background: var(--success-text); }
.toast.error { background: #dc2626; }
.toast.warning { background: #d97706; }
.toast.info { background: #2563eb; }
.toast.hiding {
    animation: toastOut 0.3s ease forwards;
}
@keyframes toastIn {
    from { transform: translateY(100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}
@keyframes toastOut {
    from { transform: translateY(0); opacity: 1; }
    to { transform: translateY(100%); opacity: 0; }
}
@media (max-width: 480px) {
    .toast-container { bottom: 80px; left: 16px; right: 16px; transform: none; }
    .toast { width: 100%; text-align: center; }
}

/* Alerts */
.alert {
    padding: 12px 16px;
    margin-bottom: 20px;
    font-size: 0.9rem;
    border-radius: 6px;
}
.alert-success { background: var(--success-bg); border: 1px solid var(--success-text); color: var(--success-text); }
.alert-error { background: var(--danger-bg); border: 1px solid var(--danger-text); color: var(--danger-text); }
.alert-warning { background: rgba(245, 158, 11, 0.15); border: 1px solid #d97706; color: #d29922; }
.alert-info { background: rgba(88, 166, 255, 0.15); border: 1px solid var(--border-focus); color: var(--border-focus); }

/* Empty State */
.empty {
    color: var(--text-muted);
    padding: 48px 24px;
    text-align: center;
    background: var(--bg-tertiary);
    border-radius: 8px;
}
.empty-icon {
    font-size: 3rem;
    margin-bottom: 16px;
    opacity: 0.5;
}
.empty h3 {
    font-size: 1.1rem;
    color: var(--text-primary);
    margin-bottom: 8px;
}
.empty p {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-bottom: 16px;
}

/* Progress Bar */
.progress-bar {
    height: 4px;
    background: var(--border-color);
    border-radius: 2px;
    overflow: hidden;
}
.progress-bar .progress {
    height: 100%;
    background: var(--text-primary);
    transition: width 0.3s ease;
}
.progress-bar.success .progress { background: var(--success-text); }
.progress-bar.warning .progress { background: #d97706; }
.progress-bar.error .progress { background: var(--danger-text); }

/* Badge */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
}
.badge.primary { background: var(--nav-bg); color: var(--nav-text); }
.badge.success { background: var(--success-bg); color: var(--success-text); }
.badge.warning { background: rgba(245, 158, 11, 0.15); color: #d29922; }
.badge.error { background: var(--danger-bg); color: var(--danger-text); }
.badge.info { background: rgba(88, 166, 255, 0.15); color: var(--border-focus); }

/* Tooltip */
.tooltip {
    position: relative;
    cursor: help;
}
.tooltip::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    padding: 6px 10px;
    background: var(--nav-bg);
    color: var(--nav-text);
    font-size: 0.75rem;
    white-space: nowrap;
    border-radius: 4px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, visibility 0.2s;
    margin-bottom: 4px;
}
.tooltip:hover::after { opacity: 1; visibility: visible; }

/* Divider */
.divider {
    height: 1px;
    background: var(--border-color);
    margin: 24px 0;
}
.divider.thick { height: 2px; }
.divider.dashed { border-top: 1px dashed var(--border-color); background: none; }

/* Visually Hidden (for accessibility) */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Text Utilities */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.text-muted { color: var(--text-muted); }
.text-success { color: var(--success-text); }
.text-error { color: var(--danger-text); }
.text-warning { color: #d29922; }

/* Spacing Utilities */
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 8px; }
.mt-2 { margin-top: 16px; }
.mt-3 { margin-top: 24px; }
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 8px; }
.mb-2 { margin-bottom: 16px; }
.mb-3 { margin-bottom: 24px; }

/* Responsive */
@media (max-width: 480px) {
    .empty { padding: 32px 16px; font-size: 0.9rem; }
    .alert { padding: 10px 14px; font-size: 0.85rem; }
}
/* ==========================================================================
   HTMX - Styles for HTMX-specific elements and behaviors
   ========================================================================== */

/* ==========================================================================
   HTMX INDICATORS
   ========================================================================== */

/* Default indicator - hidden until HTMX activates */
.htmx-indicator {
    display: none;
}
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
    display: flex;
}

/* Inline spinner for buttons */
.htmx-request .btn,
button.htmx-request {
    pointer-events: none;
    opacity: 0.7;
}
.htmx-request .btn::after,
button.htmx-request::after {
    content: '';
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin-left: 8px;
}

/* Spinner */
.spinner {
    width: 24px;
    height: 24px;
    border: 2px solid var(--spinner-track);
    border-top-color: var(--spinner-fill);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}
.spinner-small {
    width: 16px;
    height: 16px;
    border: 2px solid var(--spinner-track);
    border-top-color: var(--spinner-fill);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

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

/* Feed loading state */
.feed-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px;
    color: var(--text-muted);
    gap: 12px;
}

/* Search loading overlay */
.search-loading {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--spinner-fill) 0%, var(--text-muted) 50%, var(--spinner-fill) 100%);
    background-size: 200% 100%;
    animation: loading-bar 1s linear infinite;
    z-index: 9999;
}
@keyframes loading-bar {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Load more trigger (invisible until revealed) */
.load-more-trigger {
    height: 1px;
    margin: 20px 0;
}

/* Loading placeholder text */
.loading-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 24px;
    color: var(--text-muted);
    font-size: 0.9rem;
}

/* ==========================================================================
   AUTH PAGES
   ========================================================================== */

.auth-main {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: var(--bg-primary);
}

.auth-container {
    width: 100%;
    max-width: 400px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.auth-card {
    background: var(--card-bg);
    padding: 32px;
    border-radius: 12px;
    border: 1px solid var(--card-border);
    box-shadow: 0 4px 24px var(--card-shadow);
}
.auth-card h1 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 8px;
    text-align: center;
    color: var(--text-primary);
}
.auth-card .auth-subtitle {
    text-align: center;
    color: var(--text-muted);
    font-size: 0.9rem;
    margin-bottom: 24px;
}

.auth-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.auth-links {
    text-align: center;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--border-color);
    font-size: 0.9rem;
}
.auth-links a {
    color: var(--border-focus);
    text-decoration: none;
    font-weight: 500;
}
.auth-links a:hover { text-decoration: underline; }
.auth-links .separator {
    margin: 0 12px;
    color: var(--border-color);
}

.auth-footer {
    text-align: center;
}
.auth-footer a {
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.85rem;
}
.auth-footer a:hover { text-decoration: underline; }

.trial-info {
    margin-top: 24px;
    padding: 16px;
    background: var(--success-bg);
    border-radius: 8px;
    border: 1px solid var(--success-text);
}
.trial-info p {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--success-text);
    margin-bottom: 8px;
}
.trial-info ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.trial-info li {
    font-size: 0.85rem;
    color: var(--success-text);
    padding: 4px 0;
    padding-left: 20px;
    position: relative;
}
.trial-info li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--success-text);
    font-weight: 700;
}

/* ==========================================================================
   FORM ELEMENTS
   ========================================================================== */

.form-input,
.form-select {
    width: 100%;
    padding: 12px 16px;
    font-size: 0.95rem;
    font-family: 'Roboto Mono', monospace;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-input);
    color: var(--text-primary);
    transition: border-color 0.2s, box-shadow 0.2s;
}
.form-input:focus,
.form-select:focus {
    outline: none;
    border-color: var(--border-focus);
    box-shadow: 0 0 0 3px rgba(88, 166, 255, 0.2);
}
.form-input::placeholder { color: var(--text-muted); }

.form-group {
    margin-bottom: 16px;
}
.form-group label {
    display: block;
    font-size: 0.9rem;
    font-weight: 500;
    margin-bottom: 6px;
    color: var(--text-primary);
}
.form-group small {
    display: block;
    margin-top: 6px;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.form-label-bold {
    font-weight: 600;
    font-size: 0.95rem;
    margin-bottom: 12px;
    display: block;
}

.checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    font-size: 0.9rem;
}
.checkbox-label input[type="checkbox"] {
    margin-top: 2px;
    width: 18px;
    height: 18px;
    cursor: pointer;
}

/* Button block variant */
.btn-block {
    display: block;
    width: 100%;
    text-align: center;
}
.btn-large {
    padding: 14px 28px;
    font-size: 1rem;
}

/* ==========================================================================
   ACCOUNT PAGE SPECIFIC
   ========================================================================== */

.quick-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 24px;
    padding: 16px;
    background: var(--bg-tertiary);
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

.quick-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    text-decoration: none;
    color: var(--text-secondary);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    font-family: 'Roboto Mono', monospace;
}
.quick-action-btn:hover {
    background: var(--bg-hover);
    border-color: var(--text-muted);
}
.quick-action-btn.primary {
    background: var(--success-bg);
    border-color: var(--success-text);
    color: var(--success-text);
}
.quick-action-btn.primary:hover {
    background: var(--success-bg);
}

.form-section {
    background: var(--card-bg);
    padding: 24px;
    margin-bottom: 24px;
    border-radius: 12px;
    border: 1px solid var(--card-border);
}
.form-section h3 {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-primary);
}

.form-actions {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid var(--border-color);
}

.detail-grid {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 12px 24px;
    font-size: 0.9rem;
}
.detail-grid .label {
    color: var(--text-muted);
    font-weight: 500;
}
.detail-grid .value {
    color: var(--text-primary);
}

.tier-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}
.tier-badge.admin { background: var(--nav-bg); color: var(--nav-text); }
.tier-badge.pro { background: var(--success-text); color: #fff; }
.tier-badge.trial { background: var(--border-focus); color: #fff; }
.tier-badge.expired { background: var(--danger-text); color: #fff; }
.tier-badge.canceling { background: #d97706; color: #fff; margin-left: 8px; }

.subscription-actions {
    margin-top: 20px;
}
.subscription-actions .cancel-notice {
    color: #d29922;
    font-size: 0.9rem;
    margin-bottom: 12px;
}
.subscription-actions .notice {
    color: var(--text-muted);
    font-size: 0.85rem;
    margin-top: 8px;
}
.subscription-actions .error-notice {
    color: var(--danger-text);
    font-size: 0.9rem;
    margin-bottom: 12px;
}

.region-hint {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-weight: 400;
}

/* Radio Cards (for feed mode selection) */
.radio-cards {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}
.radio-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: var(--card-bg);
    border: 2px solid var(--border-color);
    border-radius: 8px;
    cursor: pointer;
    flex: 1;
    min-width: 160px;
    transition: border-color 0.2s, background 0.2s;
}
.radio-card:hover { border-color: var(--text-muted); }
.radio-card.selected,
.radio-card:has(input:checked) {
    border-color: var(--success-text);
    background: var(--success-bg);
}
.radio-card input[type="radio"] {
    width: 18px;
    height: 18px;
}
.radio-card-content { flex: 1; }
.radio-card-title {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--text-primary);
}
.radio-card-desc {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 2px;
}

/* Feed Preferences Section */
.feed-prefs-section {
    background: var(--success-bg);
    border: 2px solid var(--success-text);
}
.feed-prefs-section .section-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}
.feed-prefs-section .section-header h3 {
    margin: 0;
    border: none;
    padding: 0;
}
.feed-prefs-section .badge.personalized {
    background: var(--success-text);
    color: #fff;
    font-size: 0.65rem;
}
.feed-prefs-section .section-desc {
    color: var(--success-text);
    font-size: 0.85rem;
    margin-bottom: 24px;
    line-height: 1.5;
}

/* Keyword Pills */
.keyword-input-row {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}
.keyword-input-row input {
    flex: 1;
}
.keyword-input-row button {
    white-space: nowrap;
}

.pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
}
.pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--bg-tertiary);
    border-radius: 20px;
    font-size: 0.85rem;
    color: var(--text-secondary);
}
.pill button {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    font-size: 1rem;
    line-height: 1;
    padding: 0;
}
.pill button:hover { color: var(--danger-text); }
.pill.anti {
    background: var(--danger-bg);
    color: var(--danger-text);
}

/* ==========================================================================
   MODAL BODY OPEN STATE
   ========================================================================== */

body.modal-open {
    overflow: hidden;
}

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

@media (max-width: 768px) {
    .auth-card { padding: 24px; }
    .auth-card h1 { font-size: 1.25rem; }

    .quick-actions {
        padding: 12px;
    }
    .quick-action-btn {
        padding: 8px 12px;
        font-size: 0.8rem;
    }

    .form-section { padding: 16px; }

    .detail-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    .detail-grid .label {
        font-size: 0.8rem;
    }

    .radio-cards {
        flex-direction: column;
    }
    .radio-card {
        min-width: auto;
    }
}

@media (max-width: 480px) {
    .auth-main { padding: 16px; }
    .auth-card { padding: 20px; }

    .keyword-input-row {
        flex-direction: column;
    }
}
/**
 * Swipe Mode Styles
 * Tinder-style card swiping for feed and discovery pages
 */

/* ============================================
   MODE TOGGLE
   ============================================ */

.swipe-mode-toggle {
    display: flex;
    gap: 4px;
    background: var(--bg-tertiary);
    border-radius: 8px;
    padding: 3px;
    margin-left: auto;
}

.swipe-mode-toggle .mode-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 32px;
    border: none;
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
    color: var(--text-muted);
    transition: all 0.2s ease;
}

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

.swipe-mode-toggle .mode-btn.active {
    background: var(--bg-secondary);
    color: var(--text-primary);
    box-shadow: 0 1px 3px var(--card-shadow);
}

/* Page header layout adjustment - only for non-feed pages */
.page-header:not(.feed-header) {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.page-header:not(.feed-header) h1 {
    margin: 0;
}

.page-header:not(.feed-header) .results-count {
    color: var(--text-muted);
    font-size: 0.9rem;
}

/* Feed header toggle placement */
.feed-header .swipe-mode-toggle {
    margin-left: auto;
}

/* ============================================
   SWIPE DECK CONTAINER
   ============================================ */

.swipe-deck {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem;
    min-height: 500px;
}

.swipe-cards-stack {
    position: relative;
    width: 100%;
    max-width: 500px;
    height: 480px;
    margin-bottom: 1.5rem;
}

/* ============================================
   SWIPE CARD WRAPPER
   ============================================ */

.swipe-card-wrapper {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 480px;
    background: var(--card-bg);
    border-radius: 16px;
    box-shadow: 0 4px 20px var(--card-shadow);
    cursor: grab;
    user-select: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    will-change: transform;
    overflow: hidden;
}

.swipe-card-wrapper:active {
    cursor: grabbing;
}

.swipe-card-wrapper.dragging {
    transition: none;
    box-shadow: 0 10px 40px var(--card-shadow);
}

/* Card stacking effect */
.swipe-card-wrapper[data-index="0"] {
    z-index: 3;
}

.swipe-card-wrapper[data-index="1"] {
    z-index: 2;
    transform: translateX(-50%) scale(0.95) translateY(12px);
    opacity: 0.7;
    pointer-events: none;
}

.swipe-card-wrapper[data-index="2"] {
    z-index: 1;
    transform: translateX(-50%) scale(0.9) translateY(24px);
    opacity: 0.4;
    pointer-events: none;
}

/* Override card styles inside swipe wrapper */
.swipe-card-wrapper .contract-card {
    border: none;
    box-shadow: none;
    border-radius: 0;
    margin: 0;
    cursor: inherit;
}

.swipe-card-wrapper .contract-card:hover {
    transform: none;
    box-shadow: none;
}

/* Hide card actions in swipe mode - we use swipe gestures instead */
.swipe-card-wrapper .card-actions {
    display: none;
}

/* ============================================
   SWIPE INDICATORS
   ============================================ */

.swipe-indicator {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    padding: 12px 20px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 1.1rem;
    letter-spacing: 1px;
    opacity: 0;
    transition: opacity 0.15s ease;
    pointer-events: none;
    z-index: 10;
}

.swipe-indicator.left {
    left: 16px;
    background: var(--danger-bg);
    color: var(--danger-text);
    border: 3px solid var(--danger-text);
}

.swipe-indicator.right {
    right: 16px;
    background: var(--success-bg);
    color: var(--success-text);
    border: 3px solid var(--success-text);
}

.swipe-indicator.visible {
    opacity: 1;
}

/* ============================================
   EXIT ANIMATIONS
   ============================================ */

.swipe-card-wrapper.exit-left {
    animation: swipeExitLeft 0.3s ease-out forwards;
}

.swipe-card-wrapper.exit-right {
    animation: swipeExitRight 0.3s ease-out forwards;
}

@keyframes swipeExitLeft {
    to {
        transform: translateX(-150%) rotate(-30deg);
        opacity: 0;
    }
}

@keyframes swipeExitRight {
    to {
        transform: translateX(50%) rotate(30deg);
        opacity: 0;
    }
}

/* ============================================
   ACTION BUTTONS
   ============================================ */

.swipe-actions {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    align-items: center;
    margin-bottom: 1rem;
}

.swipe-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 2px solid;
    background: var(--card-bg);
    cursor: pointer;
    transition: all 0.2s ease;
}

.swipe-action-btn.dismiss {
    width: 60px;
    height: 60px;
    border-color: var(--danger-text);
    color: var(--danger-text);
}

.swipe-action-btn.dismiss:hover {
    background: var(--danger-text);
    color: #fff;
    transform: scale(1.1);
}

.swipe-action-btn.track {
    width: 60px;
    height: 60px;
    border-color: var(--success-text);
    color: var(--success-text);
}

.swipe-action-btn.track:hover {
    background: var(--success-text);
    color: #fff;
    transform: scale(1.1);
}

.swipe-action-btn.details {
    width: 48px;
    height: 48px;
    border-color: var(--border-focus);
    color: var(--border-focus);
}

.swipe-action-btn.details:hover {
    background: var(--border-focus);
    color: #fff;
    transform: scale(1.1);
}

/* ============================================
   SWIPE HINT
   ============================================ */

.swipe-hint {
    display: flex;
    justify-content: space-between;
    width: 100%;
    max-width: 300px;
    font-size: 0.75rem;
    color: var(--text-muted);
    padding: 0 1rem;
}

/* ============================================
   EMPTY STATE
   ============================================ */

.swipe-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 3rem 2rem;
    min-height: 350px;
}

.swipe-empty .empty-icon {
    color: var(--success-text);
    margin-bottom: 1.5rem;
}

.swipe-empty h3 {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0 0 0.5rem 0;
    color: var(--text-primary);
}

.swipe-empty p {
    color: var(--text-muted);
    margin: 0 0 1.5rem 0;
    max-width: 280px;
}

.swipe-empty .btn {
    padding: 10px 24px;
    background: var(--btn-primary-bg);
    color: var(--btn-primary-text);
    border: none;
    border-radius: 8px;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background 0.2s ease;
}

.swipe-empty .btn:hover {
    background: var(--btn-primary-hover);
}

/* ============================================
   BODY CLASS WHEN SWIPE MODE ACTIVE
   ============================================ */

body.swipe-mode-active .main {
    padding-bottom: 0;
}

/* Hide infinite scroll when in swipe mode */
body.swipe-mode-active #load-more,
body.swipe-mode-active .loading-more {
    display: none;
}

/* ============================================
   MOBILE RESPONSIVE
   ============================================ */

@media (max-width: 480px) {
    .swipe-deck {
        padding: 0.75rem;
    }

    .swipe-cards-stack {
        height: 420px;
    }

    .swipe-card-wrapper {
        max-width: 100%;
        border-radius: 12px;
    }

    .swipe-indicator {
        padding: 8px 14px;
        font-size: 0.9rem;
    }

    .swipe-actions {
        gap: 1rem;
    }

    .swipe-action-btn.dismiss,
    .swipe-action-btn.track {
        width: 52px;
        height: 52px;
    }

    .swipe-action-btn.details {
        width: 42px;
        height: 42px;
    }

    .swipe-hint {
        font-size: 0.7rem;
    }

    /* Adjust card content for mobile */
    .swipe-card-wrapper .contract-card {
        padding: 1rem;
    }

    .swipe-card-wrapper .title {
        font-size: 0.95rem;
    }

    .swipe-card-wrapper .description {
        font-size: 0.8rem;
        -webkit-line-clamp: 3;
    }

    .swipe-card-wrapper .meta {
        font-size: 0.75rem;
    }
}

/* Tablet */
@media (min-width: 481px) and (max-width: 768px) {
    .swipe-cards-stack {
        max-width: 460px;
        height: 450px;
    }

    .swipe-card-wrapper {
        max-width: 440px;
    }
}

/* Desktop - make toggle smaller and less prominent */
@media (min-width: 769px) {
    .swipe-mode-toggle {
        order: 10;
    }
}

/* Results header context (search page) */
.results-header .swipe-mode-toggle {
    margin-left: 1rem;
}

.results-controls .swipe-mode-toggle {
    margin-left: auto;
}