/* Depths of Darkness - Dark Theme CSS */

:root {
    /* Base colors - deeper, darker */
    --bg-primary: #080808;
    --bg-secondary: #0f0f0f;
    --bg-tertiary: #1a1a1a;
    --bg-card: #111111;
    --text-primary: #e8e8e8;
    --text-secondary: #a0a0a0;
    --text-muted: #606060;
    --border-color: #2a2a2a;

    /* Accent colors - vivid amber/orange */
    --accent-primary: #d4851c;
    --accent-secondary: #f5a623;
    --accent-success: #2ecc40;
    --accent-warning: #d4851c;
    --accent-danger: #dc3545;

    /* Discord brand */
    --discord-blurple: #5865f2;

    /* Tier colors - vivid and distinct */
    --tier-easy: #2ecc40;
    --tier-medium: #0099ff;
    --tier-hard: #d4851c;
    --tier-elite: #9b59b6;
    --tier-master: #e74c3c;
    --tier-grandmaster: #f39c12;

    /* Spacing */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;

    /* Border radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
}

/* Reset & Base */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
    background-color: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.6;
    min-height: 100vh;
}

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

a:hover {
    text-decoration: underline;
}

/* Navbar */
.navbar {
    background-color: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    padding: var(--spacing-md) var(--spacing-lg);
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 100;
}

.nav-brand a {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--accent-secondary);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.nav-brand a:hover {
    text-decoration: none;
    color: var(--accent-primary);
}

.nav-links {
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
}

.nav-links a {
    color: var(--text-secondary);
}

.nav-links a:hover {
    color: var(--text-primary);
}

.user-info {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.user-display-name {
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-sm);
    transition: background-color 0.2s;
}

.user-display-name:hover {
    background-color: var(--bg-tertiary);
}

.avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
}

/* Admin impersonation banner */
.impersonation-banner {
    position: fixed;
    top: 60px;
    left: 0;
    right: 0;
    z-index: 999;
    background: linear-gradient(90deg, var(--tier-elite), var(--tier-master));
    color: #fff;
    padding: var(--spacing-sm) var(--spacing-lg);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-md);
    font-size: 0.875rem;
    font-weight: 500;
}

/* Add padding to body when impersonation banner is shown */
body:has(.impersonation-banner) .container {
    padding-top: calc(var(--spacing-xl) + 40px);
}

.impersonation-banner strong {
    font-weight: 700;
}

.impersonation-banner .btn {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.3);
    color: #fff;
    padding: var(--spacing-xs) var(--spacing-sm);
}

.impersonation-banner .btn:hover {
    background: rgba(255, 255, 255, 0.3);
}

.admin-name {
    color: var(--tier-elite);
}

/* Container */
.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: var(--spacing-xl);
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

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

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

.btn-primary:hover {
    background-color: #4090e0;
}

.btn-success {
    background-color: var(--accent-success);
    border-color: var(--accent-success);
    color: var(--bg-primary);
}

.btn-danger {
    background-color: var(--accent-danger);
    border-color: var(--accent-danger);
    color: var(--bg-primary);
}

.btn-discord {
    background-color: var(--discord-blurple);
    border-color: var(--discord-blurple);
    color: white;
}

.btn-discord:hover {
    background-color: #4752c4;
}

.btn-help {
    background-color: #dc3545;
    border-color: #dc3545;
    color: white;
    width: 100%;
    text-align: center;
    font-size: 0.85rem;
}

.btn-help:hover {
    background-color: #c82333;
    color: white;
}

.help-section {
    margin-top: auto;
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--border-color);
}

.btn-sm {
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: 0.75rem;
}

.btn-lg {
    padding: var(--spacing-md) var(--spacing-xl);
    font-size: 1rem;
}

/* Cards */
.card {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
}

/* Tier Colors */
.tier-easy, .tier-badge.tier-easy { background-color: var(--tier-easy); color: var(--bg-primary); }
.tier-medium, .tier-badge.tier-medium { background-color: var(--tier-medium); color: var(--bg-primary); }
.tier-hard, .tier-badge.tier-hard { background-color: var(--tier-hard); color: var(--bg-primary); }
.tier-elite, .tier-badge.tier-elite { background-color: var(--tier-elite); color: var(--bg-primary); }
.tier-master, .tier-badge.tier-master { background-color: var(--tier-master); color: white; }
.tier-grandmaster, .tier-badge.tier-grandmaster { background-color: var(--tier-grandmaster); color: var(--bg-primary); }
.tier-boss, .tier-badge.tier-boss { background: linear-gradient(135deg, #8b0000 0%, #cc0000 100%); color: #fff; }

.tier-badge {
    display: inline-block;
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

/* Tile Cards - New Design */
.tile-card {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-top: 3px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--spacing-lg);
    display: flex;
    flex-direction: column;
    min-height: 200px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.tile-card:hover {
    border-color: #3a3a3a;
}

.tile-card.tier-easy { border-top-color: var(--tier-easy); }
.tile-card.tier-medium { border-top-color: var(--tier-medium); }
.tile-card.tier-hard { border-top-color: var(--tier-hard); }
.tile-card.tier-elite { border-top-color: var(--tier-elite); }
.tile-card.tier-master { border-top-color: var(--tier-master); }
.tile-card.tier-grandmaster { border-top-color: var(--tier-grandmaster); }

/* Zombie tiles */
.tile-card.zombie {
    background-color: rgba(248, 81, 73, 0.05);
    border-color: var(--accent-danger);
}

/* Grub tiles - threatening dark red with pulsing glow */
.tile-card.grub {
    background: linear-gradient(135deg, #1a0a0a 0%, #2a1010 100%);
    border-color: #8b0000;
    border-top-color: #8b0000 !important;
    box-shadow: 0 0 20px rgba(139, 0, 0, 0.3);
    animation: grub-pulse 3s ease-in-out infinite;
}

.tile-card.grub:hover {
    border-color: #a00000;
    box-shadow: 0 0 25px rgba(160, 0, 0, 0.4);
}

@keyframes grub-pulse {
    0%, 100% { box-shadow: 0 0 20px rgba(139, 0, 0, 0.3); }
    50% { box-shadow: 0 0 30px rgba(139, 0, 0, 0.5); }
}

.grub-badge {
    display: inline-block;
    padding: var(--spacing-xs) var(--spacing-sm);
    background-color: #8b0000;
    color: #ffcccc;
    border-radius: var(--radius-sm);
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    animation: grub-badge-pulse 2s ease-in-out infinite;
}

@keyframes grub-badge-pulse {
    0%, 100% { background-color: #8b0000; }
    50% { background-color: #a00000; }
}

.tile-card.grub .task-name {
    color: #ff6666;
}

.tile-card.grub .progress-fill.approved.grub-fill {
    background-color: #8b0000;
}

.tile-card.grub .progress-bar.grub-progress {
    background-color: #2a0000;
}

.btn-contribution.btn-grub {
    border-color: #8b0000;
    color: #ff6666;
}

.btn-contribution.btn-grub:hover {
    background-color: rgba(139, 0, 0, 0.3);
    border-color: #a00000;
    color: #ff8888;
}

.grub-reward {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    margin-top: var(--spacing-sm);
    padding: var(--spacing-sm);
    background-color: rgba(139, 0, 0, 0.2);
    border-radius: var(--radius-sm);
    border: 1px solid rgba(139, 0, 0, 0.3);
}

.grub-reward-label {
    font-size: 0.75rem;
    color: #ff9999;
    font-weight: 600;
}

.grub-reward-text {
    font-size: 0.75rem;
    color: #ff9999;
}

/* WOM (Wise Old Man) Tile Styles */
.tile-card.wom-tile {
    border-top-color: #17a2b8;
    border-top-width: 3px;
}

.wom-badge {
    background: linear-gradient(135deg, #17a2b8, #138496);
    color: white;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 0.15rem 0.4rem;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.wom-info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-top: var(--spacing-sm);
    padding: var(--spacing-sm);
    background-color: rgba(23, 162, 184, 0.1);
    border-radius: var(--radius-sm);
    border: 1px solid rgba(23, 162, 184, 0.3);
}

.wom-metric-type {
    font-size: 0.7rem;
    color: #17a2b8;
    font-weight: 600;
    text-transform: uppercase;
}

.wom-metrics {
    font-size: 0.75rem;
    color: var(--text-secondary);
    text-transform: capitalize;
}

.wom-progress .progress-bar.wom-progress-bar {
    background-color: rgba(23, 162, 184, 0.2);
}

.wom-progress .progress-fill.wom-fill {
    background-color: #17a2b8;
    transition: width 0.3s ease;
}

.wom-progress .progress-fill.wom-fill.complete {
    background-color: var(--accent-success);
}

.wom-progress .progress-count.complete {
    color: var(--accent-success);
    font-weight: 600;
}

.wom-sync-time {
    font-size: 0.7rem;
    color: var(--text-muted);
    margin-top: 0.25rem;
    text-align: right;
}

.wom-footer {
    display: flex;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}

.btn-wom-sync {
    background-color: transparent;
    border: 1px solid #17a2b8;
    color: #17a2b8;
    padding: 0.5rem 1rem;
    border-radius: var(--radius-md);
    cursor: pointer;
    font-size: 0.85rem;
    transition: background-color 0.2s, color 0.2s;
    flex: 1;
}

.btn-wom-sync:hover:not(:disabled) {
    background-color: rgba(23, 162, 184, 0.2);
    color: #1fc8e3;
}

.btn-wom-sync:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-wom-submit {
    flex: 1;
    background-color: var(--accent-success);
    border: 1px solid var(--accent-success);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: var(--radius-md);
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 600;
    transition: background-color 0.2s;
}

.btn-wom-submit:hover:not(:disabled) {
    background-color: #27ae60;
}

.btn-wom-submit:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* WOM Admin Dashboard Styles */
.wom-competition-settings {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
}

.wom-competition-input {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-md);
    align-items: flex-end;
    margin-bottom: var(--spacing-md);
}

.wom-competition-input label {
    font-size: 0.8rem;
    color: var(--text-secondary);
    flex-basis: 100%;
}

.wom-competition-info {
    margin-top: var(--spacing-sm);
}

.wom-competition-details {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: var(--spacing-sm);
}

.wom-competition-details p {
    margin: 0.25rem 0;
    font-size: 0.9rem;
}

.wom-config-grid {
    margin-bottom: var(--spacing-md);
}

.wom-add-config-form {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    margin-top: var(--spacing-md);
}

.wom-add-config-form h4 {
    margin: 0 0 var(--spacing-md) 0;
    font-size: 0.95rem;
    color: var(--text-primary);
}

.wom-form-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
}

.wom-form-col {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.wom-form-col label {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.wom-select {
    padding: 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 0.9rem;
    min-width: 150px;
}

.wom-metrics-select {
    min-width: 200px;
    min-height: 100px;
}

.wom-input {
    padding: 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 0.9rem;
    width: 100px;
}

/* WOM Task Search Autocomplete */
.wom-task-search-container {
    position: relative;
    flex: 1;
    min-width: 200px;
}

.wom-task-search-container label {
    display: block;
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-bottom: 0.25rem;
}

.wom-task-search-container input {
    width: 100%;
}

.wom-autocomplete-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: 200px;
    overflow-y: auto;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    z-index: 100;
    display: none;
}

.wom-autocomplete-dropdown.show {
    display: block;
}

.wom-autocomplete-item {
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    font-size: 0.9rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.wom-autocomplete-item:hover {
    background: var(--bg-tertiary);
}

.wom-autocomplete-item .tier-badge {
    font-size: 0.7rem;
    padding: 0.1rem 0.4rem;
}

/* WOM Metrics Tag Picker */
.wom-metrics-picker {
    flex: 1;
    min-width: 250px;
}

.wom-metrics-picker > label {
    display: block;
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
}

.wom-selected-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    min-height: 32px;
    padding: 0.25rem;
    margin-bottom: 0.5rem;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
}

.wom-metric-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.5rem;
    background: var(--accent-primary);
    color: white;
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
}

.wom-metric-tag .remove-tag {
    cursor: pointer;
    opacity: 0.7;
    font-weight: bold;
}

.wom-metric-tag .remove-tag:hover {
    opacity: 1;
}

.wom-available-metrics {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    max-height: 120px;
    overflow-y: auto;
    padding: 0.5rem;
    background: var(--bg-tertiary);
    border-radius: var(--radius-sm);
}

.wom-metric-option {
    padding: 0.2rem 0.5rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.15s;
}

.wom-metric-option:hover {
    background: var(--accent-primary);
    color: white;
    border-color: var(--accent-primary);
}

.wom-metric-option.selected {
    display: none;
}

/* Osto Ayak Boss Section */
.osto-ayak-section {
    margin-bottom: var(--spacing-xl);
    padding-bottom: var(--spacing-xl);
    border-bottom: 1px solid var(--border-color);
}

.osto-ayak-section-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: #b87333;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: var(--spacing-md);
}

.osto-ayak-card {
    background: var(--bg-card);
    border: 1px solid #5a3a2a;
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
}

.osto-ayak-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-md);
    padding-bottom: var(--spacing-md);
    border-bottom: 1px solid var(--border-color);
}

.osto-ayak-title {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.osto-ayak-title .boss-icon {
    font-size: 1.5rem;
}

.osto-ayak-title .boss-icon-img {
    width: 36px;
    height: 36px;
    object-fit: contain;
    opacity: 0.9;
}

.osto-ayak-title h3 {
    font-size: 1.1rem;
    font-weight: 600;
    color: #c9a067;
    margin: 0;
}

.osto-ayak-header .completion-count {
    font-size: 0.875rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.osto-ayak-body {
    margin-bottom: var(--spacing-md);
}

.osto-ayak-description {
    color: var(--text-secondary);
    font-size: 0.875rem;
    margin-bottom: var(--spacing-sm);
    font-style: italic;
}

.osto-ayak-depth-info {
    color: var(--color-boss);
    font-size: 0.8rem;
    margin-bottom: var(--spacing-md);
    text-align: center;
}

.mega-rare-select {
    margin-bottom: var(--spacing-md);
}

.mega-rare-select label {
    display: block;
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin-bottom: var(--spacing-xs);
}

.mega-rare-dropdown {
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-md);
    background-color: var(--bg-tertiary);
    border: 1px solid #4a0e0e;
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: 0.9rem;
}

.mega-rare-dropdown:focus {
    outline: none;
    border-color: #ff4444;
    box-shadow: 0 0 8px rgba(255, 0, 0, 0.3);
}

.pending-notice {
    background-color: rgba(255, 150, 0, 0.1);
    border: 1px solid rgba(255, 150, 0, 0.3);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    text-align: center;
    color: #ffaa00;
    font-size: 0.875rem;
}

.pending-notice .pending-icon {
    margin-right: var(--spacing-xs);
}

.all-rares-used {
    background-color: rgba(100, 100, 100, 0.1);
    border: 1px solid rgba(100, 100, 100, 0.3);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    text-align: center;
}

.all-rares-used p {
    color: var(--text-muted);
    font-size: 0.875rem;
    margin: 0;
}

.used-rares-display {
    padding: var(--spacing-sm) var(--spacing-md);
    background: rgba(0, 0, 0, 0.3);
    border-radius: var(--radius-md);
    border: 1px solid #3a0a0a;
}

.osto-ayak-footer {
    margin-top: var(--spacing-md);
    padding-top: var(--spacing-md);
    border-top: 1px solid #3a0a0a;
}

.osto-ayak-footer .used-rares-display {
    background: transparent;
    border: none;
    padding: 0;
}

.used-rares-label {
    display: block;
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--spacing-xs);
}

.used-rares-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
}

.used-rare-tag {
    display: inline-block;
    padding: 0.2rem 0.5rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.btn-boss {
    background: linear-gradient(135deg, #6b4423 0%, #8b5a2b 100%);
    border-color: #a0724a;
    color: #fff;
    font-weight: 500;
    width: 100%;
    padding: var(--spacing-md);
}

.btn-boss:hover {
    background: linear-gradient(135deg, #7b5433 0%, #9b6a3b 100%);
}

.btn-boss .btn-icon {
    font-size: 1rem;
}

.osto-ayak-footer {
    margin-top: var(--spacing-md);
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--border-color);
}

.used-rares-details summary {
    cursor: pointer;
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.used-rares-details summary:hover {
    color: var(--text-primary);
}

.used-rares-list {
    margin-top: var(--spacing-sm);
    padding-left: var(--spacing-lg);
    list-style-type: disc;
}

.used-rares-list li {
    color: var(--text-muted);
    font-size: 0.8rem;
    margin-bottom: var(--spacing-xs);
}

/* Osto Ayak Modal */
.osto-ayak-modal .modal-header {
    background: linear-gradient(135deg, #2d1212 0%, #1a0a0a 100%);
    border-bottom: 1px solid #4a0e0e;
}

.osto-ayak-modal .modal-header h2 {
    color: #ff6666;
}

.osto-ayak-warning {
    background-color: rgba(255, 100, 0, 0.1);
    border: 1px solid rgba(255, 100, 0, 0.3);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    color: #ff8800;
    font-size: 0.875rem;
    text-align: center;
    margin-bottom: var(--spacing-md);
}

/* Grubs Section */
.grubs-section {
    margin-bottom: var(--spacing-xl);
    padding-bottom: var(--spacing-xl);
    border-bottom: 1px solid var(--border-color);
}

.regular-tiles-section {
    margin-top: var(--spacing-lg);
}

.grubs-section-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: #ff6666;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: var(--spacing-md);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.grubs-section-title::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    background-color: #8b0000;
    border-radius: 50%;
    animation: grub-pulse 2s ease-in-out infinite;
}

.regular-section-title {
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: var(--spacing-md);
}

.tile-badges {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.zombie-badge {
    display: inline-block;
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    background-color: #b02a37;
    color: #fff;
}

.tile-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-md);
}

.points-badge {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    background-color: var(--bg-tertiary);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-sm);
}

.tile-body {
    flex: 1;
    margin-bottom: var(--spacing-md);
}

.task-name {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: var(--spacing-xs);
    color: #ffffff;
}

.task-description {
    color: var(--text-muted);
    font-size: 0.8rem;
    line-height: 1.4;
}

.tile-progress {
    margin-bottom: var(--spacing-md);
}

.progress-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-xs);
}

.progress-label {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.progress-count {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.progress-bar {
    height: 4px;
    background-color: var(--bg-tertiary);
    border-radius: 2px;
    overflow: visible;
    position: relative;
}

.progress-fill {
    height: 100%;
    transition: width 0.3s;
    position: absolute;
    top: 0;
    border-radius: 2px;
}

.progress-fill.approved {
    background-color: var(--accent-success);
    left: 0;
    z-index: 1;
}

.progress-fill.pending {
    background-color: var(--accent-warning);
    z-index: 0;
}

.pending-text {
    color: var(--accent-warning);
}

/* Tile Pending Submissions List */
.tile-pending-subs {
    margin-top: var(--spacing-sm);
    padding: var(--spacing-xs) var(--spacing-sm);
    background: rgba(255, 193, 7, 0.1);
    border: 1px solid rgba(255, 193, 7, 0.2);
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
}

.pending-subs-header {
    color: #ffc107;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.7rem;
    margin-bottom: var(--spacing-xs);
    letter-spacing: 0.05em;
}

.pending-sub-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: 2px 0;
    border-bottom: 1px solid rgba(255, 193, 7, 0.1);
}

.pending-sub-item:last-child {
    border-bottom: none;
}

.pending-sub-user {
    color: var(--text-primary);
    font-weight: 500;
}

.pending-sub-subtask {
    color: var(--text-secondary);
    font-size: 0.8rem;
    padding: 0.125rem 0.375rem;
    background: var(--bg-tertiary);
    border-radius: var(--radius-sm);
}

.pending-sub-value {
    color: #ffc107;
    font-weight: 600;
}

.pending-sub-time {
    color: var(--text-muted);
    font-size: 0.75rem;
    margin-left: auto;
}

.tile-footer {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

/* Add Contribution Button */
.btn-contribution {
    width: 100%;
    background-color: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    font-size: 0.875rem;
    transition: all 0.2s;
}

.btn-contribution:hover {
    background-color: var(--bg-tertiary);
    border-color: var(--accent-primary);
    color: var(--text-primary);
}

.btn-icon {
    font-size: 1rem;
    font-weight: 300;
}

/* Pending Status */
.pending-status {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-xs) 0;
}

.status-badge {
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-sm);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
}

.status-badge.status-pending {
    background-color: var(--accent-warning);
    color: var(--bg-primary);
}

.status-active { background-color: var(--bg-tertiary); color: var(--text-secondary); }
.status-in_progress { background-color: var(--accent-warning); color: var(--bg-primary); }
.status-pending_approval { background-color: var(--accent-primary); color: var(--bg-primary); }
.status-completed { background-color: var(--accent-success); color: var(--bg-primary); }

/* Delve Batch Container */
.delve-batch-container {
    margin-bottom: var(--spacing-xl);
}

.batch-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-lg);
}

.batch-title {
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin: 0;
}

.team-name {
    font-size: 0.9rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Hand Grid - New Layout */
.hand-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-md);
}

@media (max-width: 1200px) {
    .hand-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .hand-grid {
        grid-template-columns: 1fr;
    }
}

/* Path - The Path Downwards */
.path-container {
    background-color: transparent;
    padding: var(--spacing-xl) var(--spacing-lg);
    text-align: center;
    border-top: 1px solid var(--border-color);
    margin-top: var(--spacing-xl);
}

.path-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: var(--spacing-lg);
}

.path-icon {
    width: 56px;
    height: 56px;
    border: 2px solid var(--accent-secondary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--spacing-md);
    color: var(--accent-secondary);
}

.path-title {
    font-size: 1.25rem;
    font-weight: 400;
    color: var(--accent-secondary);
    font-family: Georgia, 'Times New Roman', serif;
    font-style: italic;
    letter-spacing: 0.1em;
    margin: 0 0 var(--spacing-xs) 0;
}

.depth-reached {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.path-empty-message {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin: var(--spacing-xl) 0;
}

.path-timeline {
    position: relative;
    padding: var(--spacing-lg) 0;
    min-height: 100px;
}

.timeline-line {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(to bottom, var(--border-color) 0%, transparent 100%);
    transform: translateX(-50%);
}

.next-tier-hint {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: var(--spacing-xl);
    opacity: 0.4;
}

.hint-icon {
    color: var(--text-muted);
    margin-bottom: var(--spacing-sm);
}

.hint-text {
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* Path Nodes (when there are completions) */
.path-node {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-left: 3px solid var(--border-color);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-sm);
    text-align: left;
    transition: border-color 0.2s;
}

.path-node:hover {
    border-color: #3a3a3a;
}

.path-node.tier-easy { border-left-color: var(--tier-easy); }
.path-node.tier-medium { border-left-color: var(--tier-medium); }
.path-node.tier-hard { border-left-color: var(--tier-hard); }
.path-node.tier-elite { border-left-color: var(--tier-elite); }
.path-node.tier-master { border-left-color: var(--tier-master); }
.path-node.tier-grandmaster { border-left-color: var(--tier-grandmaster); }
.path-node.tier-boss { border-left-color: #cc0000; }

.node-marker {
    display: none;
}

.node-content {
    flex: 1;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}

.node-task-name {
    font-weight: 500;
    color: var(--text-primary);
    font-size: 0.95rem;
}

.node-task-name.boss-name {
    color: #ff6666;
    text-shadow: 0 0 8px rgba(255, 0, 0, 0.3);
}

.node-time {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-left: auto;
}

.node-contributors {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: var(--text-secondary);
    width: 100%;
    margin-top: var(--spacing-xs);
}

.node-depth-badge {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--accent-secondary);
    min-width: 40px;
    text-align: right;
}


/* Odds Display */
.odds-display {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
}

.odds-display h3 {
    margin-bottom: var(--spacing-md);
}

.depth-value {
    color: var(--accent-primary);
    font-size: 1.5rem;
}

.odds-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
}

.odds-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--spacing-sm);
    background-color: var(--bg-tertiary);
    border-radius: var(--radius-md);
}

.tier-name {
    font-size: 0.75rem;
    text-transform: capitalize;
    margin-bottom: var(--spacing-xs);
}

.tier-prob {
    font-size: 1.25rem;
    font-weight: 700;
}

.unlock-hint {
    color: var(--text-muted);
    font-size: 0.875rem;
    font-style: italic;
}

.max-depth {
    color: var(--accent-success);
    font-weight: 500;
}

/* Dashboard - New Layout with Sidebar */
.dashboard-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: var(--spacing-xl);
    max-width: 1600px;
    margin: 0 auto;
    padding: var(--spacing-lg);
    min-height: calc(100vh - 80px);
}

.dashboard-sidebar {
    position: sticky;
    top: 80px;
    height: fit-content;
    max-height: calc(100vh - 100px);
    overflow-y: auto;
}

.sidebar-content {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--spacing-lg);
}

.sidebar-section {
    margin-bottom: var(--spacing-lg);
    padding-bottom: var(--spacing-lg);
    border-bottom: 1px solid var(--border-color);
}

.sidebar-section:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.sidebar-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--accent-secondary);
    margin-bottom: var(--spacing-md);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.sidebar-subtitle {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: var(--spacing-md);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

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

.depth-label {
    color: var(--text-muted);
    font-size: 0.85rem;
}

.depth-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--accent-secondary);
}

/* Odds Bars */
.odds-bars {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.odds-row {
    display: grid;
    grid-template-columns: 70px 1fr 40px;
    align-items: center;
    gap: var(--spacing-sm);
}

.odds-tier {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: capitalize;
}

.tier-text-easy { color: var(--tier-easy); }
.tier-text-medium { color: var(--tier-medium); }
.tier-text-hard { color: var(--tier-hard); }
.tier-text-elite { color: var(--tier-elite); }
.tier-text-master { color: var(--tier-master); }
.tier-text-grandmaster { color: var(--tier-grandmaster); }

.odds-bar-container {
    height: 8px;
    background-color: var(--bg-tertiary);
    border-radius: 4px;
    overflow: hidden;
}

.odds-bar {
    height: 100%;
    border-radius: 4px;
    transition: width 0.3s ease;
}

.tier-bg-easy { background-color: var(--tier-easy); }
.tier-bg-medium { background-color: var(--tier-medium); }
.tier-bg-hard { background-color: var(--tier-hard); }
.tier-bg-elite { background-color: var(--tier-elite); }
.tier-bg-master { background-color: var(--tier-master); }
.tier-bg-grandmaster { background-color: var(--tier-grandmaster); }

.odds-percent {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-align: right;
}

/* Sidebar Flavor Text */
.flavor-section {
    border-bottom: none;
}

.sidebar-flavor {
    font-family: Georgia, 'Times New Roman', serif;
    font-style: italic;
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--text-muted);
    margin: 0;
}

/* Hand Size Display */
.hand-size-display {
    display: flex;
    align-items: baseline;
    gap: var(--spacing-xs);
    margin-bottom: var(--spacing-sm);
}

.hand-size-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--accent-secondary);
}

.hand-size-max {
    font-size: 1rem;
    color: var(--text-muted);
}

.hand-size-bar {
    height: 6px;
    background-color: var(--bg-tertiary);
    border-radius: 3px;
    overflow: hidden;
}

.hand-size-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
    border-radius: 3px;
    transition: width 0.3s ease;
}

/* Tier Unlock Display */
.tier-unlocks {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.tier-unlock-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-sm);
    transition: background-color 0.2s;
}

.tier-unlock-item.unlocked {
    background-color: rgba(46, 204, 64, 0.1);
}

.tier-unlock-item.locked {
    background-color: var(--bg-tertiary);
    opacity: 0.5;
}

.tier-unlock-item .tier-icon {
    font-size: 0.85rem;
    width: 20px;
    text-align: center;
}

.tier-unlock-item.unlocked .tier-icon {
    color: var(--accent-success);
}

.tier-unlock-item.locked .tier-icon {
    color: var(--text-muted);
}

.tier-unlock-item .tier-name {
    font-size: 0.85rem;
    font-weight: 500;
}

/* Dashboard Main Content */
.dashboard-main {
    min-width: 0;
}

.section-title {
    font-size: 1.25rem;
    font-weight: 400;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: var(--spacing-lg);
}

.hand-section {
    margin-bottom: var(--spacing-xl);
}

.path-section {
    max-width: 800px;
    margin: 0 auto;
}

/* Responsive - stack on smaller screens */
@media (max-width: 900px) {
    .dashboard-layout {
        grid-template-columns: 1fr;
    }

    .dashboard-sidebar {
        position: static;
        max-height: none;
    }
}

/* Modal */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.modal-content {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--spacing-xl);
    max-width: 500px;
    width: 90%;
}

.modal-content.modal-sm {
    max-width: 350px;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-lg);
}

.modal-close {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 1.5rem;
    cursor: pointer;
}

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

.modal-actions {
    display: flex;
    gap: var(--spacing-sm);
    justify-content: flex-end;
    margin-top: var(--spacing-lg);
}

.wom-edit-modal-content h3 {
    margin: 0 0 var(--spacing-md) 0;
    color: var(--text-primary);
}

.task-name-label {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--spacing-lg);
    padding-bottom: var(--spacing-md);
    border-bottom: 1px solid var(--border-color);
}

/* Forms */
.form-group {
    margin-bottom: var(--spacing-md);
}

.form-group label {
    display: block;
    margin-bottom: var(--spacing-xs);
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.form-group input,
.form-group textarea,
.form-group select {
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-md);
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: 0.875rem;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--accent-primary);
}

.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-lg);
}

/* Login Page */
.login-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 80px);
}

.login-card {
    text-align: center;
    padding: var(--spacing-xl);
    max-width: 400px;
}

.login-icon {
    margin-bottom: var(--spacing-lg);
}

.login-boss-img {
    width: 120px;
    height: 120px;
    filter: drop-shadow(0 0 20px rgba(184, 115, 51, 0.4));
    animation: login-pulse 3s ease-in-out infinite;
}

@keyframes login-pulse {
    0%, 100% { filter: drop-shadow(0 0 20px rgba(184, 115, 51, 0.3)); }
    50% { filter: drop-shadow(0 0 35px rgba(184, 115, 51, 0.6)); }
}

.login-card h1 {
    font-size: 2.5rem;
    margin-bottom: var(--spacing-sm);
}

.login-card .tagline {
    color: #c9a067;
    font-size: 1.1rem;
    font-style: italic;
    margin-bottom: var(--spacing-lg);
}

.login-description {
    margin-bottom: var(--spacing-xl);
    color: var(--text-secondary);
    line-height: 1.6;
}

.login-description p {
    margin: 0 0 var(--spacing-xs) 0;
}

.discord-icon {
    margin-right: var(--spacing-sm);
}

/* Leaderboard */
.leaderboard-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-xl);
}

.leaderboard-header-row h1 {
    margin-bottom: 0;
}

.admin-toggle {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.toggle-label {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    cursor: pointer;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.toggle-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--accent-primary);
    cursor: pointer;
}

.scores-hidden-notice {
    text-align: center;
    color: var(--text-muted);
    font-style: italic;
    margin-bottom: var(--spacing-lg);
}

.leaderboard-page h1 {
    margin-bottom: var(--spacing-xl);
}

.leaderboard-table {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.leaderboard-header,
.leaderboard-row {
    display: grid;
    grid-template-columns: 80px 1fr 100px;
    padding: var(--spacing-md) var(--spacing-lg);
}

.leaderboard-header {
    background-color: var(--bg-tertiary);
    font-weight: 600;
    color: var(--text-secondary);
}

.leaderboard-row {
    border-bottom: 1px solid var(--border-color);
}

.leaderboard-row:last-child {
    border-bottom: none;
}

.leaderboard-row.current-team {
    background-color: rgba(88, 166, 255, 0.1);
}

.medal {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    font-weight: 700;
}

.medal.gold { background-color: #ffd700; color: #000; }
.medal.silver { background-color: #c0c0c0; color: #000; }
.medal.bronze { background-color: #cd7f32; color: #000; }

/* Teams Page */
.teams-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: var(--spacing-lg);
}

.team-card {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
}

.team-card h3 {
    margin-bottom: var(--spacing-sm);
}

.team-depth {
    color: var(--text-secondary);
    margin-bottom: var(--spacing-md);
}

.your-team-badge {
    display: inline-block;
    padding: var(--spacing-xs) var(--spacing-sm);
    background-color: var(--accent-success);
    color: var(--bg-primary);
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 600;
}

.current-team-banner,
.no-team-banner {
    padding: var(--spacing-md) var(--spacing-lg);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-xl);
}

.current-team-banner {
    background-color: rgba(63, 185, 80, 0.1);
    border: 1px solid var(--accent-success);
}

.no-team-banner {
    background-color: rgba(210, 153, 34, 0.1);
    border: 1px solid var(--accent-warning);
    color: var(--text-secondary);
}

a.team-card {
    display: block;
    text-decoration: none;
    color: var(--text-primary);
    transition: transform 0.2s, border-color 0.2s;
}

a.team-card:hover {
    transform: translateY(-2px);
    border-color: var(--accent-primary);
    text-decoration: none;
}

.team-stats-row {
    display: flex;
    gap: var(--spacing-lg);
    margin-top: var(--spacing-sm);
}

.team-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.team-stat .stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--accent-primary);
}

.team-stat .stat-label {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.current-team-info {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Admin Container and Navigation */
.admin-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: var(--spacing-lg);
}

.admin-nav {
    display: flex;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-xl);
    padding: var(--spacing-sm);
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
}

.admin-nav-link {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-sm) var(--spacing-md);
    color: var(--text-secondary);
    text-decoration: none;
    font-weight: 500;
    border-radius: var(--radius-sm);
    transition: background-color 0.2s, color 0.2s;
}

.admin-nav-link:hover {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
}

.admin-nav-link.active {
    background-color: var(--accent-primary);
    color: white;
}

.admin-nav-link .nav-badge {
    background: rgba(255, 255, 255, 0.2);
    padding: 2px 6px;
    border-radius: 10px;
    font-size: 0.75rem;
    font-weight: 600;
}

.admin-nav-link.active .nav-badge {
    background: rgba(255, 255, 255, 0.3);
}

.admin-content h1 {
    margin-bottom: var(--spacing-xl);
}

/* Admin Approvals Page */
.admin-approvals h1 {
    margin-bottom: var(--spacing-lg);
}

.queue-filters {
    display: flex;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-lg);
}

.filter-btn {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

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

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

.filter-btn .filter-count {
    background: rgba(255, 255, 255, 0.2);
    padding: 2px 6px;
    border-radius: 10px;
    font-size: 0.75rem;
}

.filter-btn.active .filter-count {
    background: rgba(255, 255, 255, 0.3);
}

/* Unified Queue */
.unified-queue {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.queue-item .type-badge {
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.type-badge.type-tile {
    background: #4a6a8a;
    color: white;
}

.type-badge.type-waystone {
    background: #5a7a8a;
    color: white;
}

.type-badge.type-osto-ayak {
    background: #8a4a6a;
    color: white;
}

.queue-item .team-badge {
    background: var(--bg-tertiary);
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.queue-item .queue-time {
    margin-left: auto;
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* Admin */
.admin-dashboard {
    max-width: 1400px;
}

.admin-dashboard h1,
.admin-import h1 {
    margin-bottom: var(--spacing-xl);
}

/* Audit Page */
.audit-page {
    max-width: 1400px;
    margin: 0 auto;
    padding: var(--spacing-lg);
}

.audit-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-lg);
}

.audit-header h1 {
    margin: 0;
}

.audit-filters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
    padding: var(--spacing-md);
    background-color: var(--bg-secondary);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
}

.audit-filters .filter-group {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.audit-filters label {
    font-weight: 500;
    white-space: nowrap;
}

.audit-filters select {
    padding: var(--spacing-xs) var(--spacing-sm);
    background-color: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    min-width: 150px;
}

.audit-table-container {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    max-height: 600px;
    overflow: auto;
}

.audit-table {
    width: 100%;
}

.audit-table th {
    padding: var(--spacing-sm);
    white-space: nowrap;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.audit-table td {
    padding: var(--spacing-sm) var(--spacing-xs);
    vertical-align: middle;
    white-space: nowrap;
}

.audit-table .audit-date {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.audit-table .audit-task {
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.audit-table .audit-notes {
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.8rem;
    color: var(--text-secondary);
    cursor: help;
}

.status-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

.status-badge.status-approved {
    background-color: rgba(34, 197, 94, 0.2);
    color: #22c55e;
}

.status-badge.status-rejected {
    background-color: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

.audit-summary {
    margin-top: var(--spacing-md);
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.screenshot-link {
    color: var(--accent-primary);
    text-decoration: none;
}

.screenshot-link:hover {
    text-decoration: underline;
}

.admin-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-lg);
}

@media (max-width: 1100px) {
    .admin-grid {
        grid-template-columns: 1fr;
    }
}

.admin-section {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    min-width: 0; /* Prevent grid blowout */
    overflow: hidden;
}

.admin-section .admin-table {
    margin: 0 calc(-1 * var(--spacing-lg));
    width: calc(100% + 2 * var(--spacing-lg));
}

.admin-section .admin-table th:first-child,
.admin-section .admin-table td:first-child {
    padding-left: var(--spacing-lg);
}

.admin-section .admin-table th:last-child,
.admin-section .admin-table td:last-child {
    padding-right: var(--spacing-lg);
}

.queue-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.queue-item {
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
}

.queue-item-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
}

.queue-item-header .task-name {
    color: #ffffff;
    font-size: 1rem;
}

.queue-item-details {
    color: var(--text-secondary);
    font-size: 0.875rem;
    margin-bottom: var(--spacing-md);
}

.queue-item-details p {
    margin-bottom: var(--spacing-xs);
}

.queue-item-approval {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
    padding: var(--spacing-sm);
    background-color: var(--bg-secondary);
    border-radius: var(--radius-sm);
}

.queue-item-approval label {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.approve-value-input {
    width: 70px;
    padding: var(--spacing-xs) var(--spacing-sm);
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 0.9rem;
    text-align: center;
}

.approve-value-input:focus {
    outline: none;
    border-color: var(--accent-primary);
}

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

.queue-item-actions {
    display: flex;
    gap: var(--spacing-sm);
}

.queue-item-edit {
    margin-top: var(--spacing-md);
    padding: var(--spacing-md);
    background-color: var(--bg-tertiary);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
}

.edit-form-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
}

.edit-form-row label {
    min-width: 80px;
    font-weight: 500;
}

.edit-input,
.edit-select {
    flex: 1;
    padding: var(--spacing-xs) var(--spacing-sm);
    background-color: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
}

.edit-input:focus,
.edit-select:focus {
    outline: none;
    border-color: var(--accent-primary);
}

.edit-form-actions {
    display: flex;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-sm);
}

.empty-queue {
    color: var(--text-muted);
    text-align: center;
    padding: var(--spacing-xl);
}

/* Admin Tables */
.table-wrapper {
    overflow-x: auto;
    margin: 0 calc(-1 * var(--spacing-lg));
    padding: 0 var(--spacing-lg);
}

.admin-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.admin-table th,
.admin-table td {
    padding: var(--spacing-sm) var(--spacing-md);
    text-align: left;
    white-space: nowrap;
}

.admin-table th {
    background-color: var(--bg-tertiary);
    font-weight: 600;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
}

.admin-table td {
    border-top: 1px solid var(--border-color);
    vertical-align: middle;
}

.admin-table tbody tr:hover {
    background-color: rgba(255,255,255,0.02);
}

.admin-table a {
    color: var(--accent-primary);
}

.admin-table a:hover {
    text-decoration: underline;
}

.empty-cell {
    text-align: center;
    color: var(--text-muted);
    font-style: italic;
    padding: var(--spacing-lg) !important;
}

/* Queue Container - Scrollable */
.queue-container {
    max-height: 400px;
    overflow-y: auto;
    margin: 0 calc(-1 * var(--spacing-lg));
    padding: 0 var(--spacing-lg);
}

/* Tasks Table Container - Scrollable */
.tasks-table-container {
    max-height: 400px;
    overflow-y: auto;
    margin: 0 calc(-1 * var(--spacing-lg));
}

.tasks-table-container .admin-table {
    margin: 0;
    width: 100%;
}

.tasks-table-container .admin-table th:first-child,
.tasks-table-container .admin-table td:first-child {
    padding-left: var(--spacing-lg);
}

.tasks-table-container .admin-table th:last-child,
.tasks-table-container .admin-table td:last-child {
    padding-right: var(--spacing-lg);
}

/* Tasks table column widths */
#tasks-table {
    table-layout: fixed;
}

/* Name column */
#tasks-table th:nth-child(1),
#tasks-table td:nth-child(1) {
    width: 220px;
    white-space: normal;
    word-wrap: break-word;
}

/* Description column */
#tasks-table th:nth-child(2),
#tasks-table td:nth-child(2) {
    width: 320px;
    white-space: normal;
    word-wrap: break-word;
}

/* Tier column */
#tasks-table th:nth-child(3),
#tasks-table td:nth-child(3) {
    width: 70px;
}

/* Goal column */
#tasks-table th:nth-child(4),
#tasks-table td:nth-child(4) {
    width: 60px;
}

/* Rollable column */
#tasks-table th:nth-child(5),
#tasks-table td:nth-child(5) {
    width: 70px;
}

/* In Use column */
#tasks-table th:nth-child(6),
#tasks-table td:nth-child(6) {
    width: 60px;
}

#tasks-table .task-name-display,
#tasks-table .task-desc-display {
    display: block;
    max-height: 3.6em;
    overflow: hidden;
    line-height: 1.2em;
}

#tasks-table .task-edit-input {
    width: 100%;
    box-sizing: border-box;
}

/* Add Task Form */
.add-task-form {
    display: flex;
    gap: var(--spacing-sm);
    align-items: center;
    flex-wrap: wrap;
    padding: var(--spacing-md);
    background-color: var(--bg-tertiary);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-md);
}

.add-task-form input,
.add-task-form select {
    padding: var(--spacing-xs) var(--spacing-sm);
    background-color: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 0.85rem;
}

.add-task-form input[type="text"] {
    flex: 1;
    min-width: 150px;
}

.add-task-form input[type="number"] {
    width: 80px;
}

/* Task Edit Inputs */
.task-edit-input {
    padding: var(--spacing-xs) var(--spacing-sm);
    background-color: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 0.85rem;
    width: 100%;
}

.task-edit-input:focus {
    border-color: var(--accent-primary);
    outline: none;
}

/* In Use Badge */
.in-use-badge {
    display: inline-block;
    padding: var(--spacing-xs) var(--spacing-sm);
    background-color: var(--bg-tertiary);
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    color: var(--text-muted);
}

.in-use-badge.in-use {
    background-color: var(--accent-primary);
    color: var(--bg-primary);
    font-weight: 600;
}

/* Toggle Switch */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 20px;
}

.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(--bg-tertiary);
    border: 1px solid var(--border-color);
    transition: 0.2s;
    border-radius: 20px;
}

.toggle-slider:before {
    position: absolute;
    content: "";
    height: 14px;
    width: 14px;
    left: 2px;
    bottom: 2px;
    background-color: var(--text-muted);
    transition: 0.2s;
    border-radius: 50%;
}

.toggle-switch input:checked + .toggle-slider {
    background-color: var(--accent-primary);
    border-color: var(--accent-primary);
}

.toggle-switch input:checked + .toggle-slider:before {
    transform: translateX(20px);
    background-color: var(--bg-primary);
}

.toggle-switch input:focus + .toggle-slider {
    box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.3);
}

/* Section Header */
.section-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
    flex-wrap: wrap;
}

.section-header-actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-left: auto;
    flex-wrap: wrap;
}

.import-form {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.import-form input[type="file"] {
    font-size: 0.75rem;
    max-width: 180px;
}

.section-header h2 {
    margin: 0;
    font-size: 1.1rem;
}

.badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 var(--spacing-sm);
    background-color: var(--bg-tertiary);
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.badge-warning {
    background-color: var(--accent-warning);
    color: var(--bg-primary);
}

/* User Cell */
.user-cell {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.table-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    vertical-align: middle;
}

/* Role Badges */
button.role-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    border: none;
    cursor: pointer;
    transition: opacity 0.15s, transform 0.15s;
}

button.role-badge:hover {
    opacity: 0.8;
    transform: scale(1.05);
}

.role-admin {
    background-color: var(--accent-primary);
    color: var(--bg-primary);
}

.role-user {
    background-color: var(--bg-tertiary);
    color: var(--text-secondary);
}

.role-super-admin {
    background: linear-gradient(135deg, #9333ea, #c026d3);
    color: white;
}

/* Depth Badge */
.depth-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    background-color: var(--bg-tertiary);
    border-radius: var(--radius-sm);
    font-weight: 600;
    color: var(--accent-primary);
}

/* Small Select */
.select-sm {
    padding: 4px 8px;
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 0.8rem;
    cursor: pointer;
}

.select-sm:hover {
    border-color: var(--accent-primary);
}

/* Inline Form */
.inline-form {
    display: flex;
    gap: var(--spacing-sm);
    padding-top: var(--spacing-md);
    margin-top: var(--spacing-md);
    border-top: 1px solid var(--border-color);
}

.inline-form input[type="text"] {
    flex: 1;
    padding: var(--spacing-sm) var(--spacing-md);
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: 0.875rem;
}

.inline-form input[type="text"]:focus {
    outline: none;
    border-color: var(--accent-primary);
}

.import-form-inline {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.import-form-inline input[type="file"] {
    flex: 1;
}

/* Admin path controls */
.team-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
    padding-bottom: var(--spacing-md);
    border-bottom: 1px solid var(--border-color);
}

.team-tab {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s;
}

.team-tab:hover {
    background-color: var(--bg-secondary);
    border-color: var(--accent-primary);
    color: var(--text-primary);
}

.team-tab.active {
    background-color: var(--accent-primary);
    border-color: var(--accent-primary);
    color: var(--bg-primary);
}

.team-tab.active .tab-depth {
    background-color: rgba(0, 0, 0, 0.2);
    color: white;
}

.tab-depth {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    background-color: var(--bg-secondary);
    border-radius: 10px;
    font-size: 0.75rem;
    font-weight: 600;
}

.team-path-list {
    max-height: 400px;
    overflow-y: auto;
}

/* Button sizes */
.btn-xs {
    padding: 2px 8px;
    font-size: 0.75rem;
}

.btn-sm {
    padding: 4px 12px;
    font-size: 0.8rem;
}

/* Text utilities */
.text-muted {
    color: var(--text-muted);
}

.help-text {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: var(--spacing-sm);
}

.danger-zone {
    margin-top: var(--spacing-lg);
    display: flex;
    justify-content: flex-end;
}

.danger-zone .btn-danger {
    background-color: #8b0000;
    border-color: #5c0000;
    color: #ffcccc;
    box-shadow: 0 0 10px rgba(139, 0, 0, 0.3);
}

.danger-zone .btn-danger:hover {
    background-color: #a00000;
    color: #ffffff;
    box-shadow: 0 0 15px rgba(160, 0, 0, 0.5);
}

.full-width {
    grid-column: 1 / -1;
}

/* Team Detail Page */
.team-detail-page {
    max-width: 900px;
    margin: 0 auto;
}

.team-header {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--spacing-xl);
    margin-bottom: var(--spacing-xl);
    text-align: center;
}

.team-header h1 {
    margin-bottom: var(--spacing-lg);
}

.team-stats {
    display: flex;
    justify-content: center;
    gap: var(--spacing-xl);
    margin-bottom: var(--spacing-lg);
}

.stat {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.stat-value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--accent-primary);
}

.stat-label {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.team-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-xl);
}

.team-section {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
}

.team-section h2 {
    margin-bottom: var(--spacing-lg);
    font-size: 1.25rem;
}

.members-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.member-card {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-sm);
    background-color: var(--bg-tertiary);
    border-radius: var(--radius-md);
}

.member-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

.member-info {
    display: flex;
    flex-direction: column;
}

.member-name {
    font-weight: 600;
}

.member-rsn,
.member-discord {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

/* Team Detail Path List */
.team-section .path-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    max-height: 400px;
    overflow-y: auto;
}

.team-section .path-node {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background-color: var(--bg-tertiary);
    border-radius: var(--radius-md);
    border-left: 4px solid var(--border-color);
}

.path-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
}

.path-task-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}

.path-task-row .task-name {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text-primary);
}

.path-task-row .completion-time {
    margin-left: auto;
    font-size: 0.75rem;
    color: var(--text-muted);
    white-space: nowrap;
}

.team-section .path-node.tier-easy { border-left-color: var(--tier-easy); }
.team-section .path-node.tier-medium { border-left-color: var(--tier-medium); }
.team-section .path-node.tier-hard { border-left-color: var(--tier-hard); }
.team-section .path-node.tier-elite { border-left-color: var(--tier-elite); }
.team-section .path-node.tier-master { border-left-color: var(--tier-master); }
.team-section .path-node.tier-grandmaster { border-left-color: var(--tier-grandmaster); }

.depth-marker {
    min-width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--bg-secondary);
    border-radius: 50%;
    border: 2px solid var(--border-color);
    flex-shrink: 0;
    margin-top: 2px;
}

.depth-number {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-primary);
}

.path-task {
    flex: 1;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    min-width: 0;
}

.path-task .task-name {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.path-contributors {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.contributors-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-right: 0.25rem;
}

.contributor {
    background-color: var(--bg-secondary);
    padding: 0.2rem 0.6rem;
    border-radius: 12px;
    font-size: 0.75rem;
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
}

.completion-time {
    font-size: 0.75rem;
    color: var(--text-secondary);
    white-space: nowrap;
}

.no-members, .empty-path, .no-contributions, .restricted-notice {
    color: var(--text-muted);
    text-align: center;
    padding: var(--spacing-lg);
    font-style: italic;
}

/* Contributions */
.contributions-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.contribution-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-sm);
    background-color: var(--bg-tertiary);
    border-radius: var(--radius-md);
}

.contrib-user {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.contrib-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
}

.contrib-name {
    font-weight: 500;
}

.contrib-value {
    display: flex;
    align-items: baseline;
    gap: var(--spacing-xs);
}

.contrib-count {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--accent-success);
}

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

/* Full width section in team detail */
.team-detail-page .full-width {
    grid-column: 1 / -1;
    margin-top: var(--spacing-lg);
}

/* Team card link */
.team-link {
    color: var(--text-primary);
}

.team-link:hover {
    color: var(--accent-primary);
    text-decoration: none;
}

.team-actions {
    display: flex;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-md);
}

/* Leaderboard row as link */
a.leaderboard-row {
    display: grid;
    grid-template-columns: 80px 1fr 100px;
    padding: var(--spacing-md) var(--spacing-lg);
    border-bottom: 1px solid var(--border-color);
    color: var(--text-primary);
    text-decoration: none;
    transition: background-color 0.2s;
}

a.leaderboard-row:hover {
    background-color: var(--bg-tertiary);
    text-decoration: none;
}

a.leaderboard-row:last-child {
    border-bottom: none;
}

@media (max-width: 768px) {
    .team-content {
        grid-template-columns: 1fr;
    }

    a.leaderboard-row {
        grid-template-columns: 60px 1fr 80px;
        padding: var(--spacing-sm) var(--spacing-md);
    }
}

/* Import */
.import-instructions {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
}

.import-instructions h3 {
    margin-bottom: var(--spacing-md);
}

.import-instructions ul {
    margin-left: var(--spacing-lg);
    margin-bottom: var(--spacing-md);
}

.csv-example pre {
    background-color: var(--bg-tertiary);
    padding: var(--spacing-md);
    border-radius: var(--radius-md);
    overflow-x: auto;
    font-size: 0.875rem;
}

.import-form {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
}

.import-export-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-xl);
}

.import-export-row .export-section,
.import-export-row .import-section {
    padding: var(--spacing-md);
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
}

.import-export-row .help-text {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: var(--spacing-sm);
}

.import-export-row code {
    background: var(--bg-tertiary);
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    font-family: monospace;
}

.import-export-row form {
    display: flex;
    gap: var(--spacing-sm);
    align-items: center;
    flex-wrap: wrap;
}

.import-export-row input[type="file"] {
    flex: 1;
    min-width: 200px;
}

.import-result {
    margin-top: var(--spacing-lg);
    padding: var(--spacing-md);
    border-radius: var(--radius-md);
}

.import-result.success {
    background-color: rgba(63, 185, 80, 0.1);
    border: 1px solid var(--accent-success);
    color: var(--accent-success);
}

.import-result.error {
    background-color: rgba(248, 81, 73, 0.1);
    border: 1px solid var(--accent-danger);
    color: var(--accent-danger);
}

.import-result .error-list {
    margin-top: var(--spacing-sm);
    margin-left: var(--spacing-md);
    font-size: 0.875rem;
}

.import-export-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
}

@media (max-width: 768px) {
    .import-export-section {
        grid-template-columns: 1fr;
    }
}

.config-export-card,
.config-import-card {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--spacing-lg);
}

.config-export-card h3,
.config-import-card h3 {
    margin-bottom: var(--spacing-sm);
    font-size: 1rem;
}

.import-form-vertical {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.import-form-vertical input[type="file"] {
    font-size: 0.875rem;
}

.section-divider {
    border: none;
    border-top: 1px solid var(--border-color);
    margin: var(--spacing-lg) 0;
}

.import-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-lg);
}

@media (max-width: 768px) {
    .import-grid {
        grid-template-columns: 1fr;
    }
}

.import-card {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--spacing-lg);
}

.import-card h3 {
    margin-bottom: var(--spacing-sm);
    font-size: 1rem;
}

.import-description {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin-bottom: var(--spacing-md);
}

/* Toast Notifications */
#toast-container {
    position: fixed;
    bottom: var(--spacing-lg);
    right: var(--spacing-lg);
    z-index: 1100;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.toast {
    padding: var(--spacing-md) var(--spacing-lg);
    border-radius: var(--radius-md);
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    animation: slideIn 0.3s ease;
}

.toast.success {
    border-color: var(--accent-success);
}

.toast.error {
    border-color: var(--accent-danger);
}

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

/* Loading */
.loading {
    color: var(--text-muted);
    text-align: center;
    padding: var(--spacing-xl);
}

/* Empty States */
.empty-hand,
.empty-path,
.no-team-message {
    text-align: center;
    padding: var(--spacing-xl) var(--spacing-lg);
    color: var(--text-secondary);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    max-width: 400px;
    margin: var(--spacing-xl) auto;
}

.empty-hand h3,
.empty-path h3,
.no-team-message h3 {
    color: var(--text-primary);
    margin: 0 0 var(--spacing-sm) 0;
    font-size: 1.25rem;
}

.empty-hand p,
.empty-path p,
.no-team-message p {
    margin-bottom: var(--spacing-md);
}

.empty-state-icon {
    font-size: 3rem;
    margin-bottom: var(--spacing-md);
    opacity: 0.8;
}

.empty-state-hint {
    font-size: 0.875rem;
    color: var(--text-muted);
}

/* Help Button */
.help-btn {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: var(--spacing-sm);
}

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

/* Help Modal */
.help-modal-content {
    max-width: 600px;
    max-height: 85vh;
    overflow-y: auto;
}

.help-content {
    padding: var(--spacing-md) 0;
}

.help-section {
    margin-bottom: var(--spacing-lg);
    padding-bottom: var(--spacing-lg);
    border-bottom: 1px solid var(--border-color);
}

.help-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.help-section h3 {
    color: var(--text-primary);
    font-size: 1.1rem;
    margin: 0 0 var(--spacing-sm) 0;
}

.help-section p {
    color: var(--text-secondary);
    margin: 0 0 var(--spacing-sm) 0;
    line-height: 1.6;
}

.help-section ul {
    margin: var(--spacing-sm) 0;
    padding-left: var(--spacing-lg);
    color: var(--text-secondary);
}

.help-section li {
    margin-bottom: var(--spacing-xs);
    line-height: 1.5;
}

.help-tiers {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
    margin: var(--spacing-sm) 0;
}

.help-hint {
    font-size: 0.85rem;
    color: var(--text-muted);
    font-style: italic;
}

.help-tips {
    background: var(--bg-tertiary);
    padding: var(--spacing-md);
    border-radius: var(--radius-md);
    border: none;
}

.grub-badge-inline {
    display: inline-block;
    background: linear-gradient(135deg, #4a5d23 0%, #6b8e23 100%);
    color: #c5e063;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 3px;
    vertical-align: middle;
}

/* Contributions Sections */
.contributions-section {
    margin-bottom: var(--spacing-xl);
}

.contributions-section h3 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--spacing-md);
    padding-bottom: var(--spacing-sm);
    border-bottom: 1px solid var(--border-color);
}

.contributions-section:last-child {
    margin-bottom: 0;
}

#contributions-container,
#team-status-container {
    max-height: 600px;
    overflow-y: auto;
}

/* Section subheader with button */
.section-subheader {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-md);
    padding-bottom: var(--spacing-sm);
    border-bottom: 1px solid var(--border-color);
}

.section-subheader h3 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0;
    padding: 0;
    border: none;
}

/* Active Tiles Grid for Admin */
.active-tiles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: var(--spacing-md);
}

.active-tile-card {
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--spacing-sm);
    border-left: 3px solid var(--text-muted);
}

.active-tile-card.tier-easy { border-left-color: var(--tier-easy); }
.active-tile-card.tier-medium { border-left-color: var(--tier-medium); }
.active-tile-card.tier-hard { border-left-color: var(--tier-hard); }
.active-tile-card.tier-elite { border-left-color: var(--tier-elite); }
.active-tile-card.tier-master { border-left-color: var(--tier-master); }
.active-tile-card.tier-grandmaster { border-left-color: var(--tier-grandmaster); }

.active-tile-card.zombie {
    background-color: rgba(139, 0, 0, 0.15);
}

.tile-header-mini {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    margin-bottom: var(--spacing-xs);
}

.tile-name {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: var(--spacing-xs);
    line-height: 1.3;
}

.tile-progress-mini {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.progress-bar-mini {
    flex: 1;
    height: 4px;
    background-color: var(--bg-primary);
    border-radius: 2px;
    overflow: hidden;
}

.progress-fill-mini {
    height: 100%;
    background-color: var(--accent-primary);
}

.progress-text-mini {
    font-size: 0.7rem;
    color: var(--text-muted);
    white-space: nowrap;
}

/* Responsive */
@media (max-width: 768px) {
    .dashboard-grid {
        grid-template-columns: 1fr;
    }

    .hand-section,
    .odds-section,
    .path-section {
        grid-column: 1;
        grid-row: auto;
    }

    .navbar {
        flex-direction: column;
        gap: var(--spacing-md);
    }

    .nav-links {
        flex-wrap: wrap;
        justify-content: center;
    }

    .leaderboard-header,
    .leaderboard-row {
        grid-template-columns: 60px 1fr 80px;
        padding: var(--spacing-sm) var(--spacing-md);
    }

    /* Admin page mobile fixes */
    .admin-section {
        overflow-x: auto;
    }

    .admin-table th,
    .admin-table td {
        padding: var(--spacing-xs) var(--spacing-sm);
        font-size: 0.85rem;
    }

    .admin-table .btn {
        padding: var(--spacing-xs) var(--spacing-sm);
        font-size: 0.75rem;
    }
}

/* ==================== Summary Stats Page ==================== */

.summary-page {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--spacing-lg);
}

.summary-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-xl);
    gap: var(--spacing-md);
}

.summary-header h1 {
    color: var(--text-primary);
    font-size: 1.75rem;
}

.summary-section {
    margin-bottom: var(--spacing-xl);
}

.summary-section h2 {
    color: var(--text-primary);
    font-size: 1.25rem;
    margin-bottom: var(--spacing-md);
    border-bottom: 1px solid var(--border-color);
    padding-bottom: var(--spacing-sm);
}

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

.summary-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--bg-card);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.summary-table th,
.summary-table td {
    padding: var(--spacing-sm) var(--spacing-md);
    text-align: center;
    border-bottom: 1px solid var(--border-color);
    width: 80px;
    min-width: 80px;
}

.summary-table th:first-child,
.summary-table td:first-child {
    width: 150px;
    min-width: 150px;
}

.summary-table th {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Tier header colors with good contrast */
.summary-table th.tier-col.tier-easy { background: var(--tier-easy); color: #000; }
.summary-table th.tier-col.tier-medium { background: var(--tier-medium); color: #000; }
.summary-table th.tier-col.tier-hard { background: var(--tier-hard); color: #000; }
.summary-table th.tier-col.tier-elite { background: var(--tier-elite); color: #fff; }
.summary-table th.tier-col.tier-master { background: var(--tier-master); color: #fff; }
.summary-table th.tier-col.tier-grandmaster { background: var(--tier-grandmaster); color: #000; }
.summary-table th.tier-col.tier-boss { background: linear-gradient(135deg, #8b0000 0%, #cc0000 100%); color: #fff; }

.summary-table td {
    color: var(--text-primary);
}

.summary-table .team-name-col {
    text-align: left;
    font-weight: 500;
}

.summary-table .depth-col {
    color: var(--accent-primary);
    font-weight: 600;
}

.summary-table .total-col {
    font-weight: 600;
    color: var(--text-primary);
}

.summary-table td.tier-col {
    font-weight: 600;
}

.summary-table tbody tr:hover {
    background: var(--bg-tertiary);
}

.tier-points-note {
    margin-top: var(--spacing-md);
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    align-items: center;
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.tier-points-note .tier-badge {
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: 0.75rem;
}

.tier-points-note .tier-badge.tier-easy { background: var(--tier-easy); color: #000; }
.tier-points-note .tier-badge.tier-medium { background: var(--tier-medium); color: #000; }
.tier-points-note .tier-badge.tier-hard { background: var(--tier-hard); color: #000; }
.tier-points-note .tier-badge.tier-elite { background: var(--tier-elite); color: #fff; }
.tier-points-note .tier-badge.tier-master { background: var(--tier-master); color: #fff; }
.tier-points-note .tier-badge.tier-grandmaster { background: var(--tier-grandmaster); color: #000; }

.player-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--spacing-lg);
}

.team-player-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
}

.team-player-card h3 {
    color: var(--text-primary);
    font-size: 1rem;
    margin-bottom: var(--spacing-md);
    padding-bottom: var(--spacing-sm);
    border-bottom: 1px solid var(--border-color);
}

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

.player-table th,
.player-table td {
    padding: var(--spacing-xs) var(--spacing-sm);
    text-align: left;
}

.player-table th {
    color: var(--text-muted);
    font-weight: 500;
    font-size: 0.7rem;
    text-transform: uppercase;
}

.player-table td {
    color: var(--text-primary);
    font-size: 0.85rem;
}

.player-table .rank-col {
    width: 30px;
    color: var(--text-muted);
}

.player-table .points-col {
    text-align: right;
    color: var(--accent-primary);
    font-weight: 600;
}

.player-table tbody tr:nth-child(1) .rank-col {
    color: gold;
}

.player-table tbody tr:nth-child(2) .rank-col {
    color: silver;
}

.player-table tbody tr:nth-child(3) .rank-col {
    color: #cd7f32;
}

.team-player-card .no-data {
    color: var(--text-muted);
    font-style: italic;
    font-size: 0.85rem;
}

/* Grub Configuration Admin */
.grub-config-description {
    color: var(--text-secondary);
    font-size: 0.85rem;
    margin-bottom: var(--spacing-md);
}

.grub-config-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md);
}

.grub-config-item {
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
}

.grub-tier-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--spacing-sm);
}

.grub-milestone {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-style: italic;
}

.grub-select {
    width: 100%;
    padding: var(--spacing-sm);
    background-color: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 0.85rem;
    cursor: pointer;
}

.grub-select:hover {
    border-color: var(--accent-primary);
}

.grub-select:focus {
    outline: none;
    border-color: var(--accent-primary);
}

@media (max-width: 768px) {
    .grub-config-grid {
        grid-template-columns: 1fr;
    }
}

/* Admin controls on leaderboard */
.admin-controls {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

@media (max-width: 768px) {
    .summary-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .player-stats-grid {
        grid-template-columns: 1fr;
    }

    .tier-points-note {
        flex-direction: column;
        align-items: flex-start;
    }

    .admin-controls {
        flex-direction: column;
        align-items: flex-end;
        gap: var(--spacing-sm);
    }
}

/* ============================================
   WAYSTONE STYLES
   ============================================ */

/* Waystones Section in Hand */
.waystones-section {
    margin-top: var(--spacing-xl);
    padding-top: var(--spacing-lg);
    border-top: 1px solid var(--border-color);
}

.waystones-section-title {
    font-size: 1rem;
    color: var(--text-secondary);
    margin-bottom: var(--spacing-md);
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    text-shadow: 0 0 10px rgba(61, 213, 243, 0.3);
}

.waystones-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--spacing-lg);
}

/* Waystone Card */
.waystone-card {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-top: 3px solid #5a7a8a;
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    min-height: 220px;
    display: flex;
    flex-direction: column;
    transition: border-color 0.2s;
    overflow: hidden;
    transition: all 0.3s ease;
}

.waystone-card:hover {
    border-color: #4a6a7a;
}

/* Waystone Header */
.waystone-header {
    margin-bottom: var(--spacing-sm);
}

.waystone-badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
    align-items: center;
}

.waystone-depth-badge {
    background-color: #4a6a7a;
    color: var(--text-primary);
    padding: 0.2rem 0.5rem;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.scoring-badge {
    padding: 0.2rem 0.5rem;
    border-radius: var(--radius-sm);
    font-size: 0.7rem;
    font-weight: 500;
    text-transform: uppercase;
}

.scoring-badge.scoring-lowest_wins {
    background-color: rgba(25, 135, 84, 0.2);
    color: #20c997;
    border: 1px solid rgba(25, 135, 84, 0.4);
}

.scoring-badge.scoring-highest_wins {
    background-color: rgba(255, 193, 7, 0.2);
    color: #ffc107;
    border: 1px solid rgba(255, 193, 7, 0.4);
}

/* Waystone Body */
.waystone-body {
    margin-bottom: var(--spacing-sm);
    flex: 1;
}

.waystone-task-name {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--spacing-xs);
}

.waystone-task-description {
    font-size: 0.85rem;
    color: var(--text-muted);
    line-height: 1.4;
}

/* Waystone Scores */
.waystone-scores {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
    padding: var(--spacing-sm);
    background: rgba(0, 0, 0, 0.15);
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
}

.waystone-score-section {
    text-align: center;
}

.score-label {
    display: block;
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--spacing-xs);
}

.score-value {
    display: block;
    font-size: 1rem;
    font-weight: 600;
}

.score-value.team-best {
    color: #3dd5f3;
}

.score-value.no-attempt,
.score-value.not-discovered {
    color: var(--text-muted);
    font-style: italic;
    font-weight: 400;
    font-size: 0.85rem;
}

.score-value.leader {
    color: #ffc107;
}

.score-value.no-leader {
    color: var(--text-muted);
    font-style: italic;
    font-weight: 400;
    font-size: 0.85rem;
}

/* Waystone Pending Submission */
.waystone-pending {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-xs) var(--spacing-sm);
    background: rgba(255, 193, 7, 0.15);
    border: 1px solid rgba(255, 193, 7, 0.3);
    border-radius: var(--radius-sm);
    margin-bottom: var(--spacing-sm);
    font-size: 0.8rem;
}

.waystone-pending .pending-label {
    color: #ffc107;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.75rem;
}

.waystone-pending .pending-value {
    color: #ffc107;
    font-weight: 600;
}

.waystone-pending .pending-time {
    color: var(--text-muted);
    font-size: 0.75rem;
    margin-left: auto;
}

/* Waystone Footer */
.waystone-footer {
    text-align: center;
    margin-top: auto;
}

.btn-waystone {
    background-color: #4a6a7a;
    color: var(--text-primary);
    border: 1px solid #5a7a8a;
    padding: var(--spacing-xs) var(--spacing-md);
    font-weight: 500;
    font-size: 0.85rem;
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    transition: background-color 0.2s;
}

.btn-waystone:hover {
    background-color: #5a7a8a;
}

/* WOM Waystone styles */
.wom-waystone-actions {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.wom-waystone-actions .btn {
    width: 100%;
}

.wom-task-info {
    display: flex;
    gap: var(--spacing-sm);
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-top: var(--spacing-xs);
    flex-wrap: wrap;
}

.wom-task-info .wom-metric-type {
    background: rgba(66, 153, 225, 0.2);
    color: #4299e1;
    padding: 0.1rem 0.4rem;
    border-radius: var(--radius-sm);
}

.wom-task-info .wom-target {
    color: var(--text-muted);
}

.waystone-locked-message {
    color: var(--text-muted);
    font-style: italic;
    font-size: 0.85rem;
}

/* Waystone Admin Config */
.waystone-config-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--spacing-md);
}

.waystone-config-item {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.waystone-depth-header {
    margin-bottom: var(--spacing-xs);
}

.waystone-select {
    width: 100%;
    padding: var(--spacing-sm);
    background-color: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 0.85rem;
    cursor: pointer;
}

.waystone-select:hover {
    border-color: var(--accent-primary);
}

.waystone-select:focus {
    outline: none;
    border-color: var(--accent-primary);
}

.waystone-config-item .btn {
    margin-top: var(--spacing-xs);
}

/* Waystone Queue Item */
.waystone-queue-item {
    border-left: 3px solid #3dd5f3;
}

/* Waystone Scoreboards on Leaderboard */
.waystone-scoreboards-section {
    margin-top: var(--spacing-xl);
    padding-top: var(--spacing-lg);
    border-top: 1px solid var(--border-color);
}

.waystone-scoreboards-title {
    font-size: 1rem;
    color: var(--text-secondary);
    margin-bottom: var(--spacing-lg);
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.waystone-scoreboards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-lg);
}

.waystone-scoreboard {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-top: 3px solid #5a7a8a;
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    overflow: hidden;
}

.waystone-scoreboard-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-sm);
    padding-bottom: var(--spacing-md);
    border-bottom: 1px solid var(--border-color);
    margin-bottom: var(--spacing-md);
}

.waystone-scoreboard-header .waystone-task-name {
    flex: 1;
    font-size: 0.95rem;
    margin: 0;
}

.waystone-scoreboard-table {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.waystone-scoreboard-row {
    display: flex;
    align-items: center;
    padding: var(--spacing-sm);
    background: rgba(0, 0, 0, 0.2);
    border-radius: var(--radius-sm);
}

.waystone-scoreboard-row.current-team {
    background: rgba(90, 122, 138, 0.2);
    border: 1px solid #5a7a8a;
}

.waystone-scoreboard-row .rank-col {
    width: 40px;
    text-align: center;
    font-weight: 600;
}

.waystone-scoreboard-row .team-col {
    flex: 1;
}

.waystone-scoreboard-row .score-col {
    font-weight: 600;
    color: var(--text-primary);
}

.waystone-scoreboard .no-submissions {
    color: var(--text-muted);
    font-style: italic;
    text-align: center;
    padding: var(--spacing-md);
}

.waystone-not-discovered-hint {
    color: var(--text-muted);
    font-style: italic;
    font-size: 0.85rem;
    text-align: center;
    padding: var(--spacing-sm) var(--spacing-md);
    margin: 0;
    border-top: 1px solid var(--border-color);
}

@media (max-width: 768px) {
    .waystones-grid {
        grid-template-columns: 1fr;
    }

    .waystone-config-grid {
        grid-template-columns: 1fr;
    }

    .waystone-scoreboards-grid {
        grid-template-columns: 1fr;
    }

    .waystone-scores {
        grid-template-columns: 1fr;
    }
}

/* Waystone Modal Styling */
.waystone-modal {
    border: 1px solid #5a7a8a;
}

.waystone-modal .modal-header {
    background-color: rgba(90, 122, 138, 0.1);
}

.scoring-hint {
    color: var(--text-secondary);
    font-size: 0.85rem;
    margin-bottom: var(--spacing-md);
    font-style: italic;
}

.form-hint {
    color: var(--text-muted);
    font-size: 0.75rem;
    margin-top: var(--spacing-xs);
}

/* Screenshot Input Rows */
.screenshot-input-row {
    display: flex;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
}

.screenshot-input-row input[type="url"] {
    flex: 1;
}

.screenshot-input-row .btn-xs {
    flex-shrink: 0;
    width: 2rem;
    padding: 0;
}

/* Multiple Screenshot Thumbnails */
.screenshot-thumbs-container {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    margin: var(--spacing-sm) 0;
}

.screenshot-thumbs-container .screenshot-thumb {
    max-width: 100px;
    max-height: 70px;
}

/* Mega-Rare Configuration */
.mega-rare-config-grid {
    margin-bottom: var(--spacing-md);
}

.mega-rare-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.mega-rare-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
}

.mega-rare-item.inactive {
    opacity: 0.5;
}

.mega-rare-item.inactive .mega-rare-name {
    text-decoration: line-through;
}

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

.mega-rare-actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.mega-rare-form {
    margin-top: var(--spacing-md);
}

/* Osto Ayak Queue Styling */
.osto-ayak-queue .queue-header {
    border-left: 3px solid #ff4444;
}

.osto-ayak-queue .queue-header h3 {
    color: #ff6666;
}

.osto-ayak-item {
    border-left: 3px solid #4a0e0e;
    background: linear-gradient(90deg, rgba(74, 14, 14, 0.1) 0%, transparent 100%);
}

.boss-badge {
    display: inline-block;
    padding: var(--spacing-xs) var(--spacing-sm);
    background: linear-gradient(135deg, #8b0000 0%, #cc0000 100%);
    border-radius: var(--radius-sm);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

.mega-rare-info {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin: var(--spacing-sm) 0;
}

.mega-rare-label {
    color: var(--text-muted);
    font-size: 0.8rem;
}

.mega-rare-name {
    color: var(--accent-secondary);
    font-weight: 600;
}

/* ================================
   SUBTASK STYLES
   ================================ */

.subtask-progress {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    padding: var(--spacing-sm);
    background: var(--bg-secondary);
    border-radius: var(--radius-sm);
    margin-top: var(--spacing-sm);
}

.subtask-progress.or-logic {
    border-left: 3px solid var(--accent-secondary);
}

.subtask-logic-label {
    font-size: 0.75rem;
    color: var(--accent-secondary);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: var(--spacing-xs);
}

/* Grouped subtasks (OR of ANDs) */
.subtask-group {
    background: var(--bg-tertiary);
    border-radius: var(--radius-sm);
    padding: var(--spacing-sm);
    margin-bottom: var(--spacing-xs);
}

.subtask-group.collapsible {
    cursor: pointer;
}

.subtask-group.completed {
    border-left: 3px solid var(--accent-success);
}

.subtask-group-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.subtask-group-toggle {
    font-size: 0.8rem;
    color: var(--text-muted);
    transition: transform 0.2s ease;
    width: 0.8em;
}

.subtask-group.expanded .subtask-group-toggle {
    transform: rotate(90deg);
}

.subtask-group-name {
    font-weight: 600;
    color: var(--text-primary);
    flex: 1;
}

.subtask-group-count {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.subtask-group.completed .subtask-group-name {
    color: var(--accent-success);
}

.subtask-group.completed .subtask-group-count {
    color: var(--accent-success);
}

.subtask-group-progress-bar {
    height: 4px;
    background: var(--bg-secondary);
    border-radius: 2px;
    overflow: hidden;
    margin-top: var(--spacing-xs);
}

.subtask-group-progress-fill {
    height: 100%;
    background: var(--accent-primary);
    transition: width 0.3s ease;
}

.subtask-group-progress-fill.complete {
    background: var(--accent-success);
}

.subtask-group-items {
    display: none;
    flex-direction: column;
    gap: 2px;
    padding-left: calc(var(--spacing-sm) + 0.8em);
    margin-top: var(--spacing-xs);
    padding-top: var(--spacing-xs);
    border-top: 1px solid var(--border-color);
}

.subtask-group.expanded .subtask-group-items {
    display: flex;
}

.subtask-group-items .subtask-item {
    padding: 2px var(--spacing-xs);
    font-size: 0.8rem;
}

.subtask-group-items .subtask-icon.small {
    font-size: 0.7rem;
}

.subtask-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: 0.85rem;
    color: var(--text-secondary);
    border-radius: var(--radius-sm);
    transition: background 0.2s;
}

.subtask-item.completed {
    color: var(--accent-success);
}

.subtask-item.completed .subtask-icon {
    color: var(--accent-success);
}

.subtask-icon {
    font-size: 0.9rem;
    width: 1.2em;
    text-align: center;
}

.subtask-name {
    flex: 1;
}

.subtask-count {
    font-size: 0.75rem;
    color: var(--text-muted);
    padding: 0.125rem 0.375rem;
    background: var(--bg-tertiary);
    border-radius: var(--radius-sm);
}

.subtask-item.completed .subtask-count {
    background: var(--accent-success);
    color: white;
}

/* Subtask selector in modal */
.subtask-options {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-sm);
}

.subtask-option {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.2s;
}

.subtask-option:hover:not(.disabled) {
    border-color: var(--accent-primary);
    background: var(--bg-tertiary);
}

.subtask-option.completed {
    opacity: 0.6;
}

.subtask-option.disabled {
    cursor: not-allowed;
}

.subtask-option input[type="radio"] {
    display: none;
}

.subtask-option:has(input:checked) {
    border-color: var(--accent-primary);
    background: rgba(212, 133, 28, 0.1);
}

.subtask-option-icon {
    font-size: 1.1rem;
    width: 1.5em;
    text-align: center;
}

.subtask-option.completed .subtask-option-icon {
    color: var(--accent-success);
}

.subtask-option-name {
    flex: 1;
    color: var(--text-primary);
}

.subtask-done-label {
    font-size: 0.75rem;
    color: var(--accent-success);
    text-transform: uppercase;
    font-weight: 600;
}

.subtask-progress-text {
    font-size: 0.75rem;
    color: var(--text-muted);
    padding: 0.125rem 0.375rem;
    background: var(--bg-tertiary);
    border-radius: var(--radius-sm);
}

.subtask-option.completed .subtask-progress-text {
    background: var(--accent-success);
    color: white;
}

.subtask-remaining {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-style: italic;
}

/* Grouped subtask options in modal */
.subtask-group-section {
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
    padding: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
}

.subtask-group-section.collapsible {
    cursor: pointer;
}

.subtask-group-section.completed {
    border-left: 3px solid var(--accent-success);
    opacity: 0.7;
}

.subtask-group-header-modal {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.subtask-group-header-modal .subtask-group-toggle {
    font-size: 0.8rem;
    color: var(--text-muted);
    transition: transform 0.2s ease;
    width: 0.8em;
}

.subtask-group-section.expanded .subtask-group-toggle {
    transform: rotate(90deg);
}

.subtask-group-icon {
    font-size: 1rem;
    color: var(--text-secondary);
}

.subtask-group-section.completed .subtask-group-icon {
    color: var(--accent-success);
}

.subtask-group-title {
    flex: 1;
    font-weight: 600;
    color: var(--text-primary);
}

.subtask-group-section.completed .subtask-group-title {
    color: var(--accent-success);
}

.subtask-group-progress {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.subtask-group-items-modal {
    display: none;
    flex-direction: column;
    gap: var(--spacing-xs);
    margin-top: var(--spacing-sm);
    padding-top: var(--spacing-sm);
    border-top: 1px solid var(--border-color);
}

.subtask-group-section.expanded .subtask-group-items-modal {
    display: flex;
}

.subtask-group-items-modal .subtask-option {
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: 0.9rem;
}

/* Subtask badge in queue */
.subtask-badge {
    display: inline-block;
    padding: 0.2rem 0.5rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    color: var(--text-secondary);
    font-weight: 500;
}

/* Efficiency Stats Section */
.efficiency-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
}

.efficiency-header h2 {
    margin: 0;
}

.efficiency-controls {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.last-sync-time {
    color: var(--text-muted);
    font-size: 0.85rem;
}

.efficiency-description {
    color: var(--text-secondary);
    font-size: 0.85rem;
    margin-bottom: var(--spacing-lg);
}

.efficiency-table .luck-col {
    font-weight: 600;
}

.efficiency-table .luck-col.high-luck {
    color: #4ade80;
}

.efficiency-table .luck-col.medium-luck {
    color: #facc15;
}

.efficiency-player-table {
    font-size: 0.85rem;
}

.efficiency-player-table th,
.efficiency-player-table td {
    padding: var(--spacing-xs) var(--spacing-sm);
}

.efficiency-player-table .luck-col {
    font-weight: 600;
    text-align: right;
}

.efficiency-player-table .luck-col.high-luck {
    color: #4ade80;
}

.efficiency-player-table .luck-col.medium-luck {
    color: #facc15;
}

.subsection-title {
    color: var(--text-primary);
    font-size: 1.1rem;
    margin: var(--spacing-lg) 0 var(--spacing-md);
}

.required-label {
    color: var(--accent-primary);
    font-weight: 500;
}