/* SEO Farm Empire - Fallout Pip-Boy Theme */
/* Retro-futuristic, Atomic Age aesthetic */

:root {
    /* Core Colors - Dark military/industrial */
    --bg-darkest: #0d0f0a;
    --bg-dark: #131710;
    --bg-medium: #1a1f15;
    --bg-light: #242b1e;
    --bg-lighter: #2e3827;

    /* Primary - Pip-Boy Amber/Green */
    --pip-green: #30ff50;
    --pip-green-muted: #20c040;
    --pip-green-dark: #158030;
    --pip-green-dim: #0d4020;
    --pip-amber: #ffb030;
    --pip-amber-muted: #c08020;
    --pip-amber-dark: #805010;

    /* Legacy gold mapping to pip colors */
    --gold-bright: var(--pip-amber);
    --gold-muted: var(--pip-amber-muted);
    --gold-dark: var(--pip-amber-dark);
    --gold-dim: #403010;

    /* Text Colors - CRT phosphor glow */
    --text-bright: #e0ffe0;
    --text-normal: #90c090;
    --text-dim: #508050;
    --text-dark: #305030;

    /* Accent Colors */
    --green-bright: var(--pip-green);
    --green-muted: var(--pip-green-muted);
    --red-bright: #ff4040;
    --red-muted: #a02020;
    --blue-bright: #40a0ff;
    --blue-muted: #2060a0;

    /* Borders */
    --border-gold: rgba(255, 176, 48, 0.4);
    --border-subtle: rgba(48, 255, 80, 0.15);
    --border-dark: rgba(0, 0, 0, 0.6);
    --border-pip: rgba(48, 255, 80, 0.3);

    /* Spacing */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;

    /* Fallout specific */
    --scanline-opacity: 0.03;
    --glow-color: rgba(48, 255, 80, 0.15);
    --border-radius: 4px;
}

@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Rajdhani:wght@400;500;600;700&display=swap');

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

/* Custom Scrollbar Styling */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    background: rgba(48, 255, 80, 0.3);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(48, 255, 80, 0.5);
}

/* Firefox scrollbar */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(48, 255, 80, 0.3) rgba(0, 0, 0, 0.3);
}

body {
    background: var(--bg-darkest);
    font-family: 'Rajdhani', 'Segoe UI', sans-serif;
    color: var(--text-normal);
    overflow: hidden;
    height: 100vh;
    position: relative;
    font-size: 15px;
    font-weight: 500;
}

/* CRT Scanline Effect */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: repeating-linear-gradient(
        0deg,
        rgba(0, 0, 0, var(--scanline-opacity)),
        rgba(0, 0, 0, var(--scanline-opacity)) 1px,
        transparent 1px,
        transparent 2px
    );
    pointer-events: none;
    z-index: 9999;
}

/* Subtle vignette effect */
body::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,0.4) 100%);
    pointer-events: none;
    z-index: 9998;
}

/* Custom Title Bar */
.title-bar {
    -webkit-app-region: drag;
    height: 36px;
    background: linear-gradient(180deg, var(--bg-light) 0%, var(--bg-dark) 100%);
    display: flex;
    align-items: center;
    padding: 0 var(--spacing-md);
    border-bottom: 2px solid var(--pip-green-dim);
    box-shadow: 0 2px 10px rgba(48, 255, 80, 0.1);
}

.title-bar-drag {
    flex: 1;
}

.app-title {
    font-family: 'Share Tech Mono', monospace;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 4px;
    color: var(--pip-green);
    text-transform: uppercase;
    text-shadow: 0 0 10px var(--pip-green), 0 0 20px rgba(48, 255, 80, 0.3);
}

/* App Container */
.app-container {
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Top Navigation */
.top-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-sm) var(--spacing-lg);
    background: linear-gradient(180deg, var(--bg-medium) 0%, var(--bg-dark) 100%);
    border-bottom: 2px solid var(--pip-green-dim);
}

.nav-tabs {
    display: flex;
    gap: 2px;
}

.nav-tab {
    background: var(--bg-dark);
    border: 1px solid var(--pip-green-dim);
    border-bottom: none;
    color: var(--text-dim);
    font-family: 'Rajdhani', sans-serif;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 2px;
    padding: var(--spacing-sm) var(--spacing-lg);
    cursor: pointer;
    transition: all 0.15s ease;
    text-transform: uppercase;
    position: relative;
    clip-path: polygon(8px 0, 100% 0, 100% 100%, 0 100%, 0 8px);
}

.nav-tab:hover {
    color: var(--pip-green-muted);
    background: var(--bg-medium);
    border-color: var(--pip-green-muted);
}

.nav-tab.active {
    color: var(--pip-green);
    background: var(--bg-light);
    border-color: var(--pip-green);
    text-shadow: 0 0 8px var(--pip-green);
}

/* Removed ">" prefix from active tabs */

.nav-stats {
    display: flex;
    gap: var(--spacing-lg);
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--bg-dark);
    border: 1px solid var(--pip-green-dim);
}

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

.currency-label {
    font-family: 'Share Tech Mono', monospace;
    font-size: 14px;
    color: var(--text-dim);
    letter-spacing: 1px;
}

.currency-value {
    font-family: 'Share Tech Mono', monospace;
    font-size: 16px;
    font-weight: 500;
    color: var(--pip-green);
    text-shadow: 0 0 8px var(--pip-green);
}

.currency-value.earned {
    color: var(--pip-amber);
    text-shadow: 0 0 8px var(--pip-amber);
}

.currency-cap-icon {
    width: 18px;
    height: 18px;
    object-fit: contain;
}

/* Caps icon for rewards */
.cap-icon {
    width: 14px;
    height: 14px;
    object-fit: contain;
    vertical-align: middle;
    margin-right: 2px;
}

.cap-icon-sm {
    width: 12px;
    height: 12px;
    object-fit: contain;
}

.cap-icon-micro {
    width: 8px;
    height: 8px;
    object-fit: contain;
    vertical-align: middle;
    margin-left: 2px;
}

/* Main Content */
.main-content {
    flex: 1;
    overflow: hidden;
    padding: var(--spacing-lg);
    background: var(--bg-darkest);
    display: flex;
    flex-direction: column;
    min-height: 0; /* Allow flex shrinking */
}

/* Tab Panels */
.tab-panel {
    display: none;
    animation: fadeIn 0.3s ease;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.tab-panel.active {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

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

/* Panel Header - Hidden to save space, structure kept for future use */
.panel-header {
    display: none;
    align-items: center;
    flex-shrink: 0;
}

/* Stats Reset Button */
.stats-reset-btn {
    background: transparent;
    border: 1px solid var(--pip-amber-dark);
    color: var(--pip-amber-muted);
    font-family: 'Share Tech Mono', monospace;
    font-size: 10px;
    letter-spacing: 1px;
    padding: 4px 10px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.stats-reset-btn:hover {
    border-color: var(--pip-amber);
    color: var(--pip-amber);
    background: rgba(255, 176, 0, 0.1);
}

.panel-location {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 2px;
    color: var(--text-dim);
    text-transform: uppercase;
}

/* Panel Grid */
.panel-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-xl);
}

/* Quest Log Layout */
.quest-log-layout {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    grid-template-rows: 1fr;
    gap: var(--spacing-xl);
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.quest-list-section {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
}

.quest-detail-section {
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, var(--bg-medium) 0%, var(--bg-dark) 100%);
    border: 1px solid var(--pip-green-dim);
    padding: var(--spacing-lg);
    overflow-y: auto;
    min-height: 0;
    position: relative;
}

.quest-detail-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--pip-green-muted), transparent);
}

.quest-detail-view {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Add Quest Button - Pip-Boy Terminal Style */
.add-quest-btn {
    background: transparent;
    border: 1px solid var(--pip-green-muted);
    color: var(--pip-green);
    font-family: 'Share Tech Mono', monospace;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 2px;
    padding: var(--spacing-xs) var(--spacing-md);
    cursor: pointer;
    transition: all 0.15s ease;
    text-transform: uppercase;
}

.add-quest-btn:hover {
    background: var(--pip-green-dim);
    border-color: var(--pip-green);
    box-shadow: 0 0 10px rgba(48, 255, 80, 0.3);
    text-shadow: 0 0 8px var(--pip-green);
}

/* Quest List */
.quest-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    overflow-y: auto;
    flex: 1;
    min-height: 100px;
}

.quest-list.completed-list {
    flex: 0 0 auto;
}

/* Quest Item - Pip-Boy Terminal Style */
.quest-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: 12px;
    background: rgba(48, 255, 80, 0.05);
    border: 1px solid rgba(48, 255, 80, 0.15);
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    font-family: 'Rajdhani', sans-serif;
}

.quest-item::before {
    display: none;
}

.quest-item:hover {
    border-color: var(--pip-green-muted);
    background: linear-gradient(90deg, var(--bg-medium) 0%, var(--bg-light) 100%);
    box-shadow: 0 0 15px rgba(48, 255, 80, 0.1);
}

.quest-item:hover::before {
    background: var(--pip-green);
    box-shadow: 0 0 8px var(--pip-green);
    width: 3px;
}

.quest-item.selected {
    border-color: var(--pip-green);
    background: linear-gradient(90deg, var(--bg-medium) 0%, var(--bg-light) 100%);
    box-shadow: 0 0 20px rgba(48, 255, 80, 0.15), inset 0 0 30px rgba(48, 255, 80, 0.05);
}

.quest-item.selected::before {
    background: var(--pip-green);
    box-shadow: 0 0 10px var(--pip-green);
    width: 4px;
}

.quest-item.completed {
    opacity: 0.5;
    border-color: var(--pip-green-dark);
}

.quest-item-icon {
    font-size: 20px;
    color: var(--pip-green-muted);
    filter: drop-shadow(0 0 4px var(--pip-green));
}

.quest-item.completed .quest-item-icon {
    color: var(--pip-green);
}

.quest-item-info {
    flex: 1;
    min-width: 0;
}

.quest-item-name {
    font-size: 13px;
    color: var(--text-bright);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: 0.5px;
}

.quest-item-progress {
    font-size: 14px;
    color: var(--pip-green-muted);
    margin-top: 2px;
}

/* Campaign Tags */
.quest-campaign-tag {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    color: var(--pip-amber);
    background: rgba(255, 193, 7, 0.15);
    border: 1px solid var(--pip-amber);
    padding: 2px 8px;
    border-radius: 3px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-top: 4px;
    text-shadow: 0 0 4px var(--pip-amber);
}

.quest-campaign-tag.detail-campaign {
    font-size: 12px;
    padding: 4px 10px;
    margin-bottom: 12px;
}

/* Due Date Row */
.due-date-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 8px 0 12px 0;
    font-family: 'Share Tech Mono', monospace;
    font-size: 12px;
}

.due-date-label {
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.due-date-value {
    color: var(--text-normal);
    padding: 2px 8px;
    background: rgba(48, 255, 80, 0.1);
    border: 1px solid var(--border-pip);
    border-radius: 3px;
}

.due-date-value.overdue {
    color: var(--red-bright);
    background: rgba(255, 64, 64, 0.15);
    border-color: var(--red-muted);
    text-shadow: 0 0 4px var(--red-bright);
}

.due-date-value.soon {
    color: var(--pip-amber);
    background: rgba(255, 176, 48, 0.15);
    border-color: var(--pip-amber-muted);
    text-shadow: 0 0 4px var(--pip-amber);
}

.due-date-value.today {
    color: #ffb347;
    background: rgba(255, 179, 71, 0.25);
    border-color: rgba(255, 179, 71, 0.6);
    text-shadow: 0 0 6px rgba(255, 179, 71, 0.8);
    animation: pulse-amber 2s infinite;
}

@keyframes pulse-amber {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.75; }
}

.due-date-input {
    background: var(--bg-medium);
    border: 1px solid var(--border-pip);
    color: var(--text-normal);
    font-family: 'Share Tech Mono', monospace;
    font-size: 12px;
    padding: 4px 8px;
    border-radius: 3px;
}

.due-date-input:focus {
    outline: none;
    border-color: var(--pip-green);
    box-shadow: 0 0 8px rgba(48, 255, 80, 0.3);
}

.due-date-edit-btn {
    background: transparent;
    border: 1px solid var(--text-dim);
    color: var(--text-dim);
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 3px;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.15s ease;
}

.due-date-edit-btn:hover {
    border-color: var(--pip-green);
    color: var(--pip-green);
}

/* Empire tab due date styling */
#panel-empire .due-date-row {
    color: var(--guild-gold-muted);
}

#panel-empire .due-date-label {
    color: var(--guild-gold-muted);
}

#panel-empire .due-date-value {
    color: #ffca28;
    background: rgba(255, 193, 7, 0.15);
    border-color: rgba(255, 193, 7, 0.4);
    text-shadow: 0 0 3px rgba(255, 193, 7, 0.4);
}

#panel-empire .due-date-value.soon {
    color: #ffd54f;
    background: rgba(255, 193, 7, 0.2);
    border-color: rgba(255, 193, 7, 0.5);
    text-shadow: 0 0 5px rgba(255, 193, 7, 0.6);
}

#panel-empire .due-date-value.overdue {
    color: var(--red-bright);
    background: rgba(255, 64, 64, 0.15);
    border-color: var(--red-muted);
}

#panel-empire .due-date-edit-btn {
    border-color: var(--guild-gold-muted);
    color: var(--guild-gold-muted);
}

#panel-empire .due-date-edit-btn:hover {
    border-color: var(--guild-gold);
    color: var(--guild-gold);
}

/* Faction tab due date styling */
/* Quest tab due date styling - GREEN */
#panel-quests .due-date-row {
    color: var(--pip-green-muted);
}

#panel-quests .due-date-label {
    color: var(--pip-green-muted);
}

#panel-quests .due-date-value {
    color: var(--pip-green);
    background: rgba(48, 255, 80, 0.1);
    border-color: rgba(48, 255, 80, 0.3);
}

#panel-quests .due-date-value.soon {
    color: var(--pip-amber);
    background: rgba(255, 176, 48, 0.15);
    border-color: var(--pip-amber-muted);
    text-shadow: 0 0 4px var(--pip-amber);
}

#panel-quests .due-date-value.overdue {
    color: var(--red-bright);
    background: rgba(255, 64, 64, 0.15);
    border-color: var(--red-muted);
}

#panel-quests .due-date-edit-btn {
    border-color: var(--pip-green-muted);
    color: var(--pip-green-muted);
}

#panel-quests .due-date-edit-btn:hover {
    border-color: var(--pip-green);
    color: var(--pip-green);
}

/* Faction tab due date styling - BLUE */
#panel-faction .due-date-row {
    color: rgba(92, 124, 250, 0.7);
}

#panel-faction .due-date-label {
    color: rgba(92, 124, 250, 0.7);
}

#panel-faction .due-date-value {
    color: #5c7cfa;
    background: rgba(92, 124, 250, 0.1);
    border-color: rgba(92, 124, 250, 0.3);
}

#panel-faction .due-date-value.soon {
    color: var(--pip-amber);
    background: rgba(255, 176, 48, 0.15);
    border-color: var(--pip-amber-muted);
    text-shadow: 0 0 4px var(--pip-amber);
}

#panel-faction .due-date-value.overdue {
    color: var(--red-bright);
    background: rgba(255, 64, 64, 0.15);
    border-color: var(--red-muted);
}

#panel-faction .due-date-edit-btn {
    border-color: rgba(92, 124, 250, 0.5);
    color: rgba(92, 124, 250, 0.7);
}

#panel-faction .due-date-edit-btn:hover {
    border-color: #5c7cfa;
    color: #5c7cfa;
}

.player-quest-campaign {
    display: block;
    font-size: 10px;
    font-weight: 600;
    color: var(--pip-amber);
    background: rgba(255, 193, 7, 0.1);
    padding: 2px 6px;
    border-radius: 2px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-top: 4px;
    width: fit-content;
}

.quest-item-reward {
    font-size: 11px;
    color: var(--pip-green);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 4px;
    opacity: 0.7;
}

/* Available Quest Styling */
.quest-item.available {
    border-left: 3px solid var(--pip-green-muted);
    opacity: 0.85;
}

.quest-item.available .quest-item-icon {
    color: var(--pip-green-muted);
}

/* Quest Status Badge */
.quest-status-badge {
    font-size: 11px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 3px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.quest-status-badge.available {
    color: var(--pip-green-muted);
    background: rgba(48, 255, 80, 0.1);
    border: 1px solid var(--pip-green-muted);
}

.quest-status-badge.active {
    color: var(--pip-green);
    background: rgba(48, 255, 80, 0.15);
    border: 1px solid var(--pip-green);
}

.quest-status-badge.completed {
    color: var(--text-dim);
    background: rgba(136, 136, 136, 0.15);
    border: 1px solid var(--text-dim);
}

/* Accept Quest Button */
.accept-quest-btn {
    background: linear-gradient(180deg, var(--pip-amber) 0%, #c79100 100%);
    color: var(--bg-darkest);
    border: none;
    padding: var(--spacing-sm) var(--spacing-lg);
    font-family: 'Share Tech Mono', monospace;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.15s ease;
    text-transform: uppercase;
}

.accept-quest-btn:hover {
    background: linear-gradient(180deg, #ffca28 0%, var(--pip-amber) 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(255, 193, 7, 0.3);
}

/* Complete Quest Button */
.complete-quest-btn {
    background: linear-gradient(180deg, var(--pip-green) 0%, #1a8a30 100%);
    color: var(--bg-darkest);
    border: none;
    padding: var(--spacing-sm) var(--spacing-lg);
    font-family: 'Share Tech Mono', monospace;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.15s ease;
    text-transform: uppercase;
    display: none;
    animation: pulse-glow 2s infinite;
}

.complete-quest-btn:hover {
    background: linear-gradient(180deg, #4eff62 0%, var(--pip-green) 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(48, 255, 80, 0.4);
}

@keyframes pulse-glow {
    0%, 100% {
        box-shadow: 0 0 8px rgba(48, 255, 80, 0.4);
    }
    50% {
        box-shadow: 0 0 16px rgba(48, 255, 80, 0.7);
    }
}

/* Preview Objectives (for available quests) */
.objective-item.preview {
    opacity: 0.6;
    cursor: default;
}

.objective-item.preview:hover {
    background: transparent;
}

/* Checkbox Styling */
.checkbox-group {
    flex-direction: row !important;
    align-items: center;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    cursor: pointer;
    text-transform: none !important;
}

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

.checkbox-text {
    font-size: 14px;
    color: var(--pip-green-muted);
}

/* Add Quest Form */
.add-quest-form {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

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

.form-group label {
    font-size: 14px;
    color: var(--text-dim);
    letter-spacing: 1px;
    text-transform: uppercase;
}

.label-hint {
    color: var(--text-dark);
    text-transform: none;
    letter-spacing: 0;
}

.form-group input,
.form-group textarea {
    background: var(--bg-darkest);
    border: 1px solid var(--pip-green-dim);
    color: var(--pip-green);
    font-family: 'Share Tech Mono', monospace;
    font-size: 14px;
    padding: var(--spacing-sm) var(--spacing-md);
    outline: none;
    transition: all 0.15s ease;
}

.form-group input:focus,
.form-group textarea:focus {
    border-color: var(--pip-green);
    box-shadow: 0 0 10px rgba(48, 255, 80, 0.2), inset 0 0 20px rgba(48, 255, 80, 0.05);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: var(--pip-green-dim);
}

.form-group textarea {
    resize: vertical;
    min-height: 120px;
}

.cancel-btn {
    background: transparent;
    border: 1px solid var(--pip-green-dim);
    color: var(--text-dim);
    font-family: 'Share Tech Mono', monospace;
    font-size: 14px;
    padding: var(--spacing-xs) var(--spacing-sm);
    cursor: pointer;
    letter-spacing: 1px;
    transition: all 0.15s ease;
}

.cancel-btn:hover {
    border-color: var(--red-bright);
    color: var(--red-bright);
    box-shadow: 0 0 8px rgba(255, 64, 64, 0.3);
}

.create-quest-btn {
    background: transparent;
    border: 2px solid var(--pip-green);
    color: var(--pip-green);
    font-family: 'Share Tech Mono', monospace;
    font-size: 15px;
    font-weight: 500;
    padding: var(--spacing-md);
    cursor: pointer;
    transition: all 0.15s ease;
    margin-top: var(--spacing-md);
    letter-spacing: 2px;
    text-transform: uppercase;
}

.create-quest-btn:hover {
    background: var(--pip-green-dim);
    box-shadow: 0 0 15px rgba(48, 255, 80, 0.4);
    text-shadow: 0 0 10px var(--pip-green);
}

/* No Quest Selected - Pip-Boy Terminal Style */
.no-quest-selected {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--pip-green-dim);
    text-align: center;
    font-family: 'Share Tech Mono', monospace;
}

.empty-icon {
    font-size: 48px;
    margin-bottom: var(--spacing-md);
    opacity: 0.3;
    filter: drop-shadow(0 0 10px var(--pip-green));
}

.no-quest-selected p {
    font-size: 15px;
    margin-bottom: var(--spacing-xs);
    letter-spacing: 1px;
    text-transform: uppercase;
}

.no-quest-selected .hint {
    font-size: 14px;
    color: var(--pip-green-dark);
    letter-spacing: 0.5px;
}

/* Quest Details */
.quest-details {
    display: flex;
    flex-direction: column;
}

.quest-detail-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
    padding-bottom: var(--spacing-md);
    border-bottom: 1px solid var(--pip-green-dim);
}

.quest-detail-title {
    font-family: 'Share Tech Mono', monospace;
    font-size: 16px;
    color: var(--pip-green);
    font-weight: 500;
    flex: 1;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-shadow: 0 0 10px var(--pip-green);
}

.quest-reward-badge {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    background: transparent;
    border: 1px solid var(--pip-green-muted);
    padding: var(--spacing-xs) var(--spacing-md);
    font-family: 'Share Tech Mono', monospace;
    font-size: 14px;
    font-weight: 500;
    color: var(--pip-green);
}

.reward-icon {
    color: var(--pip-green);
    filter: drop-shadow(0 0 4px var(--pip-green));
}

.reward-cap-icon {
    width: 16px;
    height: 16px;
    object-fit: contain;
    filter: drop-shadow(0 0 4px var(--pip-green));
}

/* Quest Progress Bar - Pip-Boy Terminal Style */
.quest-progress-bar {
    height: 10px;
    background: var(--bg-darkest);
    margin-bottom: var(--spacing-xs);
    overflow: hidden;
    border: 1px solid var(--pip-green-dim);
    position: relative;
}

.quest-progress-bar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: repeating-linear-gradient(
        90deg,
        transparent,
        transparent 8px,
        var(--pip-green-dim) 8px,
        var(--pip-green-dim) 9px
    );
    opacity: 0.3;
}

.quest-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--pip-green-dark), var(--pip-green));
    transition: width 0.3s ease;
    box-shadow: 0 0 10px var(--pip-green);
    position: relative;
}

.quest-progress-text {
    font-family: 'Share Tech Mono', monospace;
    font-size: 14px;
    color: var(--pip-green-muted);
    letter-spacing: 1px;
}

/* Objectives List */
.objectives-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-sm);
    overflow-y: auto;
    flex: 1;
}

.objective-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background: linear-gradient(90deg, var(--bg-darkest) 0%, var(--bg-dark) 100%);
    border: 1px solid var(--pip-green-dim);
    cursor: pointer;
    transition: all 0.15s ease;
    font-family: 'Share Tech Mono', monospace;
    position: relative;
}

.objective-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 6px solid transparent;
    transition: border-color 0.15s ease;
}

.objective-item:hover {
    border-color: var(--pip-green-muted);
    background: linear-gradient(90deg, var(--bg-dark) 0%, var(--bg-medium) 100%);
    box-shadow: 0 0 10px rgba(48, 255, 80, 0.1);
}

.objective-item:hover::before {
    border-left-color: var(--pip-green);
}

.objective-item.completed {
    opacity: 0.5;
}

.objective-checkbox {
    width: 18px;
    height: 18px;
    border: 2px solid var(--pip-green-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    color: var(--pip-green);
    flex-shrink: 0;
    background: var(--bg-darkest);
}

.objective-item.completed .objective-checkbox {
    background: var(--pip-green-dark);
    border-color: var(--pip-green);
    box-shadow: 0 0 8px var(--pip-green);
}

.objective-text {
    flex: 1;
    font-size: 15px;
    color: var(--text-normal);
    letter-spacing: 0.5px;
}

.objective-item.completed .objective-text {
    text-decoration: line-through;
    color: var(--text-dim);
}

.objective-reward {
    font-size: 14px;
    color: var(--pip-amber);
    font-weight: 500;
    text-shadow: 0 0 4px var(--pip-amber);
}

/* ============================================
   UNIFIED TASK ITEM STYLES (Quest Log, Empire, Faction)
   ============================================ */

/* Quest Task Items - Green Theme */
.quest-task-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 16px;
    background: rgba(48, 255, 80, 0.05);
    border: 1px solid rgba(48, 255, 80, 0.15);
    margin-bottom: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: 'Rajdhani', sans-serif;
}

.quest-task-item:hover {
    background: rgba(48, 255, 80, 0.12);
    border-color: rgba(48, 255, 80, 0.4);
}

.quest-task-item.completed {
    opacity: 0.6;
}

.quest-task-item.preview {
    cursor: default;
    opacity: 0.7;
}

.quest-task-item.preview:hover {
    background: rgba(48, 255, 80, 0.05);
    border-color: rgba(48, 255, 80, 0.15);
}

.quest-task-item .task-checkbox {
    width: 20px;
    height: 20px;
    min-width: 20px;
    border: 1px solid rgba(48, 255, 80, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: var(--pip-green);
    flex-shrink: 0;
}

.quest-task-item.completed .task-checkbox {
    background: rgba(48, 255, 80, 0.2);
    border-color: var(--pip-green);
    color: var(--pip-green);
}

.quest-task-item .task-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.quest-task-item .task-text {
    font-family: 'Rajdhani', sans-serif;
    font-size: 13px;
    color: rgba(48, 255, 80, 0.9);
}

.quest-task-item.completed .task-text {
    text-decoration: line-through;
    color: rgba(48, 255, 80, 0.5);
}

.quest-task-item .task-reward {
    font-family: 'Share Tech Mono', monospace;
    font-size: 11px;
    color: var(--pip-green);
    opacity: 0.7;
}

.quest-task-item.completed .task-reward {
    opacity: 0.3;
}

/* Contract Task Items - Gold Theme */
.contract-task-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 16px;
    background: rgba(255, 183, 77, 0.05);
    border: 1px solid rgba(255, 183, 77, 0.15);
    margin-bottom: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: 'Rajdhani', sans-serif;
}

.contract-task-item:hover {
    background: rgba(255, 183, 77, 0.12);
    border-color: rgba(255, 183, 77, 0.4);
}

.contract-task-item.completed {
    opacity: 0.6;
}

.contract-task-item.preview {
    cursor: default;
    opacity: 0.7;
}

.contract-task-item.preview:hover {
    background: rgba(255, 183, 77, 0.05);
    border-color: rgba(255, 183, 77, 0.15);
}

.contract-task-item .task-checkbox {
    width: 20px;
    height: 20px;
    min-width: 20px;
    border: 1px solid rgba(255, 183, 77, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: #ffb74d;
    flex-shrink: 0;
}

.contract-task-item.completed .task-checkbox {
    background: rgba(255, 215, 0, 0.2);
    border-color: #ffd700;
    color: #ffd700;
}

.contract-task-item .task-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.contract-task-item .task-text {
    font-family: 'Rajdhani', sans-serif;
    font-size: 13px;
    color: rgba(255, 183, 77, 0.9);
}

.contract-task-item.completed .task-text {
    text-decoration: line-through;
    color: rgba(255, 183, 77, 0.5);
}

.contract-task-item .task-reward {
    font-family: 'Share Tech Mono', monospace;
    font-size: 11px;
    color: #ffd700;
    opacity: 0.7;
}

.contract-task-item.completed .task-reward {
    opacity: 0.3;
}

/* Quest Actions - Pip-Boy Terminal Style */
.quest-actions {
    margin-top: auto;
    padding-top: var(--spacing-lg);
    border-top: 1px solid var(--pip-green-dim);
    display: flex;
    gap: var(--spacing-md);
}

.abandon-quest-btn {
    background: transparent;
    border: 1px solid var(--red-muted);
    color: var(--red-bright);
    font-family: 'Share Tech Mono', monospace;
    font-size: 14px;
    padding: var(--spacing-sm) var(--spacing-md);
    cursor: pointer;
    transition: all 0.15s ease;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.abandon-quest-btn:hover {
    background: rgba(255, 64, 64, 0.1);
    box-shadow: 0 0 10px rgba(255, 64, 64, 0.3);
    text-shadow: 0 0 6px var(--red-bright);
}

.panel-column {
    display: flex;
    flex-direction: column;
}

/* Section Headers */
.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-md);
    padding-bottom: var(--spacing-xs);
    border-bottom: 1px solid var(--pip-green-dim);
    position: relative;
}

.section-header::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 60px;
    height: 1px;
    background: var(--pip-green);
    box-shadow: 0 0 6px var(--pip-green);
}

.section-header span:first-child {
    font-family: 'Share Tech Mono', monospace;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 3px;
    color: var(--pip-green);
    text-transform: uppercase;
    text-shadow: 0 0 6px rgba(48, 255, 80, 0.5);
}

.header-stats {
    font-family: 'Share Tech Mono', monospace;
    font-size: 14px;
    color: var(--text-dim);
    letter-spacing: 1px;
}

/* Contracts/Quest List */
.contracts-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.contract-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-md);
    background: var(--bg-medium);
    border: 1px solid var(--border-subtle);
    transition: all 0.2s ease;
}

.contract-item:hover {
    border-color: var(--border-gold);
    background: var(--bg-light);
}

.contract-item.completed {
    opacity: 0.5;
}

.contract-info {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.contract-name {
    font-size: 14px;
    color: var(--text-bright);
    font-weight: 500;
}

.contract-desc {
    font-size: 14px;
    color: var(--text-dim);
}

.contract-reward {
    font-size: 15px;
    color: var(--gold-muted);
    font-weight: 600;
}

.contract-status {
    font-size: 16px;
}

/* Quest Detail Box */
.quest-detail-box {
    background: var(--bg-medium);
    border: 1px solid var(--border-subtle);
    padding: var(--spacing-lg);
}

.quest-title {
    font-size: 14px;
    color: var(--gold-bright);
    font-weight: 600;
    margin-bottom: var(--spacing-sm);
    letter-spacing: 1px;
}

.quest-description {
    font-size: 14px;
    color: var(--text-normal);
    line-height: 1.6;
}

/* Progress Rows */
.progress-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

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

.progress-name {
    font-size: 14px;
    color: var(--text-dim);
    width: 80px;
    flex-shrink: 0;
}

.progress-bar-mini {
    flex: 1;
    height: 6px;
    background: var(--bg-lighter);
    overflow: hidden;
}

.progress-fill-mini {
    height: 100%;
    background: var(--gold-muted);
    transition: width 0.5s ease;
}

.progress-fill-mini.xp {
    background: var(--blue-muted);
}

.progress-value {
    font-size: 14px;
    color: var(--text-normal);
    width: 40px;
    text-align: right;
}

/* Journal Layout - Two Panel */
.journal-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: var(--spacing-xl);
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

/* Left: Date Index + Quick Notes */
.journal-index {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.journal-date-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
    max-height: 50%;
}

/* Date Card */
.journal-date-card {
    display: flex;
    gap: 10px;
    padding: 8px 10px;
    cursor: pointer;
    background: rgba(255, 215, 0, 0.02);
    border: 1px solid rgba(255, 215, 0, 0.06);
    border-left: 3px solid rgba(255, 215, 0, 0.1);
    transition: all 0.15s;
}

.journal-date-card:hover {
    background: rgba(255, 215, 0, 0.06);
    border-left-color: rgba(255, 215, 0, 0.3);
}

.journal-date-card.selected {
    background: rgba(255, 215, 0, 0.08);
    border-color: rgba(255, 215, 0, 0.2);
    border-left-color: var(--gold-dim);
}

.journal-date-card-date {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 42px;
    flex-shrink: 0;
}

.jdc-day {
    font-family: 'Share Tech Mono', monospace;
    font-size: 9px;
    color: var(--text-dim);
    letter-spacing: 1px;
}

.jdc-monthday {
    font-family: 'Share Tech Mono', monospace;
    font-size: 11px;
    color: var(--pip-green);
    letter-spacing: 0.5px;
}

.journal-date-card-info {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.jdc-preview {
    font-family: 'Rajdhani', sans-serif;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-bright);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

.jdc-meta {
    display: flex;
    gap: 6px;
    margin-top: 2px;
}

.jdc-tag-count {
    font-family: 'Share Tech Mono', monospace;
    font-size: 9px;
    color: var(--text-dim);
}

.jdc-has-analysis {
    font-family: 'Share Tech Mono', monospace;
    font-size: 9px;
    color: var(--pip-amber-muted);
    letter-spacing: 0.5px;
}

/* Right: Entry Reader */
.journal-reader {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow-y: auto;
    background: linear-gradient(180deg, rgba(255, 215, 0, 0.02) 0%, transparent 100%);
    border: 1px solid rgba(255, 215, 0, 0.08);
    border-radius: 4px;
    padding: var(--spacing-lg);
}

.journal-no-selection {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    color: var(--text-dim);
    font-family: 'Share Tech Mono', monospace;
    font-size: 13px;
    gap: var(--spacing-sm);
}

.journal-no-selection .empty-icon {
    font-size: 32px;
    opacity: 0.3;
}

.journal-detail-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-sm);
    padding-bottom: var(--spacing-sm);
    border-bottom: 1px solid rgba(255, 215, 0, 0.1);
}

.journal-detail-header .journal-time {
    font-family: 'Share Tech Mono', monospace;
    font-size: 11px;
    color: var(--text-dim);
}

.journal-detail-header .journal-delete-btn {
    margin-left: auto;
}

.journal-entry-detail .journal-tags {
    margin-bottom: var(--spacing-md);
}

/* Quick Notes */
.quick-notes-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: var(--spacing-sm);
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

.quick-note {
    background: rgba(255, 176, 48, 0.04);
    border-left: 2px solid rgba(255, 176, 48, 0.3);
    padding: 8px 12px;
    border-radius: 0 3px 3px 0;
}

.quick-note-text {
    font-family: 'Rajdhani', sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-bright);
    line-height: 1.4;
}

.quick-note-meta {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-top: 4px;
}

.quick-note-time {
    font-family: 'Share Tech Mono', monospace;
    font-size: 10px;
    color: var(--text-dim);
}

.quick-note-source {
    font-family: 'Share Tech Mono', monospace;
    font-size: 9px;
    color: var(--pip-amber-dark, #b8860b);
    background: rgba(255, 176, 48, 0.08);
    padding: 1px 5px;
    border-radius: 2px;
    letter-spacing: 1px;
}

.quick-note-delete {
    background: none;
    border: none;
    color: var(--text-dim);
    font-size: 16px;
    cursor: pointer;
    margin-left: auto;
    opacity: 0;
    transition: opacity 0.2s;
    padding: 0 4px;
}

.quick-note:hover .quick-note-delete {
    opacity: 0.6;
}

.quick-note-delete:hover {
    opacity: 1 !important;
    color: #ff4444;
}

/* Journal Content Styles (used inside reader) */
.journal-content {
    font-size: 14px;
    color: var(--text-bright);
    line-height: 1.6;
    margin-bottom: var(--spacing-sm);
}

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

.journal-tags {
    display: flex;
    gap: var(--spacing-xs);
}

.journal-tag {
    font-size: 9px;
    padding: 2px 6px;
    background: var(--gold-dark);
    color: var(--text-bright);
    letter-spacing: 1px;
    text-transform: uppercase;
}

.journal-time {
    font-size: 14px;
    color: var(--text-dark);
}

/* Journal Form */
.journal-form {
    background: var(--bg-dark);
    border: 1px solid var(--pip-green-dim);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
}

.journal-form textarea {
    width: 100%;
    background: var(--bg-darkest);
    border: 1px solid var(--pip-green-dim);
    color: var(--text-bright);
    font-family: 'Rajdhani', sans-serif;
    font-size: 14px;
    padding: var(--spacing-md);
    resize: vertical;
    min-height: 150px;
}

.journal-form textarea:focus {
    outline: none;
    border-color: var(--pip-green);
    box-shadow: 0 0 10px rgba(48, 255, 80, 0.2);
}

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

.add-entry-btn {
    background: transparent;
    border: 1px solid var(--pip-green);
    color: var(--pip-green);
    padding: var(--spacing-xs) var(--spacing-md);
    font-family: 'Share Tech Mono', monospace;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.add-entry-btn:hover {
    background: rgba(48, 255, 80, 0.1);
    box-shadow: 0 0 10px rgba(48, 255, 80, 0.3);
}

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

.journal-date {
    font-family: 'Share Tech Mono', monospace;
    font-size: 12px;
    color: var(--pip-green);
    letter-spacing: 1px;
    text-transform: uppercase;
}

.journal-status {
    font-size: 10px;
    padding: 2px 8px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.journal-status.pending {
    background: rgba(255, 183, 77, 0.2);
    color: var(--pip-amber);
    border: 1px solid var(--pip-amber-dark);
}

.journal-delete-btn {
    margin-left: auto;
    background: transparent;
    border: none;
    color: var(--text-dark);
    font-size: 18px;
    cursor: pointer;
    padding: 0 8px;
    opacity: 0.5;
    transition: all 0.2s ease;
}

.journal-delete-btn:hover {
    opacity: 1;
    color: var(--red-bright);
}

/* Claudesworth Analysis Section */
.journal-analysis {
    margin-top: var(--spacing-md);
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--pip-amber-dark);
}

.analysis-header {
    font-family: 'Share Tech Mono', monospace;
    font-size: 11px;
    color: var(--pip-amber);
    letter-spacing: 2px;
    margin-bottom: var(--spacing-sm);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.analysis-header::before {
    content: '>';
    color: var(--pip-amber);
}

.analysis-content {
    font-size: 13px;
    color: var(--pip-amber-muted);
    line-height: 1.7;
    font-style: italic;
    padding-left: var(--spacing-md);
    border-left: 2px solid var(--pip-amber-dark);
}

/* Activity Feed */
.activity-filters {
    display: flex;
    gap: 6px;
    padding: 0 var(--spacing-md) var(--spacing-md);
    flex-wrap: wrap;
}

.activity-filter {
    background: var(--bg-dark);
    border: 1px solid var(--border-subtle);
    color: var(--text-dim);
    font-family: 'Share Tech Mono', monospace;
    font-size: 11px;
    padding: 4px 12px;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.2s;
}

.activity-filter:hover {
    color: var(--pip-green-muted);
    border-color: var(--pip-green-dark);
}

.activity-filter.active {
    color: var(--pip-green);
    border-color: var(--pip-green-muted);
    background: var(--pip-green-dim);
    text-shadow: 0 0 6px var(--pip-green);
}

.activity-feed {
    display: flex;
    flex-direction: column;
    padding: 0 var(--spacing-md);
    overflow-y: auto;
    max-height: calc(100vh - 200px);
}

.activity-day-header {
    font-family: 'Share Tech Mono', monospace;
    font-size: 11px;
    color: var(--pip-amber-muted);
    letter-spacing: 1px;
    padding: 12px 0 6px 0;
    border-bottom: 1px solid var(--pip-amber-dark);
    margin-bottom: 4px;
    position: sticky;
    top: 0;
    background: var(--bg-darkest);
    z-index: 1;
}

.activity-event {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid rgba(48, 255, 80, 0.06);
}

.activity-event-time {
    font-family: 'Share Tech Mono', monospace;
    font-size: 11px;
    color: var(--text-dark);
    min-width: 42px;
    flex-shrink: 0;
}

.activity-event-text {
    flex: 1;
    font-size: 13px;
    color: var(--text-normal);
}

.activity-event.spend .activity-event-text {
    color: var(--text-dim);
}

.activity-amount {
    font-family: 'Share Tech Mono', monospace;
    font-size: 12px;
    font-weight: 600;
    padding: 2px 8px;
    min-width: 45px;
    text-align: right;
    flex-shrink: 0;
}

.activity-amount.positive {
    color: var(--pip-green);
    text-shadow: 0 0 6px rgba(48, 255, 80, 0.4);
}

.activity-amount.negative {
    color: var(--red-bright);
    text-shadow: 0 0 6px rgba(255, 64, 64, 0.3);
}

.activity-empty {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-dark);
    font-size: 13px;
    font-style: italic;
}

.activity-load-more {
    text-align: center;
    padding: 12px;
    color: var(--text-dark);
    font-size: 11px;
    font-style: italic;
    border-top: 1px solid var(--border-subtle);
    margin-top: 8px;
}

/* Guild Tab - Buffs */
.buffs-grid, .debuffs-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-md);
}

.buff-card {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background: var(--bg-medium);
    border: 1px solid var(--green-muted);
    min-width: 200px;
}

.buff-card.debuff {
    border-color: var(--red-muted);
}

.buff-icon {
    font-size: 24px;
}

.buff-info {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.buff-name {
    font-size: 15px;
    color: var(--text-bright);
    font-weight: 500;
}

.buff-desc {
    font-size: 14px;
    color: var(--text-dim);
}

/* Player Dashboard Layout */
.player-dashboard {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.dashboard-top {
    display: grid;
    grid-template-columns: 200px 1fr 280px;
    gap: var(--spacing-lg);
}

.dashboard-middle {
    flex: 1;
    min-height: 0;
}

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

.dashboard-panel {
    background: linear-gradient(135deg, var(--bg-medium) 0%, var(--bg-dark) 100%);
    border: 1px solid var(--pip-green-dim);
    padding: var(--spacing-md);
    position: relative;
    clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
}

.dashboard-panel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--pip-green-dim), transparent);
}

/* Character Panel */
.character-panel {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.character-panel .avatar-frame {
    width: 120px;
    height: 140px;
    margin: 0 auto;
}

.character-panel .pixel-character {
    width: 100px;
    height: 120px;
}

.character-panel .coin-balance-box {
    padding: var(--spacing-sm);
}

.character-panel .coin-icon-large {
    font-size: 24px;
}

.character-panel .coin-balance-value {
    font-size: 24px;
}

/* Campaign Panel */
.campaign-panel {
    display: flex;
    flex-direction: column;
}

.campaign-main-quest {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background: var(--bg-dark);
    margin-bottom: var(--spacing-md);
}

.campaign-quest-icon {
    font-size: 32px;
    color: var(--gold-bright);
}

.campaign-quest-info h3 {
    font-size: 14px;
    color: var(--gold-bright);
    margin-bottom: 4px;
}

.campaign-quest-info p {
    font-size: 14px;
    color: var(--text-dim);
}

.campaign-progress-bar {
    height: 14px;
    background: var(--bg-darkest);
    margin-bottom: var(--spacing-xs);
    position: relative;
    border: 1px solid var(--pip-green-dim);
}

.campaign-progress-bar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: repeating-linear-gradient(
        90deg,
        transparent,
        transparent 18px,
        var(--pip-green-dim) 18px,
        var(--pip-green-dim) 19px
    );
    opacity: 0.4;
    z-index: 1;
}

.campaign-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--pip-green-dark), var(--pip-green));
    transition: width 0.5s ease;
    box-shadow: 0 0 15px var(--pip-green);
}

.campaign-progress-text {
    font-family: 'Share Tech Mono', monospace;
    font-size: 14px;
    color: var(--pip-green-muted);
    margin-bottom: var(--spacing-md);
    letter-spacing: 1px;
}

.campaign-milestones {
    display: flex;
    justify-content: space-between;
    padding: 0 var(--spacing-sm);
    margin-top: var(--spacing-sm);
}

.milestone {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.milestone-marker {
    width: 10px;
    height: 10px;
    border: 2px solid var(--pip-green-dim);
    background: var(--bg-darkest);
    transition: all 0.3s ease;
}

.milestone.reached .milestone-marker {
    background: var(--pip-green);
    border-color: var(--pip-green);
    box-shadow: 0 0 8px var(--pip-green);
}

.milestone-label {
    font-family: 'Share Tech Mono', monospace;
    font-size: 9px;
    color: var(--text-dark);
    letter-spacing: 1px;
}

.milestone.reached .milestone-label {
    color: var(--pip-green-muted);
}

/* Quests Summary Panel */
.quests-summary-panel {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.player-quests-list {
    flex: 1;
    overflow-y: auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--spacing-sm);
    align-content: start;
}

.player-quest-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px 16px;
    background: rgba(48, 255, 80, 0.08);
    border: 1px solid rgba(48, 255, 80, 0.25);
    cursor: pointer;
    transition: all 0.15s ease;
    font-family: 'Rajdhani', sans-serif;
    position: relative;
}

.player-quest-card::before {
    display: none;
}

.player-quest-card:hover {
    background: rgba(48, 255, 80, 0.15);
    border-color: var(--pip-green);
    box-shadow: 0 0 10px rgba(48, 255, 80, 0.15);
}

.player-quest-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--spacing-sm);
}

.player-quest-name {
    font-size: 13px;
    color: var(--text-bright);
    font-weight: 600;
    letter-spacing: 0.5px;
}

.player-quest-reward {
    font-size: 11px;
    color: var(--pip-green);
    opacity: 0.7;
}

.player-quest-progress {
    height: 6px;
    background: var(--bg-darkest);
    margin-bottom: var(--spacing-xs);
    border: 1px solid var(--pip-green-dim);
}

.player-quest-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--pip-green-dark) 0%, var(--pip-green) 100%);
    transition: width 0.3s ease;
    box-shadow: 0 0 6px var(--pip-green);
}

.player-quest-status {
    font-size: 11px;
    color: var(--pip-green-muted);
    letter-spacing: 0.5px;
}

/* ============================================
   NEW PLAYER DASHBOARD - FALLOUT STYLE
   ============================================ */

.player-dashboard-new {
    display: grid;
    grid-template-columns: 280px 1fr;
    grid-template-rows: 1fr;
    gap: var(--spacing-lg);
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

/* Party Panel (Left Side) */
.party-panel {
    background: linear-gradient(135deg, var(--bg-medium) 0%, var(--bg-dark) 100%);
    border: 1px solid var(--pip-green-dim);
    padding: var(--spacing-sm) var(--spacing-md);
    display: flex;
    flex-direction: column;
    clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
    position: relative;
    overflow-y: auto;
    min-height: 0;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.party-panel::-webkit-scrollbar {
    display: none;
}

.party-panel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--pip-green-dim), transparent);
}

.party-header {
    font-family: 'Share Tech Mono', monospace;
    font-size: 10px;
    color: var(--pip-green);
    text-shadow: 0 0 8px var(--pip-green);
    letter-spacing: 3px;
    text-align: center;
    padding-bottom: 4px;
    margin-bottom: 6px;
    border-bottom: 1px solid var(--pip-green-dim);
}

.party-members {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-md);
}

.party-member {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    position: relative;
}

/* Hover tooltip for buffs/perks */
.party-member-tooltip {
    display: none;
    position: absolute;
    bottom: 105%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--bg-dark);
    border: 1px solid var(--pip-green-dim);
    padding: 8px 12px;
    border-radius: 4px;
    z-index: 100;
    min-width: 160px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6), 0 0 8px rgba(48, 255, 80, 0.1);
    flex-direction: column;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.party-member-tooltip::before {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: var(--pip-green-dim);
}

/* Only show tooltip if it has content */
.party-member:hover .party-member-tooltip:not(:empty) {
    display: flex;
}

/* Hide Jack's tooltip when active-buffs is empty */
.party-member.player:hover .party-member-tooltip:has(.player-active-buffs:empty) {
    display: none;
}

.tooltip-perk-name {
    font-family: 'Share Tech Mono', monospace;
    font-size: 11px;
    font-weight: 600;
    color: var(--pip-amber);
    letter-spacing: 1px;
    text-transform: uppercase;
}

.tooltip-perk-desc {
    font-size: 10px;
    color: var(--text-normal);
}

.party-member-name {
    font-family: 'Share Tech Mono', monospace;
    font-size: 11px;
    color: var(--pip-green);
    text-shadow: 0 0 8px var(--pip-green);
    letter-spacing: 2px;
    font-weight: 500;
}

/* Player Avatar */
.party-avatar-large {
    width: 80px;
    height: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(ellipse at center, var(--bg-darkest) 0%, transparent 70%);
    position: relative;
}

.party-avatar-large::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(ellipse at center, rgba(48, 255, 80, 0.08) 0%, transparent 70%);
    pointer-events: none;
    z-index: 1;
}

.avatar-video {
    width: 100%;
    height: 100%;
    max-width: 80px;
    max-height: 110px;
    object-fit: cover;
    border-radius: 4px;
    filter: drop-shadow(0 0 10px rgba(48, 255, 80, 0.4)) sepia(100%) hue-rotate(70deg) saturate(150%) brightness(0.9);
}

/* Companion Avatar */
.party-avatar-small {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(ellipse at center, var(--bg-darkest) 0%, transparent 70%);
    position: relative;
    border-radius: 50%;
    overflow: hidden;
    border: 1px solid var(--pip-green-dim);
    box-shadow: 0 0 8px rgba(48, 255, 80, 0.15);
}

.party-avatar-small::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(ellipse at center, rgba(48, 255, 80, 0.1) 0%, transparent 70%);
    pointer-events: none;
    z-index: 1;
}

.companion-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: drop-shadow(0 0 8px rgba(48, 255, 80, 0.3)) sepia(100%) hue-rotate(70deg) saturate(150%) brightness(0.9);
}

.party-member.companion .party-member-name {
    font-size: 9px;
    text-shadow: 0 0 6px var(--pip-green);
    letter-spacing: 1px;
}

/* Player Active Buffs */
.player-active-buffs {
    display: none;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
    margin-top: var(--spacing-xs);
    max-width: 180px;
}

.player-buff-tag {
    font-family: 'Share Tech Mono', monospace;
    font-size: 9px;
    padding: 2px 6px;
    background: rgba(48, 255, 80, 0.15);
    border: 1px solid rgba(48, 255, 80, 0.4);
    border-radius: 2px;
    color: var(--pip-green);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

/* Companion Perk */
.party-perk {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    background: linear-gradient(135deg, rgba(48, 255, 80, 0.08) 0%, rgba(48, 255, 80, 0.02) 100%);
    border: 1px solid var(--pip-green-dim);
    border-radius: 4px;
    margin-top: var(--spacing-md);
}

.perk-icon {
    font-size: 18px;
    filter: drop-shadow(0 0 4px rgba(48, 255, 80, 0.5));
}

.perk-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.perk-name {
    font-family: 'Share Tech Mono', monospace;
    font-size: 10px;
    color: var(--pip-green);
    letter-spacing: 1px;
    text-shadow: 0 0 6px var(--pip-green);
}

.perk-desc {
    font-family: 'Share Tech Mono', monospace;
    font-size: 11px;
    color: var(--pip-green-bright);
    text-shadow: 0 0 8px var(--pip-green-bright);
}

/* Party Quick Stats */
.party-stats {
    display: flex;
    justify-content: space-around;
    padding: var(--spacing-md) var(--spacing-sm);
    background: rgba(0, 0, 0, 0.3);
    border-top: 1px solid var(--pip-green-dim);
    border-bottom: 1px solid var(--pip-green-dim);
    margin-top: var(--spacing-md);
}

.party-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.party-stat .stat-value {
    font-family: 'Share Tech Mono', monospace;
    font-size: 20px;
    color: var(--pip-green-bright);
    text-shadow: 0 0 10px var(--pip-green);
    font-weight: bold;
}

.party-stat .stat-label {
    font-family: 'Share Tech Mono', monospace;
    font-size: 9px;
    color: var(--pip-green-dim);
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* Unified Today Block (Player tab) */
.player-today-block {
    margin-top: 8px;
    padding: 6px 8px;
    background: linear-gradient(180deg, rgba(48, 255, 80, 0.05) 0%, transparent 100%);
    border: 1px solid var(--pip-green-dim);
    border-radius: 4px;
}

.daily-header {
    font-family: 'Share Tech Mono', monospace;
    font-size: 10px;
    color: var(--pip-green);
    letter-spacing: 2px;
    text-align: center;
    padding-bottom: var(--spacing-xs);
    margin-bottom: var(--spacing-sm);
    border-bottom: 1px dashed var(--pip-green-dim);
    text-shadow: 0 0 6px var(--pip-green);
}

.today-sub-section {
    padding-top: 6px;
    margin-top: 6px;
    border-top: 1px dashed rgba(48, 255, 80, 0.12);
}

.today-sub-section:first-of-type {
    padding-top: 0;
    margin-top: 0;
    border-top: none;
}

.today-sub-label {
    font-family: 'Share Tech Mono', monospace;
    font-size: 8px;
    color: var(--text-secondary);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.daily-stats {
    display: flex;
    justify-content: space-around;
}

.daily-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.daily-stat .daily-value {
    font-family: 'Share Tech Mono', monospace;
    font-size: 14px;
    color: var(--gold-bright);
    text-shadow: 0 0 8px var(--gold-primary);
    font-weight: bold;
}

.daily-stat .daily-label {
    font-family: 'Share Tech Mono', monospace;
    font-size: 8px;
    color: var(--text-secondary);
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* Player Bounty rows (compact) */
.player-bounty-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.player-bounty-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 4px;
    font-family: 'Share Tech Mono', monospace;
    font-size: 11px;
}

.player-bounty-check {
    color: var(--pip-green-dim);
    font-size: 10px;
    flex-shrink: 0;
}

.player-bounty-name {
    color: var(--text-primary);
    flex: 1;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 10px;
}

.player-bounty-caps {
    color: var(--gold-bright);
    font-weight: bold;
    flex-shrink: 0;
    font-size: 10px;
    text-shadow: 0 0 6px var(--gold-primary);
}

.player-bounty-row.done {
    opacity: 0.45;
}

.player-bounty-row.done .player-bounty-check {
    color: var(--pip-green);
}

.player-bounty-row.done .player-bounty-name {
    text-decoration: line-through;
}

.player-bounty-empty {
    font-family: 'Share Tech Mono', monospace;
    font-size: 10px;
    color: var(--text-secondary);
    text-align: center;
    padding: var(--spacing-xs);
    font-style: italic;
}

/* Player Daily Habit rows (compact) */

.player-dailies-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.player-daily-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 4px;
    font-family: 'Share Tech Mono', monospace;
    font-size: 11px;
    cursor: pointer;
    transition: background 0.15s;
    border-radius: 2px;
}

.player-daily-row:hover {
    background: rgba(48, 255, 80, 0.08);
}

.player-daily-check {
    color: var(--pip-green-dim);
    font-size: 10px;
    flex-shrink: 0;
}

.player-daily-name {
    color: var(--text-primary);
    flex: 1;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 10px;
}

.player-daily-streak {
    color: var(--gold-bright);
    font-size: 9px;
    flex-shrink: 0;
    text-shadow: 0 0 6px var(--gold-primary);
    letter-spacing: 0.5px;
}

.player-daily-row.done {
    opacity: 0.45;
}

.player-daily-row.done .player-daily-check {
    color: var(--pip-green);
}

.player-daily-row.done .player-daily-name {
    text-decoration: line-through;
}

/* Water Tracker */
.water-litres {
    display: flex;
    align-items: center;
    gap: 8px;
}

.water-litre {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    background: var(--bg-darkest);
    border: 1px solid var(--border-subtle);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
}

.water-litre:hover {
    border-color: #4a9eff;
}

.water-litre.filled {
    border-color: rgba(74, 158, 255, 0.5);
    background: rgba(74, 158, 255, 0.12);
}

.water-litre-icon {
    font-size: 16px;
    color: #4a9eff;
}

.water-litre-label {
    font-family: 'Share Tech Mono', monospace;
    font-size: 12px;
    color: var(--text-dim);
}

.water-litre.filled .water-litre-label {
    color: #4a9eff;
}

/* Supplement colors */
.supplement-d3k2 { border-color: #805010; }
.supplement-d3k2 .water-litre-icon { color: #c08020; }
.supplement-d3k2 .water-litre-label { color: var(--text-dim); }
.supplement-d3k2.filled { border-color: #c08020; background: rgba(192, 128, 32, 0.12); }
.supplement-d3k2.filled .water-litre-icon { color: #ffb030; }
.supplement-d3k2.filled .water-litre-label { color: #c08020; }

.supplement-mg_ash { border-color: #158030; }
.supplement-mg_ash .water-litre-icon { color: #20c040; }
.supplement-mg_ash .water-litre-label { color: var(--text-dim); }
.supplement-mg_ash.filled { border-color: #20c040; background: rgba(32, 192, 64, 0.12); }
.supplement-mg_ash.filled .water-litre-icon { color: #30ff50; }
.supplement-mg_ash.filled .water-litre-label { color: #20c040; }

.water-summary {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-left: 4px;
}

.water-remaining {
    font-family: 'Share Tech Mono', monospace;
    font-size: 11px;
    color: var(--text-dim);
}

.water-done {
    font-family: 'Share Tech Mono', monospace;
    font-size: 11px;
    color: #4a9eff;
    letter-spacing: 1px;
}

.water-streak {
    font-family: 'Share Tech Mono', monospace;
    font-size: 10px;
    color: #4a9eff;
}

/* Player Content Section (Right Side) */
.player-content-section {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
    min-height: 0;
    overflow: hidden;
}

/* Primary Objective Panel - Compact Version */
.primary-objective-panel {
    background: rgba(48, 255, 80, 0.06);
    border: 1px solid rgba(48, 255, 80, 0.25);
    padding: 12px 16px;
    position: relative;
    margin-bottom: var(--spacing-sm);
    flex-shrink: 0;
}

.primary-objective-panel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--pip-green), transparent);
}

.objective-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.objective-marker {
    font-family: 'Share Tech Mono', monospace;
    font-size: 12px;
    color: var(--pip-green);
    text-shadow: 0 0 8px var(--pip-green);
}

.objective-title {
    font-family: 'Share Tech Mono', monospace;
    font-size: 11px;
    color: var(--pip-green);
    letter-spacing: 1.5px;
    text-shadow: 0 0 6px var(--pip-green);
}

.objective-content {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    background: rgba(48, 255, 80, 0.05);
    border-left: 2px solid var(--pip-green);
    margin-bottom: 10px;
}

.objective-name {
    font-family: 'Rajdhani', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #50ff70;
    margin: 0;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.objective-desc {
    font-family: 'Rajdhani', sans-serif;
    font-size: 12px;
    color: rgba(48, 255, 80, 0.6);
    letter-spacing: 0.3px;
    margin: 0;
}

/* Progress bar with integrated milestones */
.objective-progress-bar {
    height: 20px;
    background: rgba(48, 255, 80, 0.1);
    margin-bottom: 6px;
    position: relative;
    border: 1px solid rgba(48, 255, 80, 0.25);
    border-radius: 2px;
}

.objective-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #28a745, #30ff50);
    transition: width 0.5s ease;
    box-shadow: 0 0 10px rgba(48, 255, 80, 0.4);
    position: relative;
    z-index: 1;
}

.objective-progress-text {
    font-family: 'Share Tech Mono', monospace;
    font-size: 11px;
    color: rgba(48, 255, 80, 0.7);
    margin-bottom: 0;
    letter-spacing: 0.5px;
}

/* Milestones as markers on the progress bar */
.objective-milestones {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    pointer-events: none;
}

.obj-milestone {
    position: absolute;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Position milestones at their percentage points */
.obj-milestone[data-target="2"] { left: 20%; }
.obj-milestone[data-target="4"] { left: 40%; }
.obj-milestone[data-target="7"] { left: 70%; }
.obj-milestone[data-target="10"] { left: calc(100% - 2px); }

.obj-milestone-line {
    width: 2px;
    height: 100%;
    background: rgba(48, 255, 80, 0.4);
}

.obj-milestone.reached .obj-milestone-line {
    background: var(--pip-green);
    box-shadow: 0 0 4px var(--pip-green);
}

.obj-milestone-label {
    position: absolute;
    bottom: -18px;
    font-family: 'Share Tech Mono', monospace;
    font-size: 11px;
    font-weight: 600;
    color: rgba(48, 255, 80, 0.5);
    transform: translateX(-50%);
    left: 50%;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 2px;
}

.obj-milestone-label .cap-icon-micro {
    width: 10px;
    height: 10px;
    opacity: 0.5;
}

.obj-milestone.reached .obj-milestone-label {
    color: var(--pip-green);
    text-shadow: 0 0 4px var(--pip-green);
}

.obj-milestone.reached .obj-milestone-label .cap-icon-micro {
    opacity: 1;
}

/* Upcoming Deadlines Panel */
.upcoming-deadlines-panel {
    background: rgba(255, 64, 64, 0.08);
    border: 1px solid rgba(255, 64, 64, 0.3);
    padding: 14px 18px;
    margin-bottom: var(--spacing-sm);
    position: relative;
    flex-shrink: 0;
}

.upcoming-deadlines-panel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--red-bright), transparent);
}

.deadlines-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.deadline-marker {
    font-family: 'Share Tech Mono', monospace;
    font-size: 14px;
    color: var(--red-bright);
    text-shadow: 0 0 6px var(--red-bright);
    animation: pulse-red 2s infinite;
}

.deadlines-header span:last-child {
    font-family: 'Rajdhani', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: var(--red-bright);
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

.deadlines-list-wrapper {
    position: relative;
    overflow: hidden;
}

/* Fade effect on right edge when scrollable */
.deadlines-list-wrapper::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 40px;
    background: linear-gradient(90deg, transparent, rgba(26, 10, 10, 0.9));
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.deadlines-list-wrapper.has-overflow::after {
    opacity: 1;
}

.deadlines-list {
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 8px;
    padding-right: 30px;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    cursor: grab;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 64, 64, 0.2) transparent;
}

.deadlines-list:active {
    cursor: grabbing;
}

.deadlines-list::-webkit-scrollbar {
    height: 3px;
}

.deadlines-list::-webkit-scrollbar-track {
    background: transparent;
}

.deadlines-list::-webkit-scrollbar-thumb {
    background: rgba(255, 64, 64, 0.25);
    border-radius: 3px;
}

.deadlines-list::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 64, 64, 0.4);
}

.deadline-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 64, 64, 0.2);
    border-radius: 4px;
    font-family: 'Share Tech Mono', monospace;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
    scroll-snap-align: start;
}

.deadline-item:hover {
    background: rgba(255, 64, 64, 0.15);
    border-color: rgba(255, 64, 64, 0.4);
}

.deadline-item.overdue {
    background: rgba(255, 64, 64, 0.15);
    border-color: rgba(255, 64, 64, 0.4);
}

.deadline-item.soon {
    background: rgba(255, 176, 48, 0.1);
    border-color: rgba(255, 176, 48, 0.3);
}

.deadline-item.today {
    background: rgba(255, 179, 71, 0.2);
    border-color: rgba(255, 179, 71, 0.5);
}

.deadline-item.today .deadline-item-date {
    color: #ffb347;
    text-shadow: 0 0 6px rgba(255, 179, 71, 0.6);
}

.deadline-item-name {
    color: var(--text-bright);
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.deadline-item-date {
    color: var(--red-bright);
    font-weight: 600;
}

.deadline-item.soon .deadline-item-date {
    color: var(--pip-amber);
}

.deadline-item-source {
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.deadline-item-source.quest {
    background: rgba(48, 255, 80, 0.2);
    color: var(--pip-green);
}

.deadline-item-source.empire {
    background: rgba(255, 193, 7, 0.2);
    color: var(--pip-amber);
}

.deadline-item-source.faction {
    background: rgba(92, 124, 250, 0.2);
    color: #5c7cfa;
}

/* Pomodoro Focus Lock Overlay */
.pomodoro-lock-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: all;
}

.pomodoro-lock-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 40px 60px;
    border: 2px solid var(--pip-green-dim);
    background: var(--bg-dark);
    min-width: 320px;
}

.lock-label {
    font-family: 'Share Tech Mono', monospace;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 4px;
    color: var(--pip-green);
    text-shadow: 0 0 10px var(--pip-green);
    text-transform: uppercase;
}

.pomodoro-lock-overlay.break-mode .lock-label {
    color: var(--pip-amber);
    text-shadow: 0 0 10px var(--pip-amber);
}

.lock-timer {
    font-family: 'Share Tech Mono', monospace;
    font-size: 64px;
    font-weight: 700;
    color: var(--pip-green);
    text-shadow: 0 0 20px rgba(48, 255, 80, 0.6), 0 0 40px rgba(48, 255, 80, 0.3);
    letter-spacing: 6px;
    line-height: 1;
    animation: pomodoro-pulse 2s ease-in-out infinite;
}

.pomodoro-lock-overlay.break-mode .lock-timer {
    color: var(--pip-amber);
    text-shadow: 0 0 20px rgba(255, 176, 48, 0.6), 0 0 40px rgba(255, 176, 48, 0.3);
}

.lock-progress-bar {
    width: 100%;
    height: 6px;
    background: rgba(48, 255, 80, 0.15);
    border-radius: 3px;
    overflow: hidden;
}

.pomodoro-lock-overlay.break-mode .lock-progress-bar {
    background: rgba(255, 176, 48, 0.15);
}

.lock-progress-fill {
    height: 100%;
    background: var(--pip-green);
    border-radius: 3px;
    transition: width 1s linear;
    box-shadow: 0 0 8px rgba(48, 255, 80, 0.5);
}

.pomodoro-lock-overlay.break-mode .lock-progress-fill {
    background: var(--pip-amber);
    box-shadow: 0 0 8px rgba(255, 176, 48, 0.5);
}

.lock-break-suggestion {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 12px 20px;
    background: rgba(255, 176, 48, 0.08);
    border: 1px solid rgba(255, 176, 48, 0.2);
    border-radius: 4px;
    width: 100%;
    text-align: center;
}

.lock-break-suggestion span:first-child {
    font-size: 28px;
}

.lock-break-suggestion span:nth-child(2) {
    font-family: 'Share Tech Mono', monospace;
    font-size: 13px;
    font-weight: 600;
    color: var(--pip-amber);
    letter-spacing: 1px;
    text-transform: uppercase;
}

.lock-break-suggestion span:nth-child(3) {
    font-size: 12px;
    color: var(--text-normal);
}

.lock-controls {
    display: flex;
    gap: 10px;
}

.lock-subtext {
    font-family: 'Share Tech Mono', monospace;
    font-size: 10px;
    color: var(--text-dark);
    letter-spacing: 1px;
}

.lock-spotify-container {
    margin: 12px 0;
    opacity: 0.9;
    transition: opacity 0.3s;
}
.lock-spotify-container:hover {
    opacity: 1;
}

/* Companions row (side by side) */
.companions-row {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-top: 0;
}

.companions-row .party-member.companion {
    flex: 1;
}

/* Buffs section grouped */
.party-buffs-section {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 8px;
}

/* ===== POMODORO FOCUS TIMER ===== */
.pomodoro-panel {
    background: rgba(48, 255, 80, 0.06);
    border: 1px solid rgba(48, 255, 80, 0.25);
    padding: 8px;
    position: relative;
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    text-align: center;
}

.pomodoro-panel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--pip-green), transparent);
}

.pomodoro-panel.break-mode {
    background: rgba(255, 176, 48, 0.08);
    border-color: rgba(255, 176, 48, 0.3);
}

.pomodoro-panel.break-mode::before {
    background: linear-gradient(90deg, transparent, var(--pip-amber), transparent);
}

.pomodoro-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
}

.pomodoro-label {
    font-family: 'Share Tech Mono', monospace;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 2px;
    color: var(--pip-green);
    text-transform: uppercase;
}

.break-mode .pomodoro-label {
    color: var(--pip-amber);
}

.pomodoro-session-count {
    font-family: 'Share Tech Mono', monospace;
    font-size: 10px;
    color: var(--text-dim);
    letter-spacing: 1px;
}

.pomodoro-timer-display {
    display: flex;
    align-items: center;
    justify-content: center;
}

.pomodoro-time {
    font-family: 'Share Tech Mono', monospace;
    font-size: 28px;
    font-weight: 700;
    color: var(--pip-green);
    text-shadow: 0 0 15px rgba(48, 255, 80, 0.6), 0 0 30px rgba(48, 255, 80, 0.3);
    letter-spacing: 4px;
    line-height: 1;
}

.break-mode .pomodoro-time {
    color: var(--pip-amber);
    text-shadow: 0 0 15px rgba(255, 176, 48, 0.6), 0 0 30px rgba(255, 176, 48, 0.3);
}

.pomodoro-panel.running .pomodoro-time {
    animation: pomodoro-pulse 2s ease-in-out infinite;
}

@keyframes pomodoro-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.8; }
}

.pomodoro-progress-bar {
    width: 100%;
    height: 4px;
    background: rgba(48, 255, 80, 0.15);
    border-radius: 2px;
    overflow: hidden;
}

.break-mode .pomodoro-progress-bar {
    background: rgba(255, 176, 48, 0.15);
}

.pomodoro-progress-fill {
    height: 100%;
    background: var(--pip-green);
    border-radius: 2px;
    transition: width 1s linear;
    box-shadow: 0 0 6px rgba(48, 255, 80, 0.5);
}

.break-mode .pomodoro-progress-fill {
    background: var(--pip-amber);
    box-shadow: 0 0 6px rgba(255, 176, 48, 0.5);
}

/* Break suggestion (stacked vertically) */
.pomodoro-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 8px 10px;
    background: rgba(255, 176, 48, 0.08);
    border: 1px solid rgba(255, 176, 48, 0.2);
    border-radius: 4px;
    width: 100%;
}

.pomodoro-suggestion-icon {
    font-size: 20px;
    line-height: 1;
}

.pomodoro-suggestion-title {
    font-family: 'Share Tech Mono', monospace;
    font-size: 11px;
    font-weight: 600;
    color: var(--pip-amber);
    letter-spacing: 1px;
    text-transform: uppercase;
}

.pomodoro-suggestion-desc {
    font-size: 10px;
    color: var(--text-normal);
}

.pomodoro-controls {
    display: flex;
    gap: 6px;
    justify-content: center;
    flex-wrap: wrap;
}

.pomodoro-btn {
    font-family: 'Share Tech Mono', monospace;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 5px 12px;
    border: 1px solid var(--pip-green);
    background: rgba(48, 255, 80, 0.1);
    color: var(--pip-green);
    cursor: pointer;
    transition: all 0.15s ease;
}

.pomodoro-btn:hover {
    background: rgba(48, 255, 80, 0.25);
    box-shadow: 0 0 10px rgba(48, 255, 80, 0.3);
}

.pomodoro-btn.pause {
    border-color: var(--pip-amber);
    background: rgba(255, 176, 48, 0.1);
    color: var(--pip-amber);
}

.pomodoro-btn.pause:hover {
    background: rgba(255, 176, 48, 0.25);
    box-shadow: 0 0 10px rgba(255, 176, 48, 0.3);
}

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

.pomodoro-btn.secondary:hover {
    border-color: var(--text-normal);
    color: var(--text-normal);
}

.pomodoro-btn.fail {
    border-color: var(--red-bright);
    background: rgba(255, 64, 64, 0.1);
    color: var(--red-bright);
}

.pomodoro-btn.fail:hover {
    background: rgba(255, 64, 64, 0.25);
    box-shadow: 0 0 10px rgba(255, 64, 64, 0.3);
}

.pomodoro-caps-indicator {
    display: flex;
    align-items: center;
    gap: 4px;
    font-family: 'Share Tech Mono', monospace;
    font-size: 10px;
    color: var(--text-dim);
    letter-spacing: 0.5px;
}

.pomodoro-stats {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: 'Share Tech Mono', monospace;
    font-size: 9px;
    color: var(--text-dim);
    letter-spacing: 0.5px;
    flex-wrap: wrap;
    justify-content: center;
}

.pomo-stat strong {
    color: var(--pip-green);
}

.pomo-stat-sep {
    color: var(--text-dark);
    margin: 0 2px;
}

.obj-milestone.reached .obj-milestone-reward .cap-icon {
    opacity: 1;
}

/* Quests Row (Active + Side by side) */
.quests-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-lg);
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

/* 3-column variant for Guild Contracts + Main + Side */
.quests-row.three-columns {
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--spacing-md);
    min-height: 0;
}

.quests-column {
    background: linear-gradient(135deg, var(--bg-medium) 0%, var(--bg-dark) 100%);
    border: 1px solid var(--pip-green-dim);
    padding: var(--spacing-md);
    display: flex;
    flex-direction: column;
    clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
    position: relative;
    overflow: hidden;
    flex: 1;
    min-height: 0;
}

.quests-column::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--pip-green-dim), transparent);
}

.quest-column-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding-bottom: var(--spacing-sm);
    border-bottom: 1px solid var(--pip-green-dim);
    margin-bottom: var(--spacing-sm);
    font-family: 'Share Tech Mono', monospace;
    font-size: 14px;
    color: var(--pip-green);
    letter-spacing: 1px;
    flex-shrink: 0;
}

.quest-marker {
    color: var(--pip-green);
    text-shadow: 0 0 6px var(--pip-green);
}

.quest-count {
    margin-left: auto;
    color: var(--text-dim);
    font-size: 14px;
}

.quest-count-dual {
    margin-left: auto;
    font-size: 11px;
    color: var(--text-dim);
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Main Quests counts - Green (default) */
.quest-count-dual span:first-child,
.quest-count-dual #player-quests-active {
    color: var(--pip-green);
}

.quest-count-dual #player-quests-available {
    color: rgba(48, 255, 80, 0.6);
}

/* Empire counts - Gold */
.empire-column .quest-count-dual span:first-child,
.quest-count-dual #player-contracts-active {
    color: #ffd700;
}

.quest-count-dual #player-contracts-available {
    color: rgba(255, 215, 0, 0.6);
}

/* Faction counts - Blue */
.faction-column .quest-count-dual span:first-child,
.quest-count-dual #player-faction-active {
    color: #5c7cfa;
}

.quest-count-dual #player-faction-pending {
    color: rgba(92, 124, 250, 0.6);
}

.quest-count-dual .count-separator {
    color: var(--text-dark);
    margin: 0 2px;
}

.player-quest-insight {
    font-size: 10px;
    color: var(--text-dim);
    font-style: italic;
    margin-top: 4px;
    letter-spacing: 0.3px;
}

.player-contract-card .player-quest-insight {
    color: var(--pip-amber-muted);
    opacity: 0.8;
}

/* Quests list in new layout */
.quests-column .player-quests-list,
.quests-column .player-contracts-list,
.quests-column .player-faction-list {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    padding-right: 4px;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
}

/* Hide scrollbar on desktop - scroll still works via mousewheel */
.quests-column .player-quests-list::-webkit-scrollbar,
.quests-column .player-contracts-list::-webkit-scrollbar,
.quests-column .player-faction-list::-webkit-scrollbar {
    display: none;
}

/* Player Contract Card - Match Quest Card styling with gold accent */
.player-contract-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px 16px;
    background: rgba(255, 215, 0, 0.08);
    border: 1px solid rgba(255, 215, 0, 0.25);
    cursor: pointer;
    transition: all 0.15s ease;
    font-family: 'Rajdhani', sans-serif;
    position: relative;
}

.player-contract-card::before {
    display: none;
}

.player-contract-card:hover {
    background: rgba(255, 215, 0, 0.15);
    border-color: #ffd700;
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.15);
}

/* Contract cards use quest card inner classes but with gold accents */
.player-contract-card .player-quest-name {
    color: #ffd700;
}

.player-contract-card .player-quest-reward {
    color: #ffd700;
    opacity: 0.8;
}

.player-contract-card .player-quest-progress-fill {
    background: linear-gradient(90deg, #8b6914 0%, #ffd700 100%);
    box-shadow: 0 0 6px rgba(255, 215, 0, 0.5);
}

.player-contract-card .player-quest-campaign {
    color: #ffd700;
    background: rgba(255, 215, 0, 0.1);
}

/* Normalize all card types in Player tab columns to same sizing */
.quests-column .player-quest-card,
.quests-column .player-contract-card,
.quests-column .player-faction-card {
    padding: 10px 12px;
    gap: 5px;
    margin-bottom: 5px;
}

.quests-column .player-quest-name {
    font-size: 13px;
}

.quests-column .player-quest-reward {
    font-size: 11px;
}

/* Empty state for quests */
.quests-column .empty-state {
    color: var(--text-dark);
    font-family: 'Share Tech Mono', monospace;
    font-size: 14px;
    text-align: center;
    padding: var(--spacing-lg);
    letter-spacing: 1px;
}

/* Player Section Headers - Compact for Player tab columns */
.player-section-header {
    font-family: 'Share Tech Mono', monospace;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 2px;
    color: var(--pip-green);
    text-shadow: 0 0 6px rgba(48, 255, 80, 0.5);
    padding: var(--spacing-sm) 0;
    margin-top: var(--spacing-md);
    margin-bottom: var(--spacing-sm);
    border-bottom: 1px solid var(--pip-green-dim);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.player-section-header:first-child {
    margin-top: 0;
}

/* Gold variant for contracts */
.player-section-header.player-section-gold {
    color: #ffd700;
    text-shadow: 0 0 6px rgba(255, 215, 0, 0.5);
    border-bottom-color: rgba(255, 215, 0, 0.2);
}

.player-section-count {
    font-size: 11px;
    color: var(--text-dim);
    letter-spacing: 1px;
}

.player-section-items {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.player-section-empty {
    color: var(--text-dark);
    font-family: 'Share Tech Mono', monospace;
    font-size: 12px;
    text-align: center;
    padding: var(--spacing-md);
    letter-spacing: 1px;
    font-style: italic;
}

/* ============================================
   END NEW PLAYER DASHBOARD
   ============================================ */

/* ==========================================
   SHOP BUTTONS
   ========================================== */

/* Earn Button - Pip-Boy Terminal Style */
.earn-btn {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background: linear-gradient(180deg, var(--bg-medium) 0%, var(--bg-dark) 100%);
    border: 1px solid var(--pip-green-dim);
    cursor: pointer;
    transition: all 0.15s ease;
    width: 100%;
    text-align: left;
    position: relative;
    font-family: 'Rajdhani', sans-serif;
}

.earn-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 100%;
    background: var(--pip-green-dim);
    transition: background 0.15s ease;
}

.earn-btn:hover {
    background: linear-gradient(180deg, var(--bg-light) 0%, var(--bg-medium) 100%);
    border-color: var(--pip-green-muted);
    box-shadow: 0 0 10px rgba(48, 255, 80, 0.15), inset 0 0 20px rgba(48, 255, 80, 0.05);
}

.earn-btn:hover::before {
    background: var(--pip-green);
    box-shadow: 0 0 8px var(--pip-green);
}

.earn-btn:active {
    transform: scale(0.98);
    background: var(--bg-light);
    box-shadow: 0 0 15px rgba(48, 255, 80, 0.25), inset 0 0 30px rgba(48, 255, 80, 0.1);
}

/* Spend variant - amber theme */
.earn-btn.spend {
    border-color: var(--pip-amber-dark);
}

.earn-btn.spend::before {
    background: var(--pip-amber-dark);
}

.earn-btn.spend:hover {
    border-color: var(--pip-amber-muted);
    box-shadow: 0 0 10px rgba(255, 176, 48, 0.15), inset 0 0 20px rgba(255, 176, 48, 0.05);
}

.earn-btn.spend:hover::before {
    background: var(--pip-amber);
    box-shadow: 0 0 8px var(--pip-amber);
}

.earn-btn.spend:active {
    box-shadow: 0 0 15px rgba(255, 176, 48, 0.25), inset 0 0 30px rgba(255, 176, 48, 0.1);
}

.earn-btn.spend:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.earn-btn.spend .earn-reward {
    color: var(--pip-amber);
    text-shadow: 0 0 6px var(--pip-amber);
}

.earn-name {
    flex: 1;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-bright);
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.earn-reward {
    font-family: 'Share Tech Mono', monospace;
    font-size: 14px;
    font-weight: 500;
    color: var(--pip-green);
    text-shadow: 0 0 6px var(--pip-green);
    min-width: 40px;
    text-align: right;
}

/* Click animation - Pip-Boy Terminal Style */
.earn-btn.clicked {
    animation: terminalClick 0.2s ease;
}

@keyframes terminalClick {
    0% { transform: scale(1); filter: brightness(1); }
    50% { transform: scale(0.97); filter: brightness(1.3); }
    100% { transform: scale(1); filter: brightness(1); }
}

/* Coin animation - Pip-Boy Glow */
.coin-earned {
    animation: coinGlow 0.5s ease;
}

@keyframes coinGlow {
    0% { transform: scale(1); text-shadow: 0 0 10px var(--pip-amber); }
    50% { transform: scale(1.15); text-shadow: 0 0 25px var(--pip-amber), 0 0 40px var(--pip-amber); }
    100% { transform: scale(1); text-shadow: 0 0 10px var(--pip-amber); }
}

/* ==================== */
/* SHOP TAB STYLES */
/* ==================== */

/* Shop Grid - Two column layout matching Quest/Empire/Faction tabs */
.shop-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: var(--spacing-xl);
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.shop-left-section {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    min-height: 0;
}

.shop-right-section {
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, var(--bg-medium) 0%, var(--bg-dark) 100%);
    border: 1px solid rgba(255, 176, 48, 0.15);
    padding: var(--spacing-lg);
    overflow-y: auto;
    min-height: 0;
    position: relative;
}

.shop-right-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--pip-amber-muted), transparent);
}

.shop-item-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-lg);
}

/* Compact caps bar */
.shop-caps-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-sm) var(--spacing-md);
    margin-bottom: var(--spacing-lg);
    background: rgba(255, 176, 48, 0.05);
    border: 1px solid rgba(255, 176, 48, 0.15);
    border-left: 3px solid var(--pip-amber-dark);
}

.shop-caps-balance {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.shop-cap-icon {
    width: 20px;
    height: 20px;
    object-fit: contain;
    filter: drop-shadow(0 0 4px var(--pip-amber));
}

.shop-caps-value {
    font-family: 'Share Tech Mono', monospace;
    font-size: 20px;
    color: var(--pip-amber);
    text-shadow: 0 0 8px rgba(255, 176, 48, 0.4);
    letter-spacing: 1px;
}

.shop-caps-stats {
    display: flex;
    gap: var(--spacing-md);
}

.shop-caps-earned {
    font-family: 'Share Tech Mono', monospace;
    font-size: 14px;
    color: var(--pip-green);
    text-shadow: 0 0 6px rgba(48, 255, 80, 0.3);
}

.shop-caps-spent {
    font-family: 'Share Tech Mono', monospace;
    font-size: 14px;
    color: var(--red-bright, #ff4444);
    text-shadow: 0 0 6px rgba(255, 68, 68, 0.3);
}

/* ==========================================
   SHOP TAB - AMBER THEME OVERRIDES
   ========================================== */

#panel-shop .section-header {
    border-bottom-color: var(--pip-amber-dark);
}

#panel-shop .section-header span:first-child {
    color: var(--pip-amber);
    text-shadow: 0 0 6px rgba(255, 176, 48, 0.5);
}

#panel-shop .section-header::after {
    background: var(--pip-amber);
    box-shadow: 0 0 6px var(--pip-amber);
}

#panel-shop .section-header .header-stats {
    background: rgba(255, 176, 48, 0.2);
    color: var(--pip-amber);
}

/* Earn buttons in shop - amber theme */
#panel-shop .earn-btn {
    border-color: rgba(255, 176, 48, 0.15);
    background: rgba(255, 176, 48, 0.04);
}

#panel-shop .earn-btn::before {
    background: var(--pip-amber-dark);
}

#panel-shop .earn-btn:hover {
    border-color: rgba(255, 176, 48, 0.4);
    background: rgba(255, 176, 48, 0.1);
    box-shadow: 0 0 10px rgba(255, 176, 48, 0.15);
}

#panel-shop .earn-btn:hover::before {
    background: var(--pip-amber);
    box-shadow: 0 0 8px var(--pip-amber);
}

#panel-shop .earn-btn .earn-name {
    color: var(--text-bright);
}

/* ==========================================
   INVENTORY SECTION
   ========================================== */

.inventory-items {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.inventory-empty {
    font-family: 'Share Tech Mono', monospace;
    font-size: 13px;
    color: var(--text-dark);
    letter-spacing: 2px;
    text-align: center;
    padding: var(--spacing-lg);
}

.inventory-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-sm) var(--spacing-md);
    background: rgba(255, 183, 77, 0.04);
    border: 1px solid rgba(255, 183, 77, 0.15);
    border-left: 3px solid var(--pip-amber-dark);
    transition: all 0.15s ease;
}

.inventory-item:hover {
    border-color: var(--pip-amber);
    background: rgba(255, 183, 77, 0.08);
    box-shadow: 0 0 10px rgba(255, 176, 48, 0.1);
}

.inventory-name {
    font-family: 'Rajdhani', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-normal);
    letter-spacing: 1.5px;
    flex: 1;
}

.inventory-qty {
    font-family: 'Share Tech Mono', monospace;
    font-size: 16px;
    color: var(--pip-amber);
    text-shadow: 0 0 6px rgba(255, 183, 77, 0.4);
    min-width: 36px;
    text-align: right;
}

.inventory-consume-btn {
    font-family: 'Share Tech Mono', monospace;
    font-size: 11px;
    letter-spacing: 2px;
    padding: 5px 12px;
    background: transparent;
    border: 1px solid var(--pip-amber-dark);
    color: var(--pip-amber);
    cursor: pointer;
    transition: all 0.15s ease;
}

.inventory-consume-btn:hover {
    background: rgba(255, 176, 48, 0.15);
    border-color: var(--pip-amber);
    box-shadow: 0 0 8px rgba(255, 176, 48, 0.3);
}

.inventory-consume-btn:active {
    transform: scale(0.95);
    background: rgba(255, 176, 48, 0.25);
}

/* Legacy player grid for other uses */
.player-grid {
    display: grid;
    grid-template-columns: 200px 1fr;
    grid-template-rows: auto auto;
    gap: var(--spacing-xl);
}

.player-avatar-section {
    grid-row: 1 / 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-md);
}

.avatar-frame {
    width: 120px;
    height: 120px;
    background: var(--bg-dark);
    border: 2px solid var(--pip-green-dim);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
    box-shadow: 0 0 20px rgba(48, 255, 80, 0.2), inset 0 0 30px rgba(0, 0, 0, 0.5);
}

.avatar-frame::before {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    right: 3px;
    bottom: 3px;
    border: 1px solid var(--pip-green-dim);
    border-radius: 50%;
}

/* Vault Boy Style Character */
.character-container {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pixel-character {
    width: 80px;
    height: 80px;
    filter: drop-shadow(0 0 8px var(--pip-green));
}

/* Color override for Pip-Boy green */
.pixel-character rect,
.pixel-character polygon {
    fill: var(--pip-green) !important;
    stroke: none !important;
}

.pixel-character .eye-white,
.pixel-character .eye-iris,
.pixel-character .eye-pupil {
    fill: var(--pip-green) !important;
}

/* Subtle pulse animation */
.character-container {
    animation: vaultBoyPulse 3s ease-in-out infinite;
}

@keyframes vaultBoyPulse {
    0%, 100% {
        filter: drop-shadow(0 0 8px var(--pip-green));
    }
    50% {
        filter: drop-shadow(0 0 15px var(--pip-green));
    }
}

/* Hide the detailed parts, show silhouette */
.character-body,
.character-head {
    animation: none;
}

.eyelid {
    display: none;
}

.player-name-plate {
    text-align: center;
}

.player-name {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--gold-bright);
    letter-spacing: 2px;
}

.player-title {
    display: block;
    font-size: 14px;
    color: var(--text-dim);
    letter-spacing: 1px;
    margin-top: var(--spacing-xs);
}

.player-stats-section {
    display: flex;
    flex-direction: column;
}

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

.stat-card {
    background: var(--bg-medium);
    border: 1px solid var(--border-subtle);
    padding: var(--spacing-md);
    text-align: center;
}

.stat-label {
    display: block;
    font-size: 9px;
    color: var(--text-dark);
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: var(--spacing-sm);
}

.stat-value {
    display: block;
    font-size: 24px;
    font-weight: 600;
    color: var(--gold-bright);
}

.stat-value.streak {
    color: #ff7043;
}

/* Inventory */
.inventory-section {
    grid-column: 1 / 3;
}

.inventory-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: var(--spacing-sm);
}

.inventory-slot {
    aspect-ratio: 1;
    background: var(--bg-medium);
    border: 1px solid var(--border-subtle);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
    transition: all 0.2s ease;
}

.inventory-slot.has-item {
    border-color: var(--gold-dim);
}

.inventory-slot.has-item:hover {
    border-color: var(--gold-muted);
    background: var(--bg-light);
}

.inventory-icon {
    font-size: 20px;
}

.inventory-count {
    font-size: 14px;
    font-weight: 600;
    color: var(--gold-bright);
}

.inventory-name {
    font-size: 8px;
    color: var(--text-dark);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Codex Tab */
.codex-content {
    max-width: 800px;
}

.codex-main-quest {
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
    padding: var(--spacing-xl);
    background: var(--bg-medium);
    border: 1px solid var(--gold-dim);
    margin-bottom: var(--spacing-xl);
}

.codex-icon {
    font-family: 'Share Tech Mono', monospace;
    font-size: 28px;
    color: var(--gold-bright);
    text-shadow: 0 0 10px var(--gold-bright);
}

.codex-quest-title {
    font-size: 18px;
    color: var(--gold-bright);
    font-weight: 600;
    letter-spacing: 1px;
    margin-bottom: var(--spacing-sm);
}

.codex-quest-desc {
    font-size: 14px;
    color: var(--text-normal);
}

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

.codex-progress-bar {
    height: 8px;
    background: var(--bg-lighter);
    margin-bottom: var(--spacing-sm);
    overflow: hidden;
}

.codex-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--gold-dark), var(--gold-bright));
    transition: width 0.5s ease;
}

.codex-progress-text {
    font-size: 15px;
    color: var(--text-dim);
}

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

.codex-quote {
    font-size: 14px;
    font-style: italic;
    color: var(--text-normal);
    padding: var(--spacing-lg);
    border-left: 2px solid var(--gold-dim);
    background: var(--bg-medium);
}

.codex-traps-section {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.codex-trap {
    padding: var(--spacing-md);
    background: rgba(198, 40, 40, 0.1);
    border-left: 2px solid var(--red-muted);
    font-size: 15px;
    color: #ffcdd2;
}

/* Status Bar - Hidden to save space */
.status-bar {
    display: none;
}

.status-item {
    font-size: 14px;
    color: var(--pip-green-dim);
    letter-spacing: 1px;
    text-transform: uppercase;
}

.status-item::before {
    content: '// ';
    color: var(--pip-green-dark);
}

/* Empty States - Pip-Boy Terminal Style */
.empty-state {
    text-align: center;
    padding: var(--spacing-xl);
    color: var(--pip-green-dim);
    font-family: 'Share Tech Mono', monospace;
    font-size: 14px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.empty-state::before {
    content: '[ ';
}

.empty-state::after {
    content: ' ]';
}

/* Scrollbar Styling - Pip-Boy Terminal */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: var(--bg-darkest);
    border-left: 1px solid var(--pip-green-dim);
}

::-webkit-scrollbar-thumb {
    background: var(--pip-green-dim);
    border: 1px solid var(--pip-green-dark);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--pip-green-muted);
    box-shadow: 0 0 4px var(--pip-green);
}

/* Empire Tab Scrollbar - Amber/Gold */
#panel-empire ::-webkit-scrollbar-track {
    border-left-color: rgba(255, 193, 7, 0.2);
}

#panel-empire ::-webkit-scrollbar-thumb {
    background: rgba(255, 193, 7, 0.3);
    border-color: rgba(255, 193, 7, 0.2);
}

#panel-empire ::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 193, 7, 0.5);
    box-shadow: 0 0 4px var(--guild-gold);
}

#panel-empire {
    scrollbar-color: rgba(255, 193, 7, 0.3) rgba(0, 0, 0, 0.3);
}

/* Faction Tab Scrollbar - Blue */
#panel-faction ::-webkit-scrollbar-track {
    border-left-color: rgba(92, 124, 250, 0.2);
}

#panel-faction ::-webkit-scrollbar-thumb {
    background: rgba(92, 124, 250, 0.3);
    border-color: rgba(92, 124, 250, 0.2);
}

#panel-faction ::-webkit-scrollbar-thumb:hover {
    background: rgba(92, 124, 250, 0.5);
    box-shadow: 0 0 4px #5c7cfa;
}

#panel-faction {
    scrollbar-color: rgba(92, 124, 250, 0.3) rgba(0, 0, 0, 0.3);
}

/* Player Tab Column-Specific Scrollbars */
.empire-column ::-webkit-scrollbar-track,
#player-contracts-list::-webkit-scrollbar-track {
    border-left-color: rgba(255, 193, 7, 0.2);
}

.empire-column ::-webkit-scrollbar-thumb,
#player-contracts-list::-webkit-scrollbar-thumb {
    background: rgba(255, 193, 7, 0.3);
    border-color: rgba(255, 193, 7, 0.2);
}

.empire-column ::-webkit-scrollbar-thumb:hover,
#player-contracts-list::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 193, 7, 0.5);
}

.empire-column,
#player-contracts-list {
    scrollbar-color: rgba(255, 193, 7, 0.3) rgba(0, 0, 0, 0.3);
}

.faction-column ::-webkit-scrollbar-track,
#player-faction-list::-webkit-scrollbar-track {
    border-left-color: rgba(92, 124, 250, 0.2);
}

.faction-column ::-webkit-scrollbar-thumb,
#player-faction-list::-webkit-scrollbar-thumb {
    background: rgba(92, 124, 250, 0.3);
    border-color: rgba(92, 124, 250, 0.2);
}

.faction-column ::-webkit-scrollbar-thumb:hover,
#player-faction-list::-webkit-scrollbar-thumb:hover {
    background: rgba(92, 124, 250, 0.5);
}

.faction-column,
#player-faction-list {
    scrollbar-color: rgba(92, 124, 250, 0.3) rgba(0, 0, 0, 0.3);
}

/* CRT Flicker Animation */
@keyframes crtFlicker {
    0% { opacity: 1; }
    92% { opacity: 1; }
    93% { opacity: 0.8; }
    94% { opacity: 1; }
    95% { opacity: 0.9; }
    96% { opacity: 1; }
    100% { opacity: 1; }
}

body {
    animation: crtFlicker 8s infinite;
}

/* Terminal text glow for interactive elements */
.earn-btn:active .earn-reward {
    animation: textPulse 0.2s ease;
}

@keyframes textPulse {
    0% { filter: brightness(1); }
    50% { filter: brightness(1.5); }
    100% { filter: brightness(1); }
}

/* Responsive - Shop grid collapses to single column */
@media (max-width: 1200px) {
    .shop-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   GUILD CONTRACTS SYSTEM
   ============================================ */

.guild-layout {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    grid-template-rows: 1fr;
    gap: var(--spacing-xl);
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.contract-board-section {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
    flex: 1;
}

/* Contract Status Tabs */
.contract-tabs {
    display: flex;
    gap: 2px;
    margin-bottom: var(--spacing-md);
}

.contract-tab {
    flex: 1;
    background: var(--bg-dark);
    border: 1px solid var(--pip-green-dim);
    color: var(--text-dim);
    font-family: 'Share Tech Mono', monospace;
    font-size: 14px;
    letter-spacing: 1px;
    padding: var(--spacing-sm) var(--spacing-md);
    cursor: pointer;
    transition: all 0.15s ease;
    text-transform: uppercase;
}

.contract-tab:hover {
    color: var(--pip-green-muted);
    background: var(--bg-medium);
    border-color: var(--pip-green-muted);
}

.contract-tab.active {
    color: var(--pip-green);
    background: var(--bg-light);
    border-color: var(--pip-green);
    text-shadow: 0 0 8px var(--pip-green);
}

/* Contract List */
.contract-list {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    min-height: 100px;
}

/* Contract Item */
.contract-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: 12px;
    background: rgba(255, 215, 0, 0.05);
    border: 1px solid rgba(255, 215, 0, 0.15);
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    font-family: 'Rajdhani', sans-serif;
}

.contract-item::before {
    display: none;
}

/* Priority Indicators */
.contract-item.priority-low::before {
    background: var(--text-dim);
}

.contract-item.priority-medium::before {
    background: var(--pip-amber-muted);
}

.contract-item.priority-high::before {
    background: var(--red-bright);
}

.contract-item:hover {
    border-color: var(--pip-green-muted);
    background: linear-gradient(90deg, var(--bg-medium) 0%, var(--bg-light) 100%);
    box-shadow: 0 0 15px rgba(48, 255, 80, 0.1);
}

.contract-item:hover::before {
    width: 4px;
}

.contract-item.selected {
    border-color: var(--pip-green);
    background: linear-gradient(90deg, var(--bg-medium) 0%, var(--bg-light) 100%);
    box-shadow: 0 0 20px rgba(48, 255, 80, 0.15), inset 0 0 30px rgba(48, 255, 80, 0.05);
}

.contract-item.selected::before {
    width: 5px;
}

/* Available (pending) Contracts */
.contract-item.available {
    opacity: 0.85;
}

.contract-item.available::before {
    background: var(--pip-amber);
}

.contract-item.available .contract-item-icon {
    color: var(--pip-amber);
}

.contract-item.completed {
    opacity: 0.5;
    box-shadow: 0 0 10px currentColor;
}

.contract-item-icon {
    font-size: 20px;
    color: var(--pip-green-muted);
    filter: drop-shadow(0 0 4px var(--pip-green));
}

.contract-item-info {
    flex: 1;
    min-width: 0;
}

.contract-item-name {
    font-size: 13px;
    color: var(--text-bright);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: 0.5px;
}

.contract-item-progress {
    font-size: 14px;
    color: var(--pip-green-muted);
    margin-top: 2px;
}

.contract-item-reward {
    font-size: 11px;
    color: #ffd700;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 4px;
    opacity: 0.8;
}

/* Contract Detail Section */
.contract-detail-section {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    min-height: 0;
}

.add-contract-form,
.contract-detail-view {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: linear-gradient(135deg, var(--bg-medium) 0%, var(--bg-dark) 100%);
    border: 1px solid var(--pip-green-dim);
    padding: var(--spacing-lg);
    overflow-y: auto;
}

.no-contract-selected {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: var(--text-dim);
    font-family: 'Share Tech Mono', monospace;
}

.no-contract-selected .empty-icon {
    font-size: 48px;
    margin-bottom: var(--spacing-md);
    opacity: 0.3;
}

.no-contract-selected p {
    font-size: 15px;
    margin-bottom: var(--spacing-xs);
    letter-spacing: 1px;
    text-transform: uppercase;
}

.no-contract-selected .hint {
    font-size: 14px;
    letter-spacing: 0.5px;
    text-transform: none;
}

.contract-details {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.contract-detail-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
    padding-bottom: var(--spacing-md);
    border-bottom: 1px solid var(--pip-green-dim);
}

.contract-title-section {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.contract-detail-title {
    font-family: 'Share Tech Mono', monospace;
    font-size: 16px;
    color: var(--pip-green);
    text-shadow: 0 0 10px var(--pip-green);
    letter-spacing: 2px;
    text-transform: uppercase;
    flex: 1;
    font-weight: 500;
}

.contract-priority-badge {
    font-family: 'Share Tech Mono', monospace;
    font-size: 14px;
    padding: 2px 8px;
    letter-spacing: 1px;
    border: 1px solid;
}

.contract-priority-badge.priority-low {
    color: var(--text-dim);
    border-color: var(--text-dim);
}

.contract-priority-badge.priority-medium {
    color: var(--pip-amber);
    border-color: var(--pip-amber);
}

.contract-priority-badge.priority-high {
    color: var(--red-bright);
    border-color: var(--red-bright);
    text-shadow: 0 0 5px var(--red-bright);
}

.contract-reward-badge {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-xs) var(--spacing-md);
    background: transparent;
    border: 1px solid var(--pip-amber-muted);
    color: var(--pip-amber);
    font-family: 'Share Tech Mono', monospace;
    font-size: 14px;
    font-weight: 500;
}

.contract-description {
    font-size: 15px;
    color: var(--text-normal);
    padding: var(--spacing-sm);
    background: var(--bg-darkest);
    border-left: 2px solid var(--pip-green-dim);
}

.contract-status-section {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.contract-status-section label {
    font-family: 'Share Tech Mono', monospace;
    font-size: 15px;
    color: var(--text-dim);
    letter-spacing: 1px;
}

.status-select {
    background: var(--bg-darkest);
    border: 1px solid var(--pip-green-dim);
    color: var(--pip-green);
    font-family: 'Share Tech Mono', monospace;
    font-size: 15px;
    padding: var(--spacing-sm) var(--spacing-md);
    cursor: pointer;
}

.status-select:focus {
    outline: none;
    border-color: var(--pip-green);
    box-shadow: 0 0 8px rgba(48, 255, 80, 0.3);
}

/* Contract Progress Bar */
.contract-progress-bar {
    height: 10px;
    background: var(--bg-darkest);
    margin-bottom: var(--spacing-xs);
    overflow: hidden;
    border: 1px solid var(--pip-green-dim);
    position: relative;
}

.contract-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--pip-green-dark) 0%, var(--pip-green) 100%);
    box-shadow: 0 0 10px var(--pip-green);
    transition: width 0.3s ease;
}

.contract-progress-text {
    font-family: 'Share Tech Mono', monospace;
    font-size: 14px;
    color: var(--pip-green-muted);
    letter-spacing: 1px;
}

/* Contract Steps */
.contract-steps-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    flex: 1;
    overflow-y: auto;
    margin-top: var(--spacing-sm);
}

.contract-step-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background: linear-gradient(90deg, var(--bg-darkest) 0%, var(--bg-dark) 100%);
    border: 1px solid var(--pip-green-dim);
    cursor: pointer;
    transition: all 0.15s ease;
    font-family: 'Share Tech Mono', monospace;
    position: relative;
}

.contract-step-item:hover {
    background: var(--bg-dark);
    border-color: var(--pip-green);
}

.contract-step-item.completed {
    opacity: 0.5;
}

.step-checkbox {
    width: 16px;
    height: 16px;
    border: 1px solid var(--pip-green-dim);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    color: var(--pip-green);
    flex-shrink: 0;
    background: var(--bg-darkest);
}

.contract-step-item.completed .step-checkbox {
    background: var(--pip-green-dark);
    border-color: var(--pip-green);
    box-shadow: 0 0 6px var(--pip-green);
}

.step-text {
    flex: 1;
    font-size: 14px;
    color: var(--text-normal);
    letter-spacing: 0.5px;
}

.contract-step-item.completed .step-text {
    text-decoration: line-through;
    color: var(--text-dim);
}

.step-reward {
    font-size: 14px;
    color: var(--pip-amber-muted);
}

/* Preview Steps (for pending contracts) */
.contract-step-item.preview {
    opacity: 0.6;
    cursor: default;
}

.contract-step-item.preview:hover {
    background: var(--bg-darkest);
    border-left-color: var(--pip-green-dim);
}

/* Drag and Drop Styles */
.contract-task-item.dragging,
.quest-task-item.dragging,
.faction-task-item.dragging {
    opacity: 0.5;
    background: var(--bg-medium);
    border-style: dashed;
}

.contract-task-item.drag-over,
.quest-task-item.drag-over,
.faction-task-item.drag-over {
    border-top: 2px solid var(--pip-green);
    margin-top: -2px;
}

.contract-task-item.drag-handle,
.quest-task-item.drag-handle,
.faction-task-item.drag-handle {
    cursor: grab;
}

.contract-task-item.drag-handle:active,
.quest-task-item.drag-handle:active,
.faction-task-item.drag-handle:active {
    cursor: grabbing;
}

/* Drag handle icon */
.drag-handle-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    min-width: 20px;
    height: 100%;
    color: var(--text-dim);
    cursor: grab;
    opacity: 0.5;
    transition: opacity 0.15s ease;
    font-size: 14px;
    margin-right: 8px;
}

.drag-handle-icon:hover {
    opacity: 1;
}

.drag-handle-icon:active {
    cursor: grabbing;
}

/* Empire-specific drag styles */
#panel-empire .contract-task-item.drag-over {
    border-top-color: var(--guild-gold);
}

/* Faction-specific drag styles */
#panel-faction .faction-task-item.drag-over {
    border-top-color: var(--faction-blue);
}

/* Contract Actions */
.contract-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-lg);
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--pip-green-dim);
}

.promote-quest-btn {
    flex: 1;
    min-width: 150px;
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--bg-dark);
    border: 1px solid var(--pip-green-dim);
    color: var(--pip-green);
    font-family: 'Share Tech Mono', monospace;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.15s ease;
    letter-spacing: 1px;
}

.promote-quest-btn:hover {
    background: var(--bg-medium);
    border-color: var(--pip-green);
    box-shadow: 0 0 10px rgba(48, 255, 80, 0.2);
}

.delete-contract-btn {
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--bg-darkest);
    border: 1px solid var(--red-muted);
    color: var(--red-muted);
    font-family: 'Share Tech Mono', monospace;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.15s ease;
    letter-spacing: 1px;
}

.delete-contract-btn:hover {
    background: var(--bg-dark);
    border-color: var(--red-bright);
    color: var(--red-bright);
}

/* Add Contract Button */
.add-contract-btn {
    padding: var(--spacing-xs) var(--spacing-md);
    background: var(--bg-dark);
    border: 1px solid var(--pip-green);
    color: var(--pip-green);
    font-family: 'Share Tech Mono', monospace;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.15s ease;
    letter-spacing: 1px;
}

.add-contract-btn:hover {
    background: var(--pip-green-dark);
    box-shadow: 0 0 10px var(--pip-green);
}

/* Create Contract Button */
.create-contract-btn {
    width: 100%;
    padding: var(--spacing-md);
    margin-top: var(--spacing-md);
    background: linear-gradient(135deg, var(--pip-green-dark) 0%, var(--pip-green-dim) 100%);
    border: 1px solid var(--pip-green);
    color: var(--pip-green);
    font-family: 'Share Tech Mono', monospace;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.15s ease;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.create-contract-btn:hover {
    background: linear-gradient(135deg, var(--pip-green-muted) 0%, var(--pip-green-dark) 100%);
    box-shadow: 0 0 15px var(--pip-green);
    text-shadow: 0 0 8px var(--pip-green);
}

/* ============================================
   END GUILD CONTRACTS SYSTEM
   ============================================ */

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

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

    .player-avatar-section {
        grid-row: auto;
    }

    .inventory-section {
        grid-column: auto;
    }

    .inventory-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .dashboard-top {
        grid-template-columns: 1fr;
    }

    .quest-log-layout {
        grid-template-columns: 1fr;
    }

    .guild-layout {
        grid-template-columns: 1fr;
    }

    /* Stack the 3-column quests row on smaller screens */
    .quests-row.three-columns {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }

    .quests-column {
        max-height: none;
        min-height: 200px;
    }

    /* Make nav tabs wrap */
    .nav-tabs {
        flex-wrap: wrap;
    }

    .nav-tab {
        font-size: 12px;
        padding: 6px 10px;
    }
}

/* Mobile specific */
@media (max-width: 768px) {
    .top-nav {
        flex-direction: column;
        gap: var(--spacing-sm);
    }

    .nav-tabs {
        width: 100%;
        justify-content: center;
    }

    .nav-stats {
        width: 100%;
        justify-content: center;
    }

    .main-content {
        padding: var(--spacing-sm);
    }

    .primary-objective-panel {
        padding: 12px 14px;
    }

    .objective-milestones {
        flex-wrap: wrap;
        gap: 8px;
    }

    .obj-milestone {
        flex: 1 1 45%;
        min-width: 80px;
    }

    .player-card,
    .tab-card {
        padding: 10px 12px;
    }
}

/* ============================================
   GUILD TAB - DISTINCT VISUAL THEME
   Gold/Amber theme to differentiate from Quest Log
   ============================================ */

/* Guild Panel - Overall amber/gold theme */
#panel-empire {
    --guild-gold: #ffd700;
    --guild-gold-muted: #c9a227;
    --guild-gold-dark: #8b6914;
    --guild-gold-dim: #4a3810;
    --guild-border: rgba(255, 215, 0, 0.3);
    --guild-glow: rgba(255, 215, 0, 0.15);
}

/* Guild Layout with gold accents */
#panel-empire .guild-layout {
    position: relative;
}

/* Guild Board Section with shield/banner feel */
#panel-empire .contract-board-section {
    background: linear-gradient(180deg, rgba(139, 105, 20, 0.05) 0%, transparent 100%);
    border: 1px solid var(--guild-border);
    border-radius: 2px;
    padding: var(--spacing-md);
    padding-top: 20px;
    position: relative;
}

#panel-empire .contract-board-section::before {
    content: '⚔ EMPIRE CONTRACTS ⚔';
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--bg-darkest);
    padding: 0 var(--spacing-md);
    font-family: 'Share Tech Mono', monospace;
    font-size: 11px;
    letter-spacing: 3px;
    color: var(--guild-gold);
    text-shadow: 0 0 8px var(--guild-gold);
}

/* Guild Section Headers - Gold accents */
#panel-empire .section-header {
    border-bottom-color: var(--guild-border);
}

#panel-empire .section-header span:first-child {
    color: var(--guild-gold);
    text-shadow: 0 0 6px rgba(255, 215, 0, 0.5);
}

#panel-empire .section-header::after {
    background: var(--guild-gold);
    box-shadow: 0 0 6px var(--guild-gold);
}

#panel-empire .section-header .header-stats {
    background: rgba(255, 215, 0, 0.2);
    color: var(--guild-gold);
}

/* Contract Items in Empire - Gold border accent (cleaner style) */
#panel-empire .contract-item {
    background: rgba(255, 215, 0, 0.05);
    border: 1px solid rgba(255, 215, 0, 0.15);
}

#panel-empire .contract-item::before {
    background: var(--guild-gold-dark);
}

#panel-empire .contract-item:hover {
    background: rgba(255, 215, 0, 0.12);
    border-color: var(--guild-gold);
    box-shadow: 0 0 10px var(--guild-glow);
}

#panel-empire .contract-item.selected {
    background: rgba(255, 215, 0, 0.15);
    border-color: var(--guild-gold);
    box-shadow: 0 0 12px var(--guild-glow);
}

#panel-empire .contract-item:hover::before {
    background: var(--guild-gold);
    box-shadow: 0 0 8px var(--guild-gold);
}

#panel-empire .contract-item.selected {
    border-color: var(--guild-gold);
    box-shadow: 0 0 20px var(--guild-glow), inset 0 0 30px rgba(255, 215, 0, 0.03);
}

#panel-empire .contract-item.selected::before {
    background: var(--guild-gold);
    box-shadow: 0 0 10px var(--guild-gold);
}

/* Contract Item Icon in Guild - Gold tint */
#panel-empire .contract-item-icon {
    color: var(--guild-gold-muted);
    filter: drop-shadow(0 0 4px var(--guild-gold));
}

/* Contract Detail Section - Gold theme */
#panel-empire .contract-detail-section,
#panel-empire .add-contract-form,
#panel-empire .contract-detail-view {
    background: linear-gradient(135deg, rgba(139, 105, 20, 0.05) 0%, var(--bg-dark) 100%);
    border: 1px solid var(--guild-border);
    position: relative;
}

#panel-empire .contract-detail-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--guild-gold-dark), transparent);
}

/* Contract Detail Title - Gold */
#panel-empire .contract-detail-title {
    color: var(--guild-gold);
    text-shadow: 0 0 10px var(--guild-gold);
}

/* Progress Bar in Guild - Gold fill */
#panel-empire .contract-progress-bar {
    border-color: var(--guild-gold-dim);
}

#panel-empire .contract-progress-fill {
    background: linear-gradient(90deg, var(--guild-gold-dark) 0%, var(--guild-gold) 100%);
    box-shadow: 0 0 10px var(--guild-gold);
}

/* Contract Steps in Guild - Gold accents */
#panel-empire .contract-step-item {
    border-color: var(--guild-gold-dim);
}

#panel-empire .contract-step-item:hover {
    border-color: var(--guild-gold);
    background: rgba(139, 105, 20, 0.08);
}

#panel-empire .step-checkbox {
    border-color: var(--guild-gold-dim);
}

#panel-empire .contract-step-item.completed .step-checkbox {
    background: var(--guild-gold-dark);
    border-color: var(--guild-gold);
    box-shadow: 0 0 6px var(--guild-gold);
}

/* Contract progress text and step text - Gold */
#panel-empire .contract-progress-text {
    color: var(--guild-gold-muted);
}

#panel-empire .step-text {
    color: var(--guild-gold-muted);
}

#panel-empire .contract-step-item.completed .step-text {
    color: var(--guild-gold-dim);
}

/* Guild Buttons - Gold theme */
#panel-empire .add-contract-btn {
    border-color: var(--guild-gold);
    color: var(--guild-gold);
}

#panel-empire .add-contract-btn:hover {
    background: var(--guild-gold-dark);
    box-shadow: 0 0 10px var(--guild-gold);
}

#panel-empire .create-contract-btn {
    background: linear-gradient(135deg, var(--guild-gold-dark) 0%, var(--guild-gold-dim) 100%);
    border-color: var(--guild-gold);
    color: var(--guild-gold);
}

#panel-empire .create-contract-btn:hover {
    background: linear-gradient(135deg, var(--guild-gold-muted) 0%, var(--guild-gold-dark) 100%);
    box-shadow: 0 0 15px var(--guild-gold);
    text-shadow: 0 0 8px var(--guild-gold);
}

/* Accept Contract Button - Gold */
#panel-empire .accept-quest-btn {
    background: linear-gradient(180deg, var(--guild-gold) 0%, var(--guild-gold-muted) 100%);
}

#panel-empire .accept-quest-btn:hover {
    background: linear-gradient(180deg, #ffe135 0%, var(--guild-gold) 100%);
    box-shadow: 0 4px 12px rgba(255, 215, 0, 0.4);
}

/* Guild Status Badges - All amber/gold themed */
#panel-empire .quest-status-badge.available {
    color: var(--guild-gold-muted);
    background: rgba(255, 215, 0, 0.1);
    border: 1px solid var(--guild-gold-muted);
}

#panel-empire .quest-status-badge.active,
#panel-empire .quest-status-badge.in-progress {
    color: var(--guild-gold);
    background: rgba(255, 215, 0, 0.15);
    border: 1px solid var(--guild-gold);
}

#panel-empire .quest-status-badge.completed {
    color: var(--guild-gold-dim);
    background: rgba(255, 215, 0, 0.08);
    border: 1px solid var(--guild-gold-dim);
}

/* No Contract Selected - Gold accents */
#panel-empire .no-contract-selected {
    color: var(--guild-gold-dim);
}

#panel-empire .no-contract-selected .empty-icon {
    filter: drop-shadow(0 0 10px var(--guild-gold));
}

/* Form inputs in Guild - Gold focus */
#panel-empire .form-group input:focus,
#panel-empire .form-group textarea:focus,
#panel-empire .form-group select:focus {
    border-color: var(--guild-gold);
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.2), inset 0 0 20px rgba(255, 215, 0, 0.03);
}

/* Guild Contract Actions border */
#panel-empire .contract-actions {
    border-top-color: var(--guild-gold-dim);
}

/* Empty state in Guild */
#panel-empire .empty-state {
    color: var(--guild-gold-dim);
}

/* Campaign tag in Guild - stays amber but brighter */
#panel-empire .quest-campaign-tag {
    color: var(--guild-gold);
    border-color: var(--guild-gold);
    text-shadow: 0 0 4px var(--guild-gold);
}

/* ============================================
   END GUILD TAB DISTINCT THEME
   ============================================ */

/* ============================================
   QUEST LOG TAB - ENHANCED GREEN THEME
   Distinct green styling to match Guild gold treatment
   ============================================ */

/* Quest Log Panel - Bright green theme */
#panel-quests {
    --quest-green: #30ff50;
    --quest-green-muted: #20c040;
    --quest-green-dark: #158030;
    --quest-green-dim: #0d4020;
    --quest-border: rgba(48, 255, 80, 0.3);
    --quest-glow: rgba(48, 255, 80, 0.15);
}

/* Quest List Section with banner feel */
#panel-quests .quest-list-section {
    background: linear-gradient(180deg, rgba(48, 255, 80, 0.03) 0%, transparent 100%);
    border: 1px solid var(--quest-border);
    border-radius: 2px;
    padding: var(--spacing-md);
    padding-top: 20px;
    position: relative;
}

#panel-quests .quest-list-section::before {
    content: '⚔ QUEST LOG ⚔';
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--bg-darkest);
    padding: 0 var(--spacing-md);
    font-family: 'Share Tech Mono', monospace;
    font-size: 11px;
    letter-spacing: 3px;
    color: var(--quest-green);
    text-shadow: 0 0 8px var(--quest-green);
}

/* Quest Section Headers - Enhanced green */
#panel-quests .section-header {
    border-bottom-color: var(--quest-border);
}

#panel-quests .section-header span:first-child {
    color: var(--quest-green);
    text-shadow: 0 0 6px rgba(48, 255, 80, 0.6);
}

#panel-quests .section-header::after {
    background: var(--quest-green);
    box-shadow: 0 0 8px var(--quest-green);
}

#panel-quests .section-header .header-stats {
    background: rgba(48, 255, 80, 0.2);
    color: var(--quest-green);
}

/* Quest Items - Enhanced green borders (cleaner style) */
#panel-quests .quest-item {
    background: rgba(48, 255, 80, 0.05);
    border: 1px solid rgba(48, 255, 80, 0.15);
}

#panel-quests .quest-item::before {
    background: var(--quest-green-dark);
}

#panel-quests .quest-item:hover {
    background: rgba(48, 255, 80, 0.12);
    border-color: var(--quest-green);
    box-shadow: 0 0 10px var(--quest-glow);
}

#panel-quests .quest-item.selected {
    background: rgba(48, 255, 80, 0.15);
    border-color: var(--quest-green);
    box-shadow: 0 0 12px var(--quest-glow);
}

#panel-quests .quest-item:hover::before {
    background: var(--quest-green);
    box-shadow: 0 0 8px var(--quest-green);
}

#panel-quests .quest-item.selected {
    border-color: var(--quest-green);
    box-shadow: 0 0 20px var(--quest-glow), inset 0 0 30px rgba(48, 255, 80, 0.03);
}

#panel-quests .quest-item.selected::before {
    background: var(--quest-green);
    box-shadow: 0 0 10px var(--quest-green);
}

/* Quest Item Icon - Enhanced glow */
#panel-quests .quest-item-icon {
    color: var(--quest-green-muted);
    filter: drop-shadow(0 0 6px var(--quest-green));
}

/* Quest Detail Section - Enhanced green */
#panel-quests .quest-detail-section {
    background: linear-gradient(135deg, rgba(48, 255, 80, 0.03) 0%, var(--bg-dark) 100%);
    border: 1px solid var(--quest-border);
    position: relative;
}

#panel-quests .quest-detail-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--quest-green-dark), transparent);
}

/* Quest Detail Title - Bright green */
#panel-quests .quest-detail-title {
    color: var(--quest-green);
    text-shadow: 0 0 12px var(--quest-green);
}

/* Progress Bar - Enhanced green */
#panel-quests .quest-progress-bar {
    border-color: var(--quest-green-dim);
}

#panel-quests .quest-progress-fill {
    background: linear-gradient(90deg, var(--quest-green-dark) 0%, var(--quest-green) 100%);
    box-shadow: 0 0 12px var(--quest-green);
}

/* Objectives - Enhanced green */
#panel-quests .objective-item {
    border-color: var(--quest-green-dim);
}

#panel-quests .objective-item:hover {
    border-color: var(--quest-green-muted);
    background: linear-gradient(90deg, rgba(48, 255, 80, 0.05) 0%, var(--bg-medium) 100%);
}

#panel-quests .objective-checkbox {
    border-color: var(--quest-green-muted);
}

#panel-quests .objective-item.completed .objective-checkbox {
    background: var(--quest-green-dark);
    border-color: var(--quest-green);
    box-shadow: 0 0 8px var(--quest-green);
}

/* Quest Buttons - Enhanced green */
#panel-quests .add-quest-btn {
    border-color: var(--quest-green);
    color: var(--quest-green);
    text-shadow: 0 0 4px var(--quest-green);
}

#panel-quests .add-quest-btn:hover {
    background: var(--quest-green-dim);
    box-shadow: 0 0 12px var(--quest-green);
}

#panel-quests .create-quest-btn {
    border-color: var(--quest-green);
    color: var(--quest-green);
}

#panel-quests .create-quest-btn:hover {
    background: var(--quest-green-dim);
    box-shadow: 0 0 15px var(--quest-green);
    text-shadow: 0 0 8px var(--quest-green);
}

/* Accept Quest Button - Green */
#panel-quests .accept-quest-btn {
    background: linear-gradient(180deg, var(--quest-green) 0%, var(--quest-green-muted) 100%);
    color: var(--bg-darkest);
}

#panel-quests .accept-quest-btn:hover {
    background: linear-gradient(180deg, #50ff70 0%, var(--quest-green) 100%);
    box-shadow: 0 4px 12px rgba(48, 255, 80, 0.4);
}

/* Quest Status Badges */
#panel-quests .quest-status-badge.active {
    color: var(--quest-green);
    background: rgba(48, 255, 80, 0.15);
    border-color: var(--quest-green);
    text-shadow: 0 0 4px var(--quest-green);
}

/* Form inputs - Green focus */
#panel-quests .form-group input:focus,
#panel-quests .form-group textarea:focus,
#panel-quests .form-group select:focus {
    border-color: var(--quest-green);
    box-shadow: 0 0 10px rgba(48, 255, 80, 0.2), inset 0 0 20px rgba(48, 255, 80, 0.03);
}

/* Quest Actions border */
#panel-quests .quest-actions {
    border-top-color: var(--quest-green-dim);
}

/* Empty state */
#panel-quests .empty-state {
    color: var(--quest-green-dim);
}

/* Campaign tag in Quest Log */
#panel-quests .quest-campaign-tag {
    text-shadow: 0 0 4px var(--pip-amber);
}

/* Faction Quest Items in Quest Log - Blue theme */
.faction-quest-item {
    border-left-color: #5c7cfa !important;
}

.faction-quest-item::before {
    background: #5c7cfa !important;
}

.faction-quest-item:hover {
    border-color: #5c7cfa !important;
}

.faction-quest-item .quest-item-icon.faction-icon {
    color: #5c7cfa;
    font-family: 'Share Tech Mono', monospace;
    font-size: 12px;
}

.faction-quest-item .quest-campaign-tag.faction-tag {
    color: #5c7cfa;
    background: rgba(92, 124, 250, 0.15);
    border-color: #5c7cfa;
    text-shadow: 0 0 4px #5c7cfa;
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.faction-quest-item .quest-item-reward {
    color: #5c7cfa;
}

/* ============================================
   END QUEST LOG TAB THEME
   ============================================ */

/* ============================================
   STATS TAB - Productivity Graph
   ============================================ */

/* Life Trackers (Party panel sidebar) */
.life-trackers {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 8px;
}

.life-tracker-section {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid var(--border-subtle);
    border-radius: 3px;
    padding: 4px 6px 3px;
    cursor: pointer;
    transition: border-color 0.15s;
}

.life-tracker-section:hover {
    border-color: var(--pip-green-dim);
}

.life-tracker-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 3px;
    font-family: 'Share Tech Mono', monospace;
    font-size: 9px;
    color: var(--pip-green);
    letter-spacing: 1.5px;
    text-shadow: 0 0 6px var(--pip-green);
}

.life-tracker-month {
    color: var(--text-dim);
    font-size: 8px;
    letter-spacing: 1px;
    text-shadow: none;
}

.life-tracker-summary {
    font-size: 8px;
    color: var(--text-dim);
    letter-spacing: 0.5px;
    text-shadow: none;
}

/* Tracker Day Grid (compact 7-day preview) */
.stats-tracker-grid {
    display: flex;
    gap: 2px;
    flex-wrap: nowrap;
}

.tracker-day {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    padding: 2px 1px;
    min-width: 24px;
    flex: 1;
    border: 1px solid var(--border-subtle);
    border-radius: 2px;
    background: var(--bg-darkest);
}

/* Expanded day boxes (larger in overlay) */
.tracker-day.expanded {
    min-width: 38px;
    width: 38px;
    flex: none;
    padding: 4px 3px;
}

.tracker-day.done {
    border-color: rgba(48, 255, 80, 0.4);
    background: rgba(48, 255, 80, 0.08);
}

.tracker-day.missed {
    border-color: rgba(255, 68, 68, 0.4);
    background: rgba(255, 68, 68, 0.08);
}

.tracker-day.rest {
    border-color: var(--border-subtle);
    opacity: 0.4;
}

.tracker-day.pending {
    border-color: rgba(255, 176, 48, 0.4);
    background: rgba(255, 176, 48, 0.06);
}

.tracker-day.today {
    border-width: 2px;
}

.tracker-day-num {
    font-family: 'Share Tech Mono', monospace;
    font-size: 10px;
    color: var(--text-normal);
    font-weight: bold;
    line-height: 1;
}

.tracker-day.expanded .tracker-day-num { font-size: 13px; }
.tracker-day.expanded .tracker-day-icon { font-size: 11px; }

.tracker-day.done .tracker-day-num { color: var(--pip-green); }
.tracker-day.missed .tracker-day-num { color: #ff4444; }
.tracker-day.pending .tracker-day-num { color: var(--pip-amber); }

/* Empire tracker uses amber for "done" */
.tracker-day.empire.done {
    border-color: rgba(255, 176, 48, 0.4);
    background: rgba(255, 176, 48, 0.08);
}
.tracker-day.empire.done .tracker-day-num { color: var(--pip-amber); }
.tracker-day.empire.done .tracker-day-icon { color: var(--pip-amber); }

.tracker-day-icon {
    font-size: 9px;
    line-height: 1;
}

.tracker-day.done .tracker-day-icon { color: var(--pip-green); }
.tracker-day.missed .tracker-day-icon { color: #ff4444; }
.tracker-day.pending .tracker-day-icon { color: var(--pip-amber); }

/* Water tracker (blue themed) */
.tracker-day.water.done {
    border-color: rgba(74, 158, 255, 0.4);
    background: rgba(74, 158, 255, 0.08);
}
.tracker-day.water.done .tracker-day-num { color: #4a9eff; }
.tracker-day.water.done .tracker-day-icon { color: #4a9eff; }
.tracker-day.water.partial {
    border-color: rgba(74, 158, 255, 0.25);
    background: rgba(74, 158, 255, 0.04);
}
.tracker-day.water.partial .tracker-day-num { color: rgba(74, 158, 255, 0.6); }
.tracker-day.water.partial .tracker-day-icon { color: rgba(74, 158, 255, 0.6); font-size: 8px; }

/* Month separator in expanded view */
.tracker-month-sep {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Share Tech Mono', monospace;
    font-size: 9px;
    color: var(--pip-green);
    letter-spacing: 1px;
    text-shadow: 0 0 4px var(--pip-green);
    padding: 0 2px;
    flex-shrink: 0;
    writing-mode: vertical-lr;
    text-orientation: mixed;
    opacity: 0.7;
}

/* Expanded tracker overlay */
.tracker-expanded-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tracker-expanded-overlay.hidden {
    display: none;
}

.tracker-expanded-panel {
    background: var(--bg-dark);
    border: 1px solid var(--pip-green);
    border-radius: 6px;
    padding: 16px 20px;
    max-width: 700px;
    width: 90%;
    box-shadow: 0 0 30px rgba(48, 255, 80, 0.15);
}

.tracker-expanded-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    font-family: 'Share Tech Mono', monospace;
    font-size: 13px;
    color: var(--pip-green);
    letter-spacing: 2px;
    text-shadow: 0 0 8px var(--pip-green);
}

.tracker-expanded-close {
    background: none;
    border: 1px solid var(--pip-green-dim);
    color: var(--pip-green);
    font-size: 18px;
    width: 28px;
    height: 28px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}

.tracker-expanded-close:hover {
    background: rgba(48, 255, 80, 0.1);
    border-color: var(--pip-green);
}

.tracker-expanded-scroll {
    overflow-x: auto;
    padding-bottom: 6px;
    scrollbar-width: thin;
    scrollbar-color: var(--pip-green-dim) transparent;
}

.tracker-expanded-scroll::-webkit-scrollbar { height: 4px; }
.tracker-expanded-scroll::-webkit-scrollbar-track { background: transparent; }
.tracker-expanded-scroll::-webkit-scrollbar-thumb { background: var(--pip-green-dim); border-radius: 2px; }

.stats-tracker-grid.expanded {
    gap: 3px;
}

.tracker-expanded-summary {
    margin-top: 10px;
    font-family: 'Share Tech Mono', monospace;
    font-size: 11px;
    color: var(--text-dim);
    letter-spacing: 1px;
}

/* ============================================
   END LIFE TRACKERS
   ============================================ */

/* ============================================
   DAILIES TAB
   ============================================ */

.dailies-container {
    display: grid;
    grid-template-columns: 1fr 350px;
    gap: var(--spacing-lg);
    height: 100%;
    padding: var(--spacing-md);
}

.dailies-list-panel {
    display: flex;
    flex-direction: column;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--pip-green-dim);
    border-radius: 4px;
}

.dailies-list-panel .panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-md);
    border-bottom: 1px solid var(--pip-green-dim);
}

.dailies-reset-timer {
    font-family: 'Share Tech Mono', monospace;
    font-size: 12px;
    color: var(--pip-amber-muted);
}

.dailies-list {
    flex: 1;
    overflow-y: auto;
    padding: var(--spacing-md);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

/* Individual Daily Item */
.daily-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background: rgba(48, 255, 80, 0.05);
    border: 1px solid rgba(48, 255, 80, 0.2);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.daily-item:hover {
    background: rgba(48, 255, 80, 0.1);
    border-color: rgba(48, 255, 80, 0.4);
}

.daily-item.completed {
    background: rgba(48, 255, 80, 0.15);
    border-color: var(--pip-green);
}

.daily-checkbox {
    width: 24px;
    height: 24px;
    border: 2px solid rgba(48, 255, 80, 0.4);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.daily-item.completed .daily-checkbox {
    background: rgba(48, 255, 80, 0.3);
    border-color: var(--pip-green);
    color: var(--pip-green);
}

.daily-checkbox::after {
    content: '';
}

.daily-item.completed .daily-checkbox::after {
    content: '✓';
    font-size: 14px;
    font-weight: bold;
}

.daily-info {
    flex: 1;
}

.daily-name {
    font-family: 'Rajdhani', sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: var(--pip-green);
    margin-bottom: 2px;
}

.daily-buff {
    font-family: 'Share Tech Mono', monospace;
    font-size: 11px;
    color: var(--pip-green-muted);
}

.daily-reward {
    display: flex;
    align-items: center;
    gap: 4px;
    font-family: 'Rajdhani', sans-serif;
    font-size: 14px;
    color: var(--pip-amber);
}

.daily-reward .cap-icon {
    width: 16px;
    height: 16px;
}

.daily-streak {
    font-family: 'Share Tech Mono', monospace;
    font-size: 11px;
    color: var(--pip-amber-muted);
    text-align: right;
}

/* Right Panel - Info */
.dailies-info-panel {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.dailies-section {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--pip-green-dim);
    border-radius: 4px;
    overflow: hidden;
}

.dailies-section-header {
    font-family: 'Share Tech Mono', monospace;
    font-size: 12px;
    color: var(--pip-green);
    letter-spacing: 1px;
    padding: var(--spacing-sm) var(--spacing-md);
    background: rgba(48, 255, 80, 0.1);
    border-bottom: 1px solid var(--pip-green-dim);
}

/* Active Buffs */
.active-buffs-list {
    padding: var(--spacing-md);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.buff-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm);
    background: rgba(48, 255, 80, 0.08);
    border: 1px solid rgba(48, 255, 80, 0.2);
    border-radius: 4px;
}

.buff-info {
    flex: 1;
}

.buff-name {
    font-family: 'Rajdhani', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--pip-green);
}

.buff-timer {
    font-family: 'Share Tech Mono', monospace;
    font-size: 10px;
    color: var(--pip-green-muted);
}

/* Streaks List */
.streaks-list {
    padding: var(--spacing-md);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.streak-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-xs) 0;
    font-family: 'Rajdhani', sans-serif;
    font-size: 13px;
}

.streak-name {
    color: var(--text-muted);
}

.streak-count {
    font-family: 'Share Tech Mono', monospace;
    color: var(--pip-amber);
}

.streak-count.active {
    color: var(--pip-green);
    text-shadow: 0 0 6px var(--pip-green);
}

/* Milestones */
.milestones-list {
    padding: var(--spacing-md);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.milestone-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-xs) 0;
    font-family: 'Rajdhani', sans-serif;
    font-size: 13px;
    color: var(--text-dim);
}

.milestone-item.achieved {
    color: var(--pip-green);
}

.milestone-days {
    color: var(--text-muted);
}

.milestone-reward {
    font-family: 'Share Tech Mono', monospace;
    color: var(--pip-amber-muted);
}

.milestone-item.achieved .milestone-reward {
    color: var(--pip-amber);
}

.empty-state-small {
    font-family: 'Share Tech Mono', monospace;
    font-size: 12px;
    color: var(--text-dim);
    text-align: center;
    padding: var(--spacing-md);
    font-style: italic;
}

/* Bounty Board */
.bounty-board {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.bounty-item {
    background: var(--bg-dark);
    border: 1px solid var(--pip-green-dim);
    padding: var(--spacing-sm) var(--spacing-md);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-md);
}

.bounty-item.completed {
    border-color: var(--pip-green-muted);
    opacity: 0.5;
}

.bounty-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.bounty-title {
    font-family: 'Share Tech Mono', monospace;
    color: var(--pip-amber);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.bounty-item.completed .bounty-title {
    color: var(--pip-green-muted);
}

.bounty-desc {
    color: var(--text-dim);
    font-size: 11px;
}

.bounty-reward {
    font-family: 'Share Tech Mono', monospace;
    font-size: 14px;
    font-weight: bold;
    color: var(--pip-amber);
    text-shadow: 0 0 6px var(--pip-amber);
    white-space: nowrap;
}

.bounty-item.completed .bounty-reward {
    color: var(--pip-green-muted);
    text-shadow: none;
}

.bounty-empty {
    color: var(--text-dim);
    font-size: 12px;
    font-style: italic;
    padding: var(--spacing-sm) 0;
}

/* ============================================
   END DAILIES TAB
   ============================================ */

/* ============================================
   CODEX TAB
   ============================================ */

.codex-container {
    padding: var(--spacing-md);
    overflow-y: auto;
    flex: 1;
}

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

.codex-empty {
    color: var(--text-dim);
    font-size: 13px;
    font-style: italic;
    text-align: center;
    padding: var(--spacing-xl);
}

.codex-category-group {
    margin-bottom: var(--spacing-md);
}

.codex-category-header {
    font-family: 'Rajdhani', sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-dim);
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: var(--spacing-sm);
    padding-bottom: var(--spacing-xs);
    border-bottom: 1px solid var(--pip-green-dim);
}

.codex-entry {
    background: var(--bg-medium);
    border: 1px solid var(--pip-green-dim);
    padding: var(--spacing-md);
    clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}

.codex-entry-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--spacing-md);
}

.codex-rule-text {
    font-family: 'Share Tech Mono', monospace;
    color: var(--pip-green);
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-shadow: 0 0 6px rgba(48, 255, 80, 0.3);
    flex: 1;
}

.codex-entry-actions {
    display: flex;
    gap: var(--spacing-xs);
    flex-shrink: 0;
}

.codex-action-btn {
    background: var(--bg-dark);
    border: 1px solid var(--pip-green-dim);
    color: var(--text-dim);
    font-family: 'Rajdhani', sans-serif;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1px;
    padding: 2px 8px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.codex-action-btn:hover {
    color: var(--pip-green);
    border-color: var(--pip-green);
}

.codex-action-btn.delete:hover {
    color: #ff4444;
    border-color: #ff4444;
}

.codex-context {
    color: var(--text-normal);
    font-size: 13px;
    margin-top: var(--spacing-sm);
    line-height: 1.5;
}

.codex-date {
    font-size: 10px;
    color: var(--text-dim);
    margin-top: var(--spacing-sm);
    display: block;
}

.codex-add-btn {
    background: var(--bg-dark);
    border: 1px solid var(--pip-green);
    color: var(--pip-green);
    font-family: 'Rajdhani', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1px;
    padding: 4px 12px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.codex-add-btn:hover {
    background: var(--pip-green);
    color: var(--bg-dark);
}

/* Codex Modal */
.codex-modal {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
}

.codex-modal-content {
    background: var(--bg-dark);
    border: 2px solid var(--pip-green);
    padding: var(--spacing-lg);
    width: 90%;
    max-width: 500px;
    box-shadow: 0 0 30px rgba(48, 255, 80, 0.2);
}

.codex-modal-title {
    font-family: 'Share Tech Mono', monospace;
    color: var(--pip-green);
    font-size: 18px;
    letter-spacing: 2px;
    margin: 0 0 var(--spacing-lg) 0;
    text-shadow: 0 0 8px rgba(48, 255, 80, 0.5);
}

.codex-form-group {
    margin-bottom: var(--spacing-md);
}

.codex-label {
    font-family: 'Rajdhani', sans-serif;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-dim);
    letter-spacing: 2px;
    text-transform: uppercase;
    display: block;
    margin-bottom: var(--spacing-xs);
}

.codex-input,
.codex-textarea {
    width: 100%;
    background: var(--bg-medium);
    border: 1px solid var(--pip-green-dim);
    color: var(--text-bright);
    font-family: 'Rajdhani', sans-serif;
    font-size: 14px;
    padding: var(--spacing-sm) var(--spacing-md);
    box-sizing: border-box;
    transition: border-color 0.15s ease;
}

.codex-input:focus,
.codex-textarea:focus {
    outline: none;
    border-color: var(--pip-green);
    box-shadow: 0 0 8px rgba(48, 255, 80, 0.2);
}

.codex-textarea {
    resize: vertical;
    min-height: 60px;
}

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

.codex-btn {
    font-family: 'Rajdhani', sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1px;
    padding: var(--spacing-sm) var(--spacing-lg);
    cursor: pointer;
    border: 1px solid var(--pip-green);
    transition: all 0.15s ease;
}

.codex-btn.save {
    background: var(--pip-green);
    color: var(--bg-dark);
}

.codex-btn.save:hover {
    background: var(--pip-green-bright);
    box-shadow: 0 0 12px rgba(48, 255, 80, 0.4);
}

.codex-btn.cancel {
    background: transparent;
    color: var(--text-dim);
    border-color: var(--text-dim);
}

.codex-btn.cancel:hover {
    color: var(--text-normal);
    border-color: var(--text-normal);
}

/* ============================================
   END CODEX TAB
   ============================================ */

/* ============================================
   FALLOUT-STYLE NOTIFICATIONS
   ============================================ */

.fallout-notification {
    position: fixed;
    top: 80px;
    left: 50%;
    transform: translateX(-50%) translateY(-20px);
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: rgba(13, 15, 10, 0.95);
    border: 2px solid var(--pip-green);
    box-shadow:
        0 0 20px rgba(48, 255, 80, 0.3),
        inset 0 0 30px rgba(48, 255, 80, 0.05);
    opacity: 0;
    transition: all 0.4s ease-out;
    z-index: 10000;
    pointer-events: none;
}

.fallout-notification.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.notification-bracket {
    font-family: 'Share Tech Mono', monospace;
    font-size: 24px;
    font-weight: bold;
    color: var(--pip-green);
    text-shadow: 0 0 10px var(--pip-green);
}

.notification-text {
    font-family: 'Share Tech Mono', monospace;
    font-size: 16px;
    font-weight: 500;
    color: var(--pip-green);
    text-transform: uppercase;
    letter-spacing: 2px;
    text-shadow: 0 0 8px rgba(48, 255, 80, 0.6);
}

/* Loot Drop notification variants */
.fallout-notification.loot-rare {
    border-color: var(--pip-amber);
    box-shadow:
        0 0 20px rgba(255, 176, 48, 0.3),
        inset 0 0 30px rgba(255, 176, 48, 0.05);
}

.fallout-notification.loot-rare .notification-bracket,
.fallout-notification.loot-rare .notification-text {
    color: var(--pip-amber);
    text-shadow: 0 0 10px var(--pip-amber);
}

.fallout-notification.loot-legendary {
    border-color: var(--pip-amber);
    box-shadow:
        0 0 30px rgba(255, 176, 48, 0.5),
        0 0 60px rgba(255, 176, 48, 0.2),
        inset 0 0 30px rgba(255, 176, 48, 0.1);
    animation: legendary-pulse 0.5s ease-in-out;
}

.fallout-notification.loot-legendary .notification-bracket,
.fallout-notification.loot-legendary .notification-text {
    color: var(--pip-amber);
    text-shadow: 0 0 12px var(--pip-amber);
}

@keyframes legendary-pulse {
    0%, 100% { transform: translateX(-50%) scale(1); }
    50% { transform: translateX(-50%) scale(1.08); }
}

/* Fallout "Everyone liked that" notification - top left */
.fallout-liked-notification {
    position: fixed;
    top: 100px;
    left: 30px;
    font-family: 'Courier New', 'Share Tech Mono', monospace;
    font-size: 18px;
    font-weight: bold;
    color: #e8e4b8;
    text-shadow:
        1px 1px 0 #000,
        -1px -1px 0 #000,
        1px -1px 0 #000,
        -1px 1px 0 #000;
    opacity: 0;
    transform: translateX(-20px);
    transition: all 0.4s ease-out;
    z-index: 10001;
    pointer-events: none;
    letter-spacing: 0.5px;
    /* Box styling */
    background: rgba(0, 0, 0, 0.85);
    padding: 12px 20px;
    border: 2px solid #8b7355;
    box-shadow:
        inset 0 0 20px rgba(0, 0, 0, 0.5),
        0 0 15px rgba(0, 0, 0, 0.8);
}

.fallout-liked-notification.show {
    opacity: 1;
    transform: translateX(0);
}

/* ============================================
   PLANNER TAB STYLES
   ============================================ */

#panel-planner .panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

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

.planner-dropdown {
    background: rgba(0, 20, 0, 0.8);
    border: 1px solid var(--pip-green);
    color: var(--pip-green);
    padding: 8px 12px;
    font-family: 'Share Tech Mono', monospace;
    font-size: 13px;
    cursor: pointer;
    min-width: 150px;
}

.planner-dropdown:hover {
    background: rgba(0, 40, 0, 0.9);
}

.planner-dropdown option {
    background: #0a1a0a;
    color: var(--pip-green);
}

.planner-refresh-btn {
    background: transparent;
    border: 1px solid var(--pip-green);
    color: var(--pip-green);
    padding: 8px 16px;
    font-family: 'Share Tech Mono', monospace;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.planner-refresh-btn:hover {
    background: rgba(48, 255, 80, 0.1);
    box-shadow: 0 0 10px rgba(48, 255, 80, 0.3);
}

.planner-refresh-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.planner-content {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    height: calc(100vh - 160px);
}

.planner-stats-row {
    display: flex;
    gap: 16px;
}

.planner-stat {
    background: rgba(0, 20, 0, 0.6);
    border: 1px solid rgba(48, 255, 80, 0.3);
    padding: 16px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 100px;
}

.planner-stat-value {
    font-family: 'Share Tech Mono', monospace;
    font-size: 28px;
    font-weight: bold;
    color: var(--pip-green);
}

.planner-stat-value.in-progress {
    color: #ffb74d;
}

.planner-stat-value.done {
    color: #66bb6a;
}

.planner-stat-value.pending {
    color: #78909c;
}

.planner-stat-label {
    font-size: 11px;
    color: rgba(48, 255, 80, 0.6);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 4px;
}

.planner-table-container {
    flex: 1;
    overflow-y: auto;
    border: 1px solid rgba(48, 255, 80, 0.3);
    background: rgba(0, 10, 0, 0.4);
}

.planner-table {
    width: 100%;
    border-collapse: collapse;
    font-family: 'Share Tech Mono', monospace;
}

.planner-table thead {
    position: sticky;
    top: 0;
    background: rgba(0, 30, 0, 0.95);
    z-index: 1;
}

.planner-table th {
    padding: 12px 16px;
    text-align: left;
    font-size: 12px;
    font-weight: bold;
    color: var(--pip-green);
    text-transform: uppercase;
    letter-spacing: 1px;
    border-bottom: 2px solid var(--pip-green);
}

.planner-table td {
    padding: 12px 16px;
    font-size: 13px;
    border-bottom: 1px solid rgba(48, 255, 80, 0.15);
    color: rgba(48, 255, 80, 0.9);
}

.planner-row {
    transition: background 0.2s ease;
}

.planner-row:hover {
    background: rgba(48, 255, 80, 0.05);
}

.planner-row.done {
    opacity: 0.5;
}

.planner-row.done .planner-task {
    text-decoration: line-through;
}

.planner-row.in-progress {
    background: rgba(255, 183, 77, 0.05);
}

.planner-date {
    white-space: nowrap;
    color: rgba(48, 255, 80, 0.7);
    font-size: 12px;
}

.planner-project {
    font-weight: bold;
    color: var(--pip-green);
}

.planner-task {
    max-width: 400px;
}

.planner-status {
    text-align: center;
}

.status-badge {
    display: inline-block;
    padding: 4px 10px;
    font-size: 10px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 2px;
}

.status-badge.pending {
    background: rgba(120, 144, 156, 0.2);
    color: #78909c;
    border: 1px solid #78909c;
}

.status-badge.in-progress {
    background: rgba(255, 183, 77, 0.2);
    color: #ffb74d;
    border: 1px solid #ffb74d;
}

.status-badge.done {
    background: rgba(102, 187, 106, 0.2);
    color: #66bb6a;
    border: 1px solid #66bb6a;
}

.planner-loading td,
.planner-empty td,
.planner-error td {
    text-align: center;
    padding: 40px;
    color: rgba(48, 255, 80, 0.5);
    font-style: italic;
}

.planner-error td {
    color: #ff6b6b;
}

/* ============================================
   FACTION COLUMN STYLES (Player Tab)
   ============================================ */

/* Faction column specific styling */
.faction-column {
    border-color: #5c7cfa;
}

.faction-column::before {
    background: linear-gradient(90deg, transparent, #5c7cfa, transparent);
}

.quest-column-header.faction-header {
    color: #5c7cfa;
    border-bottom-color: rgba(92, 124, 250, 0.3);
}

.quest-column-header.faction-header .quest-marker {
    color: #5c7cfa;
    text-shadow: 0 0 6px #5c7cfa;
}

/* Faction section headers in player tab */
.player-section-header.player-section-faction {
    color: #5c7cfa;
    border-bottom-color: rgba(92, 124, 250, 0.3);
}

.player-section-header.player-section-faction .player-section-count {
    background: rgba(92, 124, 250, 0.2);
    color: #5c7cfa;
}

/* Faction task cards */
.player-faction-card {
    background: rgba(92, 124, 250, 0.08);
    border: 1px solid rgba(92, 124, 250, 0.25);
    padding: 10px 12px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
}

.player-faction-card:hover {
    background: rgba(92, 124, 250, 0.15);
    border-color: #5c7cfa;
}

.player-faction-card.active {
    border-color: #ffb74d;
    background: rgba(255, 183, 77, 0.1);
}

.player-faction-card.completed {
    opacity: 0.5;
}

.player-faction-card .player-card-name {
    color: #8fa4ff;
    font-family: 'Rajdhani', sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.player-faction-card .player-card-reward {
    color: #5c7cfa;
    font-family: 'Rajdhani', sans-serif;
    font-size: 11px;
}

.player-faction-card .player-card-steps {
    color: rgba(92, 124, 250, 0.7);
    font-family: 'Rajdhani', sans-serif;
}

/* More link for truncated lists */
.player-section-more {
    text-align: center;
    padding: 8px;
    font-size: 11px;
    color: rgba(92, 124, 250, 0.6);
    font-style: italic;
}

/* ============================================
   FACTION TAB - DISTINCT BLUE THEME
   Matches Quest Log/Empire layout with blue colors
   ============================================ */

#panel-faction {
    --faction-blue: #5c7cfa;
    --faction-blue-muted: #4a6cd4;
    --faction-blue-dark: #3a5cb4;
    --faction-blue-dim: #2a4084;
    --faction-border: rgba(92, 124, 250, 0.3);
    --faction-glow: rgba(92, 124, 250, 0.15);
}

/* Client Check-In — compact chip layout */
.client-checkin-section {
    margin-bottom: var(--spacing-md);
    padding: 8px 10px;
    background: rgba(92, 124, 250, 0.03);
    border: 1px solid rgba(92, 124, 250, 0.1);
    border-radius: 4px;
}

.checkin-header-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: 6px;
}

.checkin-title {
    font-family: 'Share Tech Mono', monospace;
    font-size: 11px;
    color: var(--faction-blue);
    letter-spacing: 2px;
}

.checkin-counter {
    font-family: 'Share Tech Mono', monospace;
    font-size: 11px;
    color: var(--text-dim);
}

.client-week-label {
    font-family: 'Share Tech Mono', monospace;
    font-size: 10px;
    color: var(--faction-blue);
    opacity: 0.5;
    margin-left: auto;
}

.client-checkin-list {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

/* Client chip — toggleable badge */
.client-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    background: rgba(92, 124, 250, 0.04);
    border: 1px solid rgba(92, 124, 250, 0.12);
    border-radius: 3px;
    cursor: pointer;
    transition: all 0.15s;
    position: relative;
}

.client-chip:hover {
    background: rgba(92, 124, 250, 0.08);
    border-color: rgba(92, 124, 250, 0.25);
}

.client-chip.contacted {
    background: rgba(92, 124, 250, 0.12);
    border-color: rgba(92, 124, 250, 0.35);
}

.client-chip-check {
    font-size: 10px;
    width: 14px;
    height: 14px;
    border: 1px solid rgba(92, 124, 250, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 2px;
    color: var(--faction-blue);
    flex-shrink: 0;
}

.client-chip.contacted .client-chip-check {
    background: rgba(92, 124, 250, 0.2);
    border-color: var(--faction-blue);
    text-shadow: 0 0 4px var(--faction-glow);
}

.client-chip-name {
    font-family: 'Rajdhani', sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-bright);
    letter-spacing: 0.3px;
}

.client-chip-remove {
    background: none;
    border: none;
    color: var(--text-dim);
    font-size: 12px;
    cursor: pointer;
    padding: 0 2px;
    opacity: 0;
    transition: opacity 0.15s;
    line-height: 1;
}

.client-chip:hover .client-chip-remove {
    opacity: 0.5;
}

.client-chip-remove:hover {
    opacity: 1 !important;
    color: #ff4444;
}

.client-add-row {
    display: flex;
    gap: 4px;
    margin-top: 6px;
}

.client-add-input {
    flex: 1;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(92, 124, 250, 0.12);
    color: var(--text-bright);
    font-family: 'Rajdhani', sans-serif;
    font-size: 12px;
    padding: 3px 8px;
    border-radius: 3px;
    outline: none;
}

.client-add-input::placeholder {
    color: var(--text-dim);
}

.client-add-input:focus {
    border-color: var(--faction-blue);
}

.client-add-btn {
    background: rgba(92, 124, 250, 0.08);
    border: 1px solid rgba(92, 124, 250, 0.15);
    color: var(--faction-blue);
    font-family: 'Share Tech Mono', monospace;
    font-size: 13px;
    padding: 2px 10px;
    cursor: pointer;
    border-radius: 3px;
}

.client-add-btn:hover {
    background: rgba(92, 124, 250, 0.2);
    border-color: var(--faction-blue);
}


.faction-layout {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    grid-template-rows: 1fr;
    gap: var(--spacing-xl);
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

/* Faction List Section with banner feel */
.faction-list-section {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
    flex: 1;
    background: linear-gradient(180deg, rgba(92, 124, 250, 0.03) 0%, transparent 100%);
    border: 1px solid var(--faction-border);
    border-radius: 2px;
    padding: var(--spacing-md);
    padding-top: 20px;
    position: relative;
}

.faction-list-section::before {
    content: '⚔ FACTION TASKS ⚔';
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--bg-darkest);
    padding: 0 var(--spacing-md);
    font-family: 'Share Tech Mono', monospace;
    font-size: 11px;
    letter-spacing: 3px;
    color: var(--faction-blue);
    text-shadow: 0 0 8px var(--faction-blue);
}

/* Faction Section Headers - Blue accents (matches Quest Log/Empire pattern) */
#panel-faction .section-header span:first-child {
    color: var(--faction-blue);
    text-shadow: 0 0 6px rgba(92, 124, 250, 0.5);
}

#panel-faction .section-header {
    border-bottom-color: var(--faction-border);
}

#panel-faction .section-header::after {
    background: var(--faction-blue);
    box-shadow: 0 0 8px var(--faction-blue);
}

#panel-faction .section-header .header-stats {
    background: rgba(92, 124, 250, 0.2);
    color: var(--faction-blue);
}

/* Faction Task List - matches quest-list and contract-list */
.faction-task-list {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    min-height: 100px;
}

.faction-task-list.completed-list {
    flex: 0 0 auto;
}

.faction-project-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.faction-project-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: rgba(92, 124, 250, 0.05);
    border: 1px solid rgba(92, 124, 250, 0.2);
    cursor: pointer;
    transition: all 0.2s ease;
}

.faction-project-item:hover {
    background: rgba(92, 124, 250, 0.1);
    border-color: rgba(92, 124, 250, 0.4);
}

.faction-project-item.selected {
    background: rgba(92, 124, 250, 0.15);
    border-color: #5c7cfa;
    box-shadow: 0 0 10px rgba(92, 124, 250, 0.2);
}

.faction-project-icon {
    font-family: 'Share Tech Mono', monospace;
    color: #5c7cfa;
    font-size: 14px;
}

.faction-project-info {
    flex: 1;
}

.faction-project-info .faction-project-name {
    font-family: 'Share Tech Mono', monospace;
    font-size: 13px;
    color: #8fa4ff;
    margin-bottom: 2px;
}

.faction-project-info .faction-project-progress-text {
    font-size: 11px;
    color: rgba(92, 124, 250, 0.6);
}

/* Faction Detail Section */
.faction-detail-section {
    display: flex;
    flex-direction: column;
    background: linear-gradient(135deg, rgba(92, 124, 250, 0.03) 0%, var(--bg-dark) 100%);
    border: 1px solid var(--faction-border);
    padding: var(--spacing-lg);
    overflow-y: auto;
    min-height: 0;
    position: relative;
}

.faction-detail-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--faction-blue-dark), transparent);
}

.faction-detail-view {
    height: 100%;
}

.no-project-selected {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    text-align: center;
    color: rgba(92, 124, 250, 0.5);
}

.no-project-selected .empty-icon {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.5;
}

.no-project-selected .hint {
    font-size: 12px;
    opacity: 0.7;
    margin-top: 8px;
}

.faction-project-details {
    display: flex;
    flex-direction: column;
}

.faction-detail-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
    padding-bottom: var(--spacing-md);
    border-bottom: 1px solid var(--faction-blue-dim);
}

.faction-detail-title {
    font-family: 'Share Tech Mono', monospace;
    font-size: 16px;
    color: var(--faction-blue);
    text-transform: uppercase;
    letter-spacing: 2px;
    text-shadow: 0 0 10px var(--faction-blue);
    margin: 0;
    flex: 1;
    font-weight: 500;
}

.faction-status-badge {
    padding: 4px 12px;
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 2px;
}

.faction-status-badge.in-progress {
    background: rgba(92, 124, 250, 0.25);
    color: var(--faction-blue);
    border: 1px solid var(--faction-blue);
}

.faction-status-badge.pending {
    background: rgba(92, 124, 250, 0.15);
    color: var(--faction-blue-muted);
    border: 1px solid var(--faction-blue-muted);
}

.faction-status-badge.completed {
    background: rgba(92, 124, 250, 0.1);
    color: var(--faction-blue-dim);
    border: 1px solid var(--faction-blue-dim);
}

.faction-progress-bar {
    height: 10px;
    background: var(--bg-darkest);
    margin-bottom: var(--spacing-xs);
    overflow: hidden;
    border: 1px solid var(--faction-blue-dim);
    position: relative;
}

.faction-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--faction-blue-dark), var(--faction-blue));
    transition: width 0.3s ease;
    box-shadow: 0 0 10px var(--faction-blue);
}

.faction-progress-text {
    font-family: 'Share Tech Mono', monospace;
    font-size: 14px;
    color: var(--faction-blue-muted);
    letter-spacing: 1px;
}

.faction-tasks-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-sm);
    overflow-y: auto;
    flex: 1;
}

.faction-task-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 16px;
    background: rgba(92, 124, 250, 0.05);
    border: 1px solid rgba(92, 124, 250, 0.15);
    transition: all 0.2s ease;
    cursor: pointer;
    font-family: 'Rajdhani', sans-serif;
}

.faction-task-item.active {
    background: rgba(255, 183, 77, 0.08);
    border-color: rgba(255, 183, 77, 0.3);
}

.faction-task-item.completed {
    opacity: 0.5;
}

.faction-task-item.completed .faction-task-text {
    text-decoration: line-through;
}

.faction-task-checkbox {
    width: 20px;
    height: 20px;
    border: 1px solid rgba(92, 124, 250, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: #5c7cfa;
    flex-shrink: 0;
}

.faction-task-item.completed .faction-task-checkbox {
    background: rgba(92, 124, 250, 0.2);
    border-color: var(--faction-blue);
    color: var(--faction-blue);
}

.faction-task-item.active .faction-task-checkbox {
    background: rgba(92, 124, 250, 0.25);
    border-color: var(--faction-blue);
    color: var(--faction-blue);
}

.faction-task-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.faction-task-text {
    font-size: 13px;
    color: rgba(92, 124, 250, 0.9);
}

.faction-task-item.active .faction-task-text {
    color: #ffb74d;
}

.faction-task-due {
    font-size: 11px;
    color: rgba(92, 124, 250, 0.5);
}

/* Selectable faction tasks */
.faction-task-item {
    cursor: pointer;
}

.faction-task-item:hover {
    background: rgba(92, 124, 250, 0.12);
    border-color: #5c7cfa;
}

.faction-task-item.selected {
    background: rgba(92, 124, 250, 0.15);
    border-color: #5c7cfa;
    box-shadow: 0 0 10px rgba(92, 124, 250, 0.2);
}

.faction-task-item.completed:hover {
    background: rgba(102, 187, 106, 0.12);
}

.faction-task-reward {
    font-family: 'Rajdhani', sans-serif;
    font-size: 11px;
    color: var(--faction-blue);
    margin-left: auto;
    padding-left: 12px;
    opacity: 0.7;
}

.faction-task-item.completed .faction-task-reward {
    opacity: 0.3;
}

/* Faction Detail View - Empty State */
.no-faction-selected {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    text-align: center;
    color: var(--faction-blue-dim);
    font-family: 'Share Tech Mono', monospace;
}

.no-faction-selected .empty-icon {
    font-size: 48px;
    margin-bottom: var(--spacing-md);
    opacity: 0.3;
    color: var(--faction-blue);
    filter: drop-shadow(0 0 10px var(--faction-blue));
}

.no-faction-selected p {
    font-size: 15px;
    margin-bottom: var(--spacing-xs);
    letter-spacing: 1px;
    text-transform: uppercase;
}

.no-faction-selected .hint {
    font-size: 14px;
    color: var(--faction-blue-dark);
    letter-spacing: 0.5px;
    text-transform: none;
}

/* Faction Details Panel */
.faction-details {
    display: flex;
    flex-direction: column;
}

.faction-project-tag.detail-project {
    display: inline-block;
    font-family: 'Share Tech Mono', monospace;
    font-size: 11px;
    padding: 4px 10px;
    background: rgba(92, 124, 250, 0.2);
    color: #5c7cfa;
    border: 1px solid rgba(92, 124, 250, 0.4);
    border-radius: 2px;
    letter-spacing: 1px;
    text-transform: uppercase;
    width: fit-content;
}

.faction-detail-description {
    font-family: 'Rajdhani', sans-serif;
    font-size: 14px;
    color: rgba(92, 124, 250, 0.8);
    line-height: 1.5;
    margin: 0;
    padding: 12px;
    background: rgba(92, 124, 250, 0.05);
    border-left: 2px solid rgba(92, 124, 250, 0.4);
}

.faction-detail-info {
    background: rgba(92, 124, 250, 0.05);
    border: 1px solid rgba(92, 124, 250, 0.2);
    padding: 16px;
}

.faction-detail-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid rgba(92, 124, 250, 0.1);
}

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

.faction-detail-label {
    font-family: 'Share Tech Mono', monospace;
    font-size: 12px;
    color: rgba(92, 124, 250, 0.6);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.faction-detail-value {
    font-family: 'Share Tech Mono', monospace;
    font-size: 13px;
    color: #8fa4ff;
}

.faction-detail-value.faction-reward-value {
    color: var(--pip-green);
}

.faction-detail-note {
    background: rgba(92, 124, 250, 0.05);
    border-left: 3px solid #5c7cfa;
    padding: 12px 16px;
    margin-top: 8px;
}

.faction-detail-note p {
    font-family: 'Rajdhani', sans-serif;
    font-size: 12px;
    color: rgba(92, 124, 250, 0.7);
    margin: 0;
    font-style: italic;
}

/* Faction Reward Badge (in detail header) */
.faction-reward-badge {
    display: flex;
    align-items: center;
    gap: 4px;
    background: rgba(92, 124, 250, 0.1);
    border: 1px solid rgba(92, 124, 250, 0.3);
    padding: 4px 10px;
    font-family: 'Share Tech Mono', monospace;
    font-size: 14px;
    color: var(--faction-blue);
}

.faction-reward-badge .reward-icon {
    color: var(--faction-blue);
}

.faction-reward-badge .reward-cap-icon {
    filter: drop-shadow(0 0 4px var(--faction-blue));
}

/* Faction Task Items in Detail View */
.faction-tasks-list .faction-task-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: linear-gradient(90deg, var(--bg-darkest) 0%, var(--bg-dark) 100%);
    border: 1px solid var(--faction-blue-dim);
    cursor: default;
    transition: all 0.15s ease;
    font-family: 'Share Tech Mono', monospace;
    position: relative;
}

.faction-tasks-list .faction-task-item:hover {
    background: var(--bg-dark);
    border-color: var(--faction-blue);
}

.faction-tasks-list .faction-task-item.completed {
    opacity: 0.5;
}

.faction-tasks-list .task-checkbox {
    width: 20px;
    height: 20px;
    min-width: 20px;
    border: 1px solid rgba(92, 124, 250, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: #5c7cfa;
    flex-shrink: 0;
}

.faction-tasks-list .faction-task-item.completed .task-checkbox {
    background: rgba(92, 124, 250, 0.2);
    border-color: var(--faction-blue);
    color: var(--faction-blue);
}

.faction-tasks-list .task-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.faction-tasks-list .task-title-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.faction-tasks-list .task-text {
    font-family: 'Rajdhani', sans-serif;
    font-size: 13px;
    color: rgba(92, 124, 250, 0.9);
}

.faction-tasks-list .faction-task-item.completed .task-text {
    text-decoration: line-through;
    color: rgba(92, 124, 250, 0.5);
}

.faction-tasks-list .task-details {
    font-family: 'Rajdhani', sans-serif;
    font-size: 11px;
    color: rgba(92, 124, 250, 0.6);
    font-style: italic;
}

.faction-tasks-list .due-date-badge {
    font-size: 10px;
    padding: 2px 6px;
}

.faction-tasks-list .task-reward {
    font-family: 'Share Tech Mono', monospace;
    font-size: 11px;
    color: var(--faction-blue);
    opacity: 0.7;
}

.faction-tasks-list .faction-task-item.completed .task-reward {
    opacity: 0.3;
}

/* Faction Project List (matches quest list) */
.faction-project-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 20px;
}

/* ============================================
   MAIN QUESTS COLUMN - GREEN THEME (Player Tab)
   ============================================ */

/* Main Quests column specific styling */
.main-quests-column {
    border-color: #30ff50;
}

.main-quests-column::before {
    background: linear-gradient(90deg, transparent, #30ff50, transparent);
}

.quest-column-header.main-quests-header {
    color: #30ff50;
}

.quest-column-header.main-quests-header .quest-marker {
    color: #30ff50;
    text-shadow: 0 0 6px #30ff50;
}

/* Main quest cards in player tab - green accents */
.main-quests-column .player-quest-card {
    background: rgba(48, 255, 80, 0.08);
    border: 1px solid rgba(48, 255, 80, 0.25);
}

.main-quests-column .player-quest-card:hover {
    background: rgba(48, 255, 80, 0.15);
    border-color: #30ff50;
}

.main-quests-column .player-quest-card .player-quest-name {
    color: #50ff70;
    font-weight: 600;
}

.main-quests-column .player-quest-card .player-quest-campaign {
    background: rgba(48, 255, 80, 0.2);
    color: #30ff50;
    border-color: rgba(48, 255, 80, 0.4);
}

.main-quests-column .player-quest-card .player-quest-reward {
    color: #30ff50;
    opacity: 0.8;
}

.main-quests-column .player-quest-card .player-quest-progress {
    color: rgba(48, 255, 80, 0.7);
}

/* ============================================
   EMPIRE COLUMN - GOLD THEME (Player Tab)
   Distinct gold/amber styling for Empire contracts
   ============================================ */

/* Empire column specific styling */
.empire-column {
    border-color: #ffd700;
}

.empire-column::before {
    background: linear-gradient(90deg, transparent, #ffd700, transparent);
}

.quest-column-header.empire-header {
    color: #ffd700;
    border-bottom-color: rgba(255, 215, 0, 0.3);
}

.quest-column-header.empire-header .quest-marker {
    color: #ffd700;
    text-shadow: 0 0 6px #ffd700;
}

/* Empire contract cards in player tab - gold accents */
.empire-column .player-contract-card {
    background: rgba(255, 215, 0, 0.08);
    border: 1px solid rgba(255, 215, 0, 0.25);
}

.empire-column .player-contract-card:hover {
    background: rgba(255, 215, 0, 0.15);
    border-color: #ffd700;
}

.empire-column .player-contract-card .player-quest-name {
    color: #ffd700;
    font-weight: 600;
}

.empire-column .player-contract-card .player-quest-campaign {
    background: rgba(255, 215, 0, 0.2);
    color: #ffd700;
    border-color: rgba(255, 215, 0, 0.4);
}

.empire-column .player-contract-card .player-quest-reward {
    color: #ffd700;
    opacity: 0.8;
}

.empire-column .player-contract-card .player-quest-progress {
    color: rgba(255, 215, 0, 0.7);
}

/* Empire section headers */
.player-section-header.player-section-empire {
    color: #ffd700;
    text-shadow: 0 0 6px rgba(255, 215, 0, 0.5);
    border-bottom-color: rgba(255, 215, 0, 0.2);
}

.player-section-header.player-section-empire .player-section-count {
    background: rgba(255, 215, 0, 0.2);
    color: #ffd700;
}

/* Progress bars in empire column - gold fill */
.empire-column .progress-bar-mini {
    border-color: rgba(255, 215, 0, 0.3);
}

.empire-column .progress-fill-mini {
    background: linear-gradient(90deg, #c9a227, #ffd700);
}

/* ============================================
   FACTION PROJECT TAGS
   ============================================ */

.faction-task-project-tag {
    display: inline-block;
    font-family: 'Share Tech Mono', monospace;
    font-size: 10px;
    padding: 2px 6px;
    background: rgba(92, 124, 250, 0.2);
    color: #5c7cfa;
    border: 1px solid rgba(92, 124, 250, 0.4);
    border-radius: 2px;
    margin-right: 8px;
    letter-spacing: 0.5px;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
    text-transform: uppercase;
}

/* ============================================
   UNIFIED PLAYER TAB CARDS
   Consistent styling across Empire, Faction, Main Quests
   ============================================ */

.player-card {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 10px 12px;
    background: rgba(92, 124, 250, 0.08);
    border: 1px solid rgba(92, 124, 250, 0.25);
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: 'Rajdhani', sans-serif;
    margin-bottom: 5px;
    clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
}

.player-card:hover {
    background: rgba(92, 124, 250, 0.15);
    border-color: rgba(92, 124, 250, 0.5);
}

.player-card.active {
    border-color: #ffb74d;
    background: rgba(255, 183, 77, 0.1);
}

.player-card.completed {
    opacity: 0.5;
}

.player-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.player-card-name {
    font-size: 13px;
    font-weight: 600;
    color: #8fa4ff;
    line-height: 1.3;
}

.player-card-tag {
    display: inline-block;
    font-family: 'Share Tech Mono', monospace;
    font-size: 9px;
    padding: 2px 6px;
    background: rgba(92, 124, 250, 0.2);
    color: #5c7cfa;
    border: 1px solid rgba(92, 124, 250, 0.4);
    border-radius: 2px;
    letter-spacing: 0.5px;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-transform: uppercase;
}

.player-card-progress {
    height: 4px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 2px;
    overflow: hidden;
}

.player-card-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #4a6cd4, #5c7cfa);
    transition: width 0.3s ease;
}

/* Dual progress bar support for player cards */
.player-card-progress.dual-progress {
    position: relative;
}

.player-card-progress.dual-progress .player-card-progress-active,
.player-card-progress.dual-progress .player-card-progress-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
}

.player-card-progress-active {
    background: rgba(92, 124, 250, 0.3);
    transition: width 0.3s ease;
    z-index: 1;
}

.player-card-progress.dual-progress .player-card-progress-fill {
    z-index: 2;
}

.player-card-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.player-card-steps {
    font-size: 11px;
    color: rgba(92, 124, 250, 0.7);
}

.player-card-reward {
    font-size: 11px;
    color: #5c7cfa;
    opacity: 0.8;
}

.player-card-date {
    font-size: 10px;
    color: rgba(92, 124, 250, 0.6);
}

.player-card-empty {
    text-align: center;
    padding: 20px 10px;
    color: rgba(92, 124, 250, 0.4);
    font-size: 12px;
    font-style: italic;
}

.player-card-more {
    text-align: center;
    padding: 8px;
    font-size: 11px;
    color: rgba(92, 124, 250, 0.5);
    font-style: italic;
}

/* Section headers within player tab boxes */
.player-box-section-header {
    font-family: 'Share Tech Mono', monospace;
    font-size: 10px;
    color: rgba(48, 255, 80, 0.7);
    letter-spacing: 1px;
    padding: 5px 0 4px 0;
    margin-top: 10px;
    margin-bottom: 5px;
    border-bottom: 1px solid rgba(48, 255, 80, 0.2);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.player-box-section-header:first-child {
    margin-top: 0;
}

.player-box-count {
    font-size: 10px;
    opacity: 0.7;
}

/* Empire section headers - Gold */
.player-box-section-header.empire-section {
    color: rgba(255, 215, 0, 0.7);
    border-bottom-color: rgba(255, 215, 0, 0.2);
}

.empire-column .player-box-section-header {
    color: rgba(255, 215, 0, 0.7);
    border-bottom-color: rgba(255, 215, 0, 0.2);
}

/* Faction section headers - Blue */
.player-box-section-header.faction-section {
    color: rgba(92, 124, 250, 0.7);
    border-bottom-color: rgba(92, 124, 250, 0.3);
}

.faction-column .player-box-section-header {
    color: rgba(92, 124, 250, 0.7);
    border-bottom-color: rgba(92, 124, 250, 0.3);
}

/* Main Quest section headers - Green */
.main-quests-column .player-box-section-header {
    color: rgba(48, 255, 80, 0.7);
    border-bottom-color: rgba(48, 255, 80, 0.2);
}

/* Empire cards - Gold theme */
.empire-column .player-card {
    background: rgba(255, 215, 0, 0.08);
    border-color: rgba(255, 215, 0, 0.25);
}

.empire-column .player-card:hover {
    background: rgba(255, 215, 0, 0.15);
    border-color: rgba(255, 215, 0, 0.5);
}

.empire-column .player-card-name {
    color: #ffd700;
}

.empire-column .player-card-tag,
.player-card-tag.empire-tag {
    background: rgba(255, 215, 0, 0.2);
    color: #ffd700;
    border-color: rgba(255, 215, 0, 0.4);
}

.empire-column .player-card-progress {
    background: rgba(255, 215, 0, 0.15);
}

.empire-column .player-card-progress-fill,
.player-card-progress-fill.empire-fill {
    background: linear-gradient(90deg, #c9a227, #ffd700);
}

.empire-column .player-card-steps {
    color: rgba(255, 215, 0, 0.7);
}

.empire-column .player-card-reward {
    color: #ffd700;
}

.empire-column .player-card-empty,
.empire-column .player-card-more {
    color: rgba(255, 215, 0, 0.4);
}

/* Main Quests cards - Green theme */
.main-quests-column .player-card {
    background: rgba(48, 255, 80, 0.08);
    border-color: rgba(48, 255, 80, 0.25);
}

.main-quests-column .player-card:hover {
    background: rgba(48, 255, 80, 0.15);
    border-color: rgba(48, 255, 80, 0.5);
}

.main-quests-column .player-card-name {
    color: #50ff70;
}

.main-quests-column .player-card-tag {
    background: rgba(48, 255, 80, 0.2);
    color: #30ff50;
    border-color: rgba(48, 255, 80, 0.4);
}

.main-quests-column .player-card-progress {
    background: rgba(48, 255, 80, 0.15);
}

.main-quests-column .player-card-progress-fill,
.player-card-progress-fill.quest-fill {
    background: linear-gradient(90deg, #28a745, #30ff50);
}

.main-quests-column .player-card-steps {
    color: rgba(48, 255, 80, 0.7);
}

.main-quests-column .player-card-reward {
    color: #30ff50;
}

.main-quests-column .player-card-empty,
.main-quests-column .player-card-more {
    color: rgba(48, 255, 80, 0.4);
}

/* Faction cards - Blue theme */
.faction-column .player-card {
    background: rgba(92, 124, 250, 0.08);
    border-color: rgba(92, 124, 250, 0.25);
}

.faction-column .player-card:hover {
    background: rgba(92, 124, 250, 0.15);
    border-color: rgba(92, 124, 250, 0.5);
}

.faction-column .player-card-name {
    color: #8fa4ff;
}

.faction-column .player-card-progress {
    background: rgba(92, 124, 250, 0.15);
}

.faction-column .player-card-progress-fill,
.player-card-progress-fill.faction-fill {
    background: linear-gradient(90deg, #4a6cd4, #5c7cfa);
}

.player-card-progress-active.faction-active {
    background: rgba(92, 124, 250, 0.35);
}

.faction-column .player-card-steps {
    color: rgba(92, 124, 250, 0.7);
}

.faction-column .player-card-date {
    color: rgba(92, 124, 250, 0.6);
}

.faction-column .player-card-empty,
.faction-column .player-card-more {
    color: rgba(92, 124, 250, 0.4);
}

/* ============================================
   UNIFIED TAB CARDS
   Consistent card styling across Quest Log, Empire, Faction tabs
   Based on player-card design with angular cut corners
   ============================================ */

.tab-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px 16px;
    background: rgba(48, 255, 80, 0.08);
    border: 1px solid rgba(48, 255, 80, 0.25);
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: 'Rajdhani', sans-serif;
    margin-bottom: 8px;
    clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
}

.tab-card:hover {
    background: rgba(48, 255, 80, 0.15);
    border-color: rgba(48, 255, 80, 0.5);
}

.tab-card.selected {
    background: rgba(48, 255, 80, 0.18);
    border-color: rgba(48, 255, 80, 0.7);
    box-shadow: 0 0 12px rgba(48, 255, 80, 0.2);
}

.tab-card.completed {
    opacity: 0.5;
}

.tab-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.tab-card-name {
    font-family: 'Rajdhani', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #50ff70;
    letter-spacing: 0.5px;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tab-card-reward {
    font-family: 'Rajdhani', sans-serif;
    font-size: 11px;
    color: #50ff70;
    font-weight: 500;
    opacity: 0.8;
}

.tab-card-tag {
    display: inline-block;
    font-family: 'Share Tech Mono', monospace;
    font-size: 10px;
    padding: 2px 6px;
    background: rgba(48, 255, 80, 0.2);
    color: #30ff50;
    border: 1px solid rgba(48, 255, 80, 0.4);
    border-radius: 2px;
    letter-spacing: 0.5px;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-transform: uppercase;
}

.tab-card-progress {
    height: 4px;
    background: rgba(48, 255, 80, 0.1);
    border-radius: 2px;
    overflow: hidden;
}

.tab-card-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #28a745, #30ff50);
    transition: width 0.3s ease;
}

/* Dual progress bar support - shows both "in progress" and "completed" */
.tab-card-progress.dual-progress {
    position: relative;
}

.tab-card-progress.dual-progress .tab-card-progress-active,
.tab-card-progress.dual-progress .tab-card-progress-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
}

.tab-card-progress-active {
    background: rgba(92, 124, 250, 0.3);
    transition: width 0.3s ease;
    z-index: 1;
}

.tab-card-progress.dual-progress .tab-card-progress-fill {
    z-index: 2;
}

.tab-card-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: 'Rajdhani', sans-serif;
    font-size: 11px;
}

.tab-card-steps {
    font-family: 'Rajdhani', sans-serif;
    color: rgba(48, 255, 80, 0.7);
}

.tab-card-date {
    font-family: 'Rajdhani', sans-serif;
    color: rgba(48, 255, 80, 0.6);
    font-size: 10px;
}

/* Due Date Badge on Cards */
.due-date-badge {
    font-family: 'Share Tech Mono', monospace;
    font-size: 10px;
    color: var(--text-dim);
    padding: 2px 6px;
    background: rgba(48, 255, 80, 0.1);
    border: 1px solid rgba(48, 255, 80, 0.2);
    border-radius: 3px;
    white-space: nowrap;
}

.due-date-badge.soon {
    color: var(--pip-amber);
    background: rgba(255, 176, 48, 0.15);
    border-color: rgba(255, 176, 48, 0.3);
}

.due-date-badge.overdue {
    color: var(--red-bright);
    background: rgba(255, 64, 64, 0.15);
    border-color: rgba(255, 64, 64, 0.3);
    animation: pulse-red 2s infinite;
}

/* TODAY - Amber warning across all themes */
.due-date-badge.today {
    color: #ffb347;
    background: rgba(255, 179, 71, 0.25);
    border-color: rgba(255, 179, 71, 0.6);
    text-shadow: 0 0 6px rgba(255, 179, 71, 0.8);
    animation: pulse-amber 2s infinite;
}

@keyframes pulse-red {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* Empire tab due date badge */
#panel-empire .due-date-badge {
    background: rgba(255, 193, 7, 0.2);
    border-color: rgba(255, 193, 7, 0.5);
    color: #ffca28;
    text-shadow: 0 0 4px rgba(255, 193, 7, 0.5);
}

#panel-empire .due-date-badge.soon {
    color: var(--pip-amber);
    background: rgba(255, 176, 48, 0.2);
    border-color: rgba(255, 176, 48, 0.5);
    text-shadow: 0 0 4px var(--pip-amber);
}

/* Faction tab due date badge - BLUE */
#panel-faction .due-date-badge {
    background: rgba(92, 124, 250, 0.15);
    border-color: rgba(92, 124, 250, 0.3);
    color: #7c9aff;
}

#panel-faction .due-date-badge.soon {
    color: #a0b4ff;
    background: rgba(92, 124, 250, 0.25);
    border-color: rgba(92, 124, 250, 0.5);
    text-shadow: 0 0 4px rgba(92, 124, 250, 0.6);
}

/* Quest tab due date badge - GREEN */
#panel-quests .due-date-badge {
    background: rgba(48, 255, 80, 0.15);
    border-color: rgba(48, 255, 80, 0.3);
    color: var(--pip-green);
}

/* Quest tab - .soon uses brighter green-amber, .overdue uses red with green tint */
#panel-quests .due-date-badge.soon {
    color: #ffcc00;
    background: rgba(255, 200, 0, 0.2);
    border-color: rgba(255, 200, 0, 0.5);
    text-shadow: 0 0 4px rgba(255, 200, 0, 0.5);
}

#panel-quests .due-date-badge.overdue {
    color: #ff6b6b;
    background: rgba(255, 80, 80, 0.2);
    border-color: rgba(255, 80, 80, 0.5);
    text-shadow: 0 0 6px rgba(255, 80, 80, 0.6);
    animation: pulse-red 2s infinite;
}

#panel-quests .due-date-badge.today {
    color: #ffb347;
    background: rgba(255, 179, 71, 0.25);
    border-color: rgba(255, 179, 71, 0.6);
    text-shadow: 0 0 6px rgba(255, 179, 71, 0.8);
    animation: pulse-amber 2s infinite;
}

/* Empire tab - .soon uses bright gold, .overdue uses red with gold tint */
#panel-empire .due-date-badge.overdue {
    color: #ff7043;
    background: rgba(255, 100, 60, 0.2);
    border-color: rgba(255, 100, 60, 0.5);
    text-shadow: 0 0 6px rgba(255, 100, 60, 0.6);
    animation: pulse-red 2s infinite;
}

#panel-empire .due-date-badge.today {
    color: #ffb347;
    background: rgba(255, 179, 71, 0.25);
    border-color: rgba(255, 179, 71, 0.6);
    text-shadow: 0 0 6px rgba(255, 179, 71, 0.8);
    animation: pulse-amber 2s infinite;
}

/* Faction tab - .overdue uses red with blue tint */
#panel-faction .due-date-badge.overdue {
    color: #ff6b9d;
    background: rgba(255, 80, 120, 0.2);
    border-color: rgba(255, 80, 120, 0.5);
    text-shadow: 0 0 6px rgba(255, 80, 120, 0.6);
    animation: pulse-red 2s infinite;
}

#panel-faction .due-date-badge.today {
    color: #ffb347;
    background: rgba(255, 179, 71, 0.25);
    border-color: rgba(255, 179, 71, 0.6);
    text-shadow: 0 0 6px rgba(255, 179, 71, 0.8);
    animation: pulse-amber 2s infinite;
}

/* Faction column on player tab - due date states */
.faction-column .due-date-badge.soon {
    color: #a0b4ff;
    background: rgba(92, 124, 250, 0.25);
    border-color: rgba(92, 124, 250, 0.5);
    text-shadow: 0 0 4px rgba(92, 124, 250, 0.5);
}

.faction-column .due-date-badge.overdue {
    color: #ff6b9d;
    background: rgba(255, 80, 120, 0.2);
    border-color: rgba(255, 80, 120, 0.5);
    text-shadow: 0 0 6px rgba(255, 80, 120, 0.6);
}

.faction-column .due-date-badge.today {
    color: #ffb347;
    background: rgba(255, 179, 71, 0.25);
    border-color: rgba(255, 179, 71, 0.6);
    text-shadow: 0 0 6px rgba(255, 179, 71, 0.8);
}

/* Player card due date badges - match parent column colors */
.main-quests-column .due-date-badge {
    background: rgba(48, 255, 80, 0.15);
    border-color: rgba(48, 255, 80, 0.3);
    color: var(--pip-green);
}

.main-quests-column .due-date-badge.soon {
    color: #ffcc00;
    background: rgba(255, 200, 0, 0.2);
    border-color: rgba(255, 200, 0, 0.5);
}

.main-quests-column .due-date-badge.overdue {
    color: #ff6b6b;
    background: rgba(255, 80, 80, 0.2);
    border-color: rgba(255, 80, 80, 0.5);
}

.main-quests-column .due-date-badge.today {
    color: #ffb347;
    background: rgba(255, 179, 71, 0.25);
    border-color: rgba(255, 179, 71, 0.6);
    text-shadow: 0 0 6px rgba(255, 179, 71, 0.8);
}

.empire-column .due-date-badge {
    background: rgba(255, 193, 7, 0.2);
    border-color: rgba(255, 193, 7, 0.5);
    color: #ffca28;
    text-shadow: 0 0 4px rgba(255, 193, 7, 0.5);
}

.empire-column .due-date-badge.overdue {
    color: #ff7043;
    background: rgba(255, 100, 60, 0.2);
    border-color: rgba(255, 100, 60, 0.5);
    text-shadow: 0 0 6px rgba(255, 100, 60, 0.6);
}

.empire-column .due-date-badge.today {
    color: #ffb347;
    background: rgba(255, 179, 71, 0.25);
    border-color: rgba(255, 179, 71, 0.6);
    text-shadow: 0 0 6px rgba(255, 179, 71, 0.8);
}

.faction-column .due-date-badge {
    background: rgba(92, 124, 250, 0.15);
    border-color: rgba(92, 124, 250, 0.4);
    color: #7c9aff;
}

/* Quest Log Tab - Green theme (default) */
#panel-quests .tab-card {
    background: rgba(48, 255, 80, 0.08);
    border-color: rgba(48, 255, 80, 0.25);
}

#panel-quests .tab-card:hover {
    background: rgba(48, 255, 80, 0.15);
    border-color: rgba(48, 255, 80, 0.5);
}

#panel-quests .tab-card.selected {
    background: rgba(48, 255, 80, 0.18);
    border-color: rgba(48, 255, 80, 0.7);
}

#panel-quests .tab-card-name {
    color: #50ff70;
}

#panel-quests .tab-card-reward {
    color: #50ff70;
}

#panel-quests .tab-card-tag {
    background: rgba(48, 255, 80, 0.2);
    color: #30ff50;
    border-color: rgba(48, 255, 80, 0.4);
}

#panel-quests .tab-card-progress-fill {
    background: linear-gradient(90deg, #28a745, #30ff50);
}

#panel-quests .tab-card-steps {
    color: rgba(48, 255, 80, 0.7);
}

/* Quest Log - Faction items in quest list (blue variant) */
#panel-quests .tab-card.faction-item {
    background: rgba(92, 124, 250, 0.08);
    border-color: rgba(92, 124, 250, 0.25);
}

#panel-quests .tab-card.faction-item:hover {
    background: rgba(92, 124, 250, 0.15);
    border-color: rgba(92, 124, 250, 0.5);
}

#panel-quests .tab-card.faction-item.selected {
    background: rgba(92, 124, 250, 0.18);
    border-color: rgba(92, 124, 250, 0.7);
}

#panel-quests .tab-card.faction-item .tab-card-name {
    color: #8fa4ff;
}

#panel-quests .tab-card.faction-item .tab-card-reward {
    color: #5c7cfa;
}

#panel-quests .tab-card.faction-item .tab-card-tag {
    background: rgba(92, 124, 250, 0.2);
    color: #5c7cfa;
    border-color: rgba(92, 124, 250, 0.4);
}

/* Empire Tab - Gold theme */
#panel-empire .tab-card {
    background: rgba(255, 215, 0, 0.08);
    border-color: rgba(255, 215, 0, 0.25);
}

#panel-empire .tab-card:hover {
    background: rgba(255, 215, 0, 0.15);
    border-color: rgba(255, 215, 0, 0.5);
}

#panel-empire .tab-card.selected {
    background: rgba(255, 215, 0, 0.18);
    border-color: rgba(255, 215, 0, 0.7);
    box-shadow: 0 0 12px rgba(255, 215, 0, 0.2);
}

#panel-empire .tab-card-name {
    color: #ffd700;
}

#panel-empire .tab-card-reward {
    color: #ffd700;
}

#panel-empire .tab-card-tag {
    background: rgba(255, 215, 0, 0.2);
    color: #ffd700;
    border-color: rgba(255, 215, 0, 0.4);
}

#panel-empire .tab-card-progress-fill {
    background: linear-gradient(90deg, #c9a227, #ffd700);
}

#panel-empire .tab-card-steps {
    color: rgba(255, 215, 0, 0.7);
}

/* Faction Tab - Blue theme */
#panel-faction .tab-card {
    background: rgba(92, 124, 250, 0.08);
    border-color: rgba(92, 124, 250, 0.25);
}

#panel-faction .tab-card:hover {
    background: rgba(92, 124, 250, 0.15);
    border-color: rgba(92, 124, 250, 0.5);
}

#panel-faction .tab-card.selected {
    background: rgba(92, 124, 250, 0.18);
    border-color: rgba(92, 124, 250, 0.7);
    box-shadow: 0 0 12px rgba(92, 124, 250, 0.2);
}

#panel-faction .tab-card-name {
    color: #8fa4ff;
}

#panel-faction .tab-card-reward {
    color: #5c7cfa;
}

#panel-faction .tab-card-tag {
    background: rgba(92, 124, 250, 0.2);
    color: #5c7cfa;
    border-color: rgba(92, 124, 250, 0.4);
}

#panel-faction .tab-card-progress-fill {
    background: linear-gradient(90deg, #4a6cd4, #5c7cfa);
}

#panel-faction .tab-card-progress-active {
    background: rgba(92, 124, 250, 0.35);
}

#panel-faction .tab-card-steps {
    color: rgba(92, 124, 250, 0.7);
}

#panel-faction .tab-card-date {
    color: rgba(92, 124, 250, 0.6);
}

/* ============================================
   MOBILE-FIRST RESPONSIVE DESIGN
   Complete mobile optimization
   ============================================ */

/* Mobile Back Button - Hidden by default, shown on mobile detail views */
.mobile-back-btn {
    display: none;
    align-items: center;
    gap: 8px;
    background: transparent;
    border: 1px solid var(--pip-green-dim);
    color: var(--pip-green);
    font-family: 'Share Tech Mono', monospace;
    font-size: 14px;
    letter-spacing: 1px;
    padding: 10px 16px;
    cursor: pointer;
    margin-bottom: var(--spacing-md);
    transition: all 0.2s ease;
}

.mobile-back-btn:hover {
    background: var(--bg-light);
    border-color: var(--pip-green);
}

.mobile-back-btn::before {
    content: '←';
    font-size: 16px;
}

/* Small Tablets and Large Phones (max-width: 900px) */
@media (max-width: 900px) {
    /* Hide title bar on mobile web */
    .title-bar {
        display: none;
    }

    /* Adjust app container without title bar */
    .app-container {
        height: 100vh;
        height: 100dvh; /* Dynamic viewport height for mobile browsers */
    }

    /* Player dashboard - stack vertically */
    .player-dashboard-new {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;
        gap: var(--spacing-md);
    }

    .party-panel {
        flex-direction: row;
        flex-wrap: wrap;
        padding: var(--spacing-sm);
        gap: var(--spacing-sm);
        max-height: none;
        overflow: visible;
        clip-path: none;
    }

    .party-header {
        width: 100%;
        margin-bottom: 0;
    }

    .party-members {
        flex-direction: row;
        gap: var(--spacing-md);
        width: 100%;
        justify-content: center;
    }

    .party-member.player {
        margin-bottom: 0;
    }

    .party-avatar-large {
        width: 80px;
        height: 80px;
    }

    .party-avatar-small {
        width: 50px;
        height: 50px;
    }

    .party-perk {
        display: none; /* Hide perks on mobile to save space */
    }

    .player-today-block {
        width: 100%;
        margin-top: var(--spacing-sm);
    }

    .player-content-section {
        padding: 0;
    }

    /* Quests row - stack on tablets */
    .quests-row,
    .quests-row.three-columns {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }

    .quests-column {
        min-height: 150px;
        max-height: 250px;
    }

    /* Quest/Empire/Faction layouts */
    .quest-log-layout,
    .guild-layout,
    .faction-layout {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-md);
    }

    /* Dailies layout */
    .dailies-container {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-md);
    }

    .dailies-list-panel,
    .dailies-info-panel {
        flex: none;
        width: 100%;
    }
}

/* Mobile Phones (max-width: 600px) */
@media (max-width: 600px) {
    :root {
        --spacing-xs: 3px;
        --spacing-sm: 6px;
        --spacing-md: 12px;
        --spacing-lg: 16px;
        --spacing-xl: 20px;
    }

    body {
        font-size: 14px;
    }

    /* Navigation - Horizontal scroll */
    .top-nav {
        flex-direction: column;
        gap: 6px;
        padding: 8px;
        position: sticky;
        top: 0;
        z-index: 100;
    }

    .nav-tabs {
        width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        flex-wrap: nowrap;
        gap: 4px;
        padding-bottom: 4px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        justify-content: flex-start;
        scroll-snap-type: x mandatory;
    }

    .nav-tabs::-webkit-scrollbar {
        display: none;
    }

    .nav-tab {
        scroll-snap-align: center;
    }

    .nav-tab {
        flex-shrink: 0;
        font-size: 11px;
        padding: 8px 12px;
        letter-spacing: 1px;
        min-height: 36px;
        clip-path: none;
        border-radius: 4px;
    }

    .nav-stats {
        width: 100%;
        justify-content: space-between;
        padding: 6px 10px;
        gap: var(--spacing-md);
    }

    .currency-label {
        font-size: 11px;
    }

    .currency-value {
        font-size: 14px;
    }

    .currency-cap-icon {
        width: 16px;
        height: 16px;
    }

    /* Main content */
    .main-content {
        padding: var(--spacing-sm);
        overflow-y: auto;
        overflow-x: hidden;
    }

    /* Tab panels - allow scrolling on mobile */
    .tab-panel.active {
        overflow-y: auto;
        overflow-x: hidden;
    }

    /* Panel headers - keep hidden on mobile too */
    .panel-header {
        display: none;
    }

    .panel-location {
        font-size: 14px;
        letter-spacing: 2px;
    }

    /* Section headers */
    .section-header {
        padding-bottom: 6px;
        margin-bottom: 8px;
    }

    .section-header span:first-child {
        font-size: 11px;
    }

    /* Status bar - keep hidden on mobile too */
    .status-bar {
        display: none;
    }

    /* ==========================================
       PLAYER TAB - Mobile Optimized
       ========================================== */

    .player-dashboard-new {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;
        gap: var(--spacing-sm);
        overflow-y: auto;
        overflow-x: hidden;
    }

    .party-panel {
        padding: var(--spacing-sm);
        flex-direction: column;
        gap: var(--spacing-sm);
        clip-path: none;
        border-radius: 4px;
    }

    .party-header {
        font-size: 13px;
        letter-spacing: 2px;
        margin-bottom: 4px;
    }

    .party-members {
        flex-direction: row;
        justify-content: center;
        align-items: flex-end;
        gap: var(--spacing-md);
    }

    .party-member {
        align-items: center;
    }

    .party-member-name {
        font-size: 10px;
        letter-spacing: 1px;
    }

    .party-member.companion .party-member-name {
        font-size: 8px;
    }

    .party-avatar-large {
        width: 55px;
        height: 55px;
        overflow: hidden;
        border-radius: 50%;
        background: var(--pip-green-dim);
        border: 2px solid var(--pip-green-dim);
    }

    .party-avatar-small {
        width: 38px;
        height: 38px;
        overflow: hidden;
        border-radius: 50%;
        background: var(--pip-green-dim);
        border: 2px solid var(--pip-green-dim);
    }

    .party-avatar-large video,
    .party-avatar-small video,
    .avatar-video,
    .companion-video,
    .idle-video {
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        max-height: none !important;
        object-fit: cover !important;
        display: block !important;
        filter: none !important;
        border-radius: 50% !important;
    }

    .player-active-buffs {
        gap: 3px;
    }

    .player-buff-icon {
        width: 20px;
        height: 20px;
        font-size: 10px;
    }

    .party-perk {
        display: none;
    }

    .player-today-block {
        margin-top: var(--spacing-sm);
        padding: var(--spacing-sm);
    }

    .daily-header {
        font-size: 12px;
    }

    .daily-value {
        font-size: 20px;
    }

    .daily-label {
        font-size: 11px;
    }

    /* Primary objective */
    .primary-objective-panel {
        padding: 12px;
        clip-path: none;
        border-radius: 4px;
    }

    .objective-header {
        margin-bottom: 8px;
    }

    .objective-marker {
        font-size: 14px;
    }

    .objective-title {
        font-size: 12px;
    }

    .objective-name {
        font-size: 15px;
    }

    .objective-desc {
        font-size: 12px;
    }

    .objective-progress-bar {
        height: 10px;
    }

    .objective-progress-text {
        font-size: 12px;
    }

    .objective-milestones {
        gap: 6px;
        flex-wrap: wrap;
    }

    .obj-milestone {
        flex: 1 1 45%;
        min-width: 70px;
        padding: 6px 8px;
    }

    .obj-milestone-marker {
        font-size: 11px;
    }

    .obj-milestone-label {
        font-size: 11px;
    }

    .obj-milestone-reward {
        font-size: 11px;
    }

    /* Quest columns */
    .quests-row,
    .quests-row.three-columns {
        grid-template-columns: 1fr;
        gap: var(--spacing-sm);
    }

    .quests-column {
        clip-path: none;
        border-radius: 4px;
        padding: var(--spacing-sm);
        min-height: 120px;
        max-height: 200px;
    }

    .quest-column-header {
        padding-bottom: 6px;
        margin-bottom: 6px;
        flex-wrap: wrap;
        gap: 4px;
    }

    .quest-marker {
        font-size: 11px;
    }

    .quest-column-header span:nth-child(2) {
        font-size: 12px;
    }

    .quest-count-dual {
        font-size: 9px;
        width: 100%;
        margin-top: 2px;
    }

    .player-quest-item,
    .player-contract-item,
    .player-faction-item {
        padding: 10px;
        min-height: 44px; /* Touch target */
    }

    .player-quest-name,
    .player-contract-name {
        font-size: 12px;
    }

    .player-quest-progress,
    .player-contract-progress,
    .player-quest-reward {
        font-size: 10px;
    }

    /* ==========================================
       QUEST LOG TAB - Mobile Optimized
       ========================================== */

    .quest-log-layout {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-sm);
    }

    .quest-list-section {
        flex: none;
        max-height: none;
    }

    .quest-detail-section {
        flex: none;
    }

    /* Mobile: Hide detail section by default, show when quest selected */
    .quest-detail-section.mobile-hidden {
        display: none !important;
    }

    .quest-detail-section.mobile-visible {
        display: flex !important;
        flex-direction: column !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        z-index: 9999 !important;
        background: var(--bg-darkest) !important;
        padding: var(--spacing-md) !important;
        padding-top: 60px !important;
        overflow-y: auto !important;
    }

    .quest-detail-section.mobile-visible .mobile-back-btn {
        display: flex !important;
        position: fixed;
        top: 10px;
        left: 10px;
        z-index: 10000;
    }

    .quest-item {
        padding: 12px;
        min-height: 48px;
    }

    .quest-item-name {
        font-size: 13px;
    }

    .quest-item-progress,
    .quest-item-reward {
        font-size: 11px;
    }

    .quest-detail-view,
    .add-contract-form {
        padding: var(--spacing-md);
    }

    .quest-detail-title {
        font-size: 14px;
    }

    .quest-status-badge {
        font-size: 10px;
        padding: 3px 8px;
    }

    .quest-progress-bar {
        height: 12px;
    }

    .quest-progress-text {
        font-size: 11px;
    }

    .objective-item {
        padding: 10px;
        min-height: 44px;
    }

    .objective-text {
        font-size: 12px;
    }

    .objective-reward {
        font-size: 11px;
    }

    .quest-actions {
        flex-direction: column;
        gap: 8px;
    }

    .quest-actions button {
        width: 100%;
        min-height: 44px;
        font-size: 13px;
    }

    /* ==========================================
       EMPIRE TAB - Mobile Optimized
       ========================================== */

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

    .contract-board-section {
        flex: none;
        max-height: none;
        padding: var(--spacing-sm);
    }

    #panel-empire .contract-board-section::before {
        font-size: 9px;
        letter-spacing: 2px;
    }

    .contract-detail-section.mobile-hidden {
        display: none !important;
    }

    .contract-detail-section.mobile-visible {
        display: flex !important;
        flex-direction: column !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        z-index: 9999 !important;
        background: var(--bg-darkest) !important;
        padding: var(--spacing-md) !important;
        padding-top: 60px !important;
        overflow-y: auto !important;
    }

    .contract-detail-section.mobile-visible .mobile-back-btn {
        display: flex !important;
        position: fixed;
        top: 10px;
        left: 10px;
        z-index: 10000;
    }

    .contract-item {
        padding: 12px;
        min-height: 48px;
    }

    .contract-item-name {
        font-size: 12px;
    }

    .contract-item-progress {
        font-size: 11px;
    }

    .contract-detail-header {
        flex-direction: column;
        gap: 8px;
        align-items: flex-start;
    }

    .contract-detail-title {
        font-size: 14px;
    }

    .contract-actions {
        flex-direction: column;
        gap: 8px;
    }

    .contract-actions button {
        width: 100%;
        min-height: 44px;
        font-size: 13px;
    }

    /* ==========================================
       FACTION TAB - Mobile Optimized
       ========================================== */

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

    .faction-list-section {
        flex: none;
        max-height: none;
    }

    .faction-detail-section.mobile-hidden {
        display: none !important;
    }

    .faction-detail-section.mobile-visible {
        display: flex !important;
        flex-direction: column !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        z-index: 9999 !important;
        background: var(--bg-darkest) !important;
        padding: var(--spacing-md) !important;
        padding-top: 60px !important;
        overflow-y: auto !important;
    }

    .faction-detail-section.mobile-visible .mobile-back-btn {
        display: flex !important;
        position: fixed;
        top: 10px;
        left: 10px;
        z-index: 10000;
    }

    .faction-project-item {
        padding: 12px;
        min-height: 48px;
    }

    .faction-detail-header {
        flex-direction: column;
        gap: 8px;
        align-items: flex-start;
    }

    .faction-detail-title {
        font-size: 14px;
    }

    .faction-task-item {
        padding: 10px;
        min-height: 44px;
    }

    /* ==========================================
       DAILIES TAB - Mobile Optimized
       ========================================== */

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

    .dailies-list-panel,
    .dailies-info-panel {
        flex: none;
        width: 100%;
    }

    .dailies-list-panel .panel-header {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
    }

    .dailies-reset-timer {
        font-size: 10px;
    }

    .daily-task-item {
        padding: 12px;
        min-height: 48px;
    }

    .daily-task-name {
        font-size: 12px;
    }

    .daily-task-reward {
        font-size: 11px;
    }

    .dailies-section {
        padding: var(--spacing-sm);
    }

    .dailies-section-header {
        font-size: 11px;
    }

    .buff-item,
    .streak-item,
    .milestone-item {
        padding: 8px;
        min-height: 40px;
    }

    /* ==========================================
       STATS TAB - Mobile Optimized
       ========================================== */

    .stats-layout {
        gap: var(--spacing-md);
    }

    .stats-summary {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-sm);
    }

    .stats-card {
        padding: var(--spacing-sm);
    }

    .stats-card-value {
        font-size: 24px;
    }

    .stats-card-label {
        font-size: 10px;
    }

    .stats-graph-header span {
        font-size: 10px;
    }

    .stats-graph-container {
        padding: var(--spacing-sm);
    }

    .stats-graph {
        height: 120px;
    }

    .stats-best-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-sm);
    }

    .stats-best-item {
        padding: var(--spacing-sm);
    }

    .stats-best-label {
        font-size: 10px;
    }

    .stats-best-value {
        font-size: 14px;
    }

    /* ==========================================
       SHOP TAB - Mobile Optimized
       ========================================== */

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

    .shop-caps-bar {
        flex-direction: column;
        gap: var(--spacing-xs);
        align-items: flex-start;
    }

    .earn-btn {
        padding: 12px;
        min-height: 48px;
    }

    /* ==========================================
       JOURNAL TAB - Mobile Optimized
       ========================================== */

    .journal-layout {
        grid-template-columns: 1fr;
        overflow: visible;
    }

    .journal-index {
        overflow: visible;
    }

    .journal-date-list {
        max-height: none;
        overflow: visible;
    }

    .quick-notes-list {
        overflow: visible;
    }

    .journal-reader {
        overflow: visible;
    }

    .journal-content {
        font-size: 13px;
        line-height: 1.6;
    }

    .journal-analysis {
        font-size: 12px;
        padding: var(--spacing-sm);
    }

    .journal-tags {
        gap: 6px;
        flex-wrap: wrap;
    }

    .journal-tag {
        font-size: 10px;
        padding: 4px 8px;
    }

    /* ==========================================
       ACTIVITY TAB - Mobile Optimized
       ========================================== */

    .activity-filters {
        padding: 0 var(--spacing-sm) var(--spacing-sm);
        gap: 4px;
    }

    .activity-filter {
        font-size: 10px;
        padding: 3px 8px;
    }

    .activity-feed {
        padding: 0 var(--spacing-sm);
    }

    .activity-event-time {
        font-size: 10px;
        min-width: 36px;
    }

    .activity-event-text {
        font-size: 12px;
    }

    .activity-amount {
        font-size: 11px;
        min-width: 40px;
    }

    /* ==========================================
       NOTIFICATION - Mobile Optimized
       ========================================== */

    .fallout-notification {
        font-size: 14px;
        padding: 12px 20px;
        max-width: 90vw;
    }
}

/* Very Small Phones (max-width: 380px) */
@media (max-width: 380px) {
    .nav-tab {
        font-size: 10px;
        padding: 6px 10px;
        letter-spacing: 0.5px;
    }

    .currency-label {
        font-size: 10px;
    }

    .currency-value {
        font-size: 12px;
    }

    .party-avatar-large {
        width: 50px;
        height: 50px;
    }

    .party-avatar-small {
        width: 35px;
        height: 35px;
    }

    .daily-value {
        font-size: 16px;
    }

    .objective-name {
        font-size: 13px;
    }

    .stats-card-value {
        font-size: 20px;
    }
}

/* Safe Area Insets for Modern Phones (notch, home indicator) */
@supports (padding: max(0px)) {
    @media (max-width: 600px) {
        .top-nav {
            padding-top: max(8px, env(safe-area-inset-top));
            padding-left: max(8px, env(safe-area-inset-left));
            padding-right: max(8px, env(safe-area-inset-right));
        }

        .status-bar {
            padding-bottom: max(6px, env(safe-area-inset-bottom));
            padding-left: max(10px, env(safe-area-inset-left));
            padding-right: max(10px, env(safe-area-inset-right));
        }

        .quest-detail-section.mobile-visible,
        .contract-detail-section.mobile-visible,
        .faction-detail-section.mobile-visible {
            padding-top: max(var(--spacing-md), env(safe-area-inset-top));
            padding-bottom: max(var(--spacing-md), env(safe-area-inset-bottom));
            padding-left: max(var(--spacing-md), env(safe-area-inset-left));
            padding-right: max(var(--spacing-md), env(safe-area-inset-right));
        }
    }
}

/* Touch Feedback */
@media (hover: none) and (pointer: coarse) {
    .nav-tab:active,
    .quest-item:active,
    .contract-item:active,
    .faction-project-item:active,
    .daily-task-item:active,
    .earn-btn:active,
    .player-quest-item:active,
    .player-contract-item:active,
    .player-faction-item:active {
        transform: scale(0.98);
        opacity: 0.8;
    }

    /* Remove hover effects on touch devices */
    .nav-tab:hover,
    .quest-item:hover,
    .contract-item:hover {
        background: inherit;
        border-color: inherit;
        box-shadow: none;
    }

    /* Ensure selected states still work */
    .nav-tab.active,
    .quest-item.selected,
    .contract-item.selected {
        background: var(--bg-light);
        border-color: var(--pip-green);
    }
}

/* Landscape Mode on Mobile */
@media (max-width: 900px) and (orientation: landscape) {
    .top-nav {
        flex-direction: row;
        padding: 4px 8px;
    }

    .nav-tabs {
        flex: 1;
    }

    .nav-tab {
        padding: 6px 10px;
        font-size: 10px;
    }

    .nav-stats {
        flex: none;
        width: auto;
    }

    .main-content {
        padding: var(--spacing-sm);
    }

    .player-dashboard-new {
        grid-template-columns: 200px 1fr;
        grid-template-rows: 1fr;
    }

    .party-panel {
        flex-direction: column;
    }

    .party-members {
        flex-direction: column;
    }

    .quest-detail-section.mobile-visible,
    .contract-detail-section.mobile-visible,
    .faction-detail-section.mobile-visible {
        padding: var(--spacing-sm);
    }
}

/* Print Styles - Hide interactive elements */
/* ============================================
   WORKOUT TAB
   ============================================ */

.workout-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: var(--spacing-md);
    height: calc(100vh - 130px);
}

.workout-schedule {
    overflow-y: auto;
    padding-right: var(--spacing-sm);
}

.workout-week-label {
    font-family: 'Share Tech Mono', monospace;
    font-size: 11px;
    color: var(--text-dim);
}

/* Day Cards */
.workout-day-card {
    display: grid;
    grid-template-columns: 40px 1fr auto;
    grid-template-rows: auto auto;
    align-items: center;
    gap: 0 var(--spacing-sm);
    padding: 10px 12px;
    margin-bottom: 4px;
    background: var(--bg-medium);
    border: 1px solid var(--border-subtle);
    border-left: 3px solid var(--day-color, var(--pip-green));
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.workout-day-card:hover {
    background: var(--bg-light);
    border-color: var(--day-color, var(--pip-green));
}

.workout-day-card.selected {
    background: var(--bg-light);
    border-color: var(--day-color, var(--pip-green));
    box-shadow: inset 0 0 12px rgba(48, 255, 80, 0.05);
}

.workout-day-card.today {
    position: relative;
}

.workout-day-card.rest {
    opacity: 0.5;
    cursor: default;
    border-left-color: #444;
}

.workout-day-label {
    grid-row: 1 / 3;
    font-family: 'Share Tech Mono', monospace;
    font-size: 11px;
    color: var(--day-color, var(--text-dim));
    font-weight: 700;
}

.workout-day-name {
    font-family: 'Rajdhani', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-bright);
}

.workout-day-sub {
    grid-column: 2;
    font-size: 11px;
    color: var(--text-dim);
}

.workout-today-badge {
    grid-row: 1 / 3;
    font-family: 'Share Tech Mono', monospace;
    font-size: 9px;
    color: var(--pip-green);
    background: rgba(48, 255, 80, 0.1);
    border: 1px solid rgba(48, 255, 80, 0.3);
    padding: 2px 6px;
    border-radius: 3px;
}

/* Meal Cards */
.meal-day-card {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: 8px 12px;
    margin-bottom: 4px;
    background: var(--bg-medium);
    border: 1px solid var(--border-subtle);
    border-left: 3px solid var(--pip-amber-dark);
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.meal-day-card:hover {
    background: var(--bg-light);
    border-color: var(--pip-amber);
}

.meal-day-card.selected {
    background: var(--bg-light);
    border-color: var(--pip-amber);
}

.meal-day-card.today {
    position: relative;
}

.meal-day-label {
    font-family: 'Share Tech Mono', monospace;
    font-size: 11px;
    color: var(--pip-amber-muted);
    font-weight: 700;
    width: 32px;
}

.meal-day-summary {
    font-family: 'Rajdhani', sans-serif;
    font-size: 12px;
    color: var(--text-normal);
}

/* Principles Box */
.workout-principles {
    margin-top: 16px;
    padding: 12px;
    background: var(--bg-medium);
    border: 1px solid var(--border-subtle);
    border-radius: var(--border-radius);
}

.principles-title {
    font-family: 'Share Tech Mono', monospace;
    font-size: 11px;
    color: var(--pip-green);
    margin-bottom: 8px;
    letter-spacing: 1px;
}

.principles-list {
    list-style: none;
    padding: 0;
}

.principles-list li {
    font-size: 11px;
    color: var(--text-dim);
    padding: 3px 0;
    padding-left: 12px;
    position: relative;
}

.principles-list li::before {
    content: '>';
    position: absolute;
    left: 0;
    color: var(--pip-green-dark);
    font-family: 'Share Tech Mono', monospace;
}

/* Workout Detail */
.workout-detail {
    overflow-y: auto;
    padding: 0 var(--spacing-sm);
}

.workout-no-selection {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 300px;
    color: var(--text-dark);
}

.workout-no-selection .empty-icon {
    font-size: 48px;
    margin-bottom: 12px;
    opacity: 0.3;
}

.workout-detail-header {
    padding: 16px;
    margin-bottom: 16px;
    background: var(--bg-medium);
    border: 1px solid var(--border-subtle);
    border-left: 4px solid var(--day-color, var(--pip-green));
    border-radius: var(--border-radius);
}

.workout-detail-title {
    font-family: 'Share Tech Mono', monospace;
    font-size: 18px;
    color: var(--day-color, var(--text-bright));
    letter-spacing: 1px;
}

.workout-detail-sub {
    font-family: 'Rajdhani', sans-serif;
    font-size: 13px;
    color: var(--text-dim);
}

/* Exercise List */
.workout-exercises {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.workout-exercise {
    display: grid;
    grid-template-columns: 28px 1fr auto;
    align-items: center;
    gap: var(--spacing-sm);
    padding: 10px 12px;
    background: var(--bg-medium);
    border: 1px solid var(--border-subtle);
    border-radius: var(--border-radius);
    transition: background 0.15s;
}

.workout-exercise:hover {
    background: var(--bg-light);
}

.exercise-num {
    font-family: 'Share Tech Mono', monospace;
    font-size: 14px;
    color: var(--pip-green-dark);
    text-align: center;
    font-weight: 700;
}

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

.exercise-name {
    font-family: 'Rajdhani', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-bright);
}

.exercise-note {
    font-size: 12px;
    color: var(--text-normal);
    line-height: 1.5;
    margin-top: 4px;
}

.exercise-sets {
    font-family: 'Share Tech Mono', monospace;
    font-size: 12px;
    color: var(--pip-green);
    white-space: nowrap;
    padding: 4px 8px;
    background: rgba(48, 255, 80, 0.06);
    border: 1px solid rgba(48, 255, 80, 0.15);
    border-radius: 3px;
    align-self: start;
    margin-top: 2px;
}

.workout-footer-note {
    margin-top: 16px;
    padding: 12px;
    background: var(--bg-medium);
    border: 1px solid var(--border-subtle);
    border-radius: var(--border-radius);
    font-size: 11px;
    color: var(--text-dim);
    line-height: 1.5;
}

/* Meal Detail */
.meal-detail-cards {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.meal-card {
    padding: 16px;
    background: var(--bg-medium);
    border: 1px solid var(--border-subtle);
    border-radius: var(--border-radius);
}

.meal-card.breakfast {
    border-left: 3px solid var(--pip-amber);
}

.meal-card.lunch {
    border-left: 3px solid var(--pip-green);
}

.meal-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.meal-type-label {
    font-family: 'Share Tech Mono', monospace;
    font-size: 11px;
    color: var(--pip-amber);
    letter-spacing: 1px;
}

.meal-card.lunch .meal-type-label {
    color: var(--pip-green);
}

.meal-macros {
    font-family: 'Share Tech Mono', monospace;
    font-size: 10px;
    color: var(--text-dim);
    padding: 2px 8px;
    background: rgba(255, 176, 48, 0.08);
    border: 1px solid rgba(255, 176, 48, 0.2);
    border-radius: 3px;
}

.meal-card.lunch .meal-macros {
    background: rgba(48, 255, 80, 0.06);
    border-color: rgba(48, 255, 80, 0.15);
}

.meal-name {
    font-family: 'Rajdhani', sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-bright);
    margin-bottom: 4px;
}

.meal-items {
    font-size: 13px;
    color: var(--text-normal);
    line-height: 1.5;
}

.meal-optional {
    font-size: 12px;
    color: var(--text-dim);
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--border-subtle);
    font-style: italic;
}

.meal-why-box {
    margin-top: 16px;
    padding: 14px;
    background: rgba(255, 176, 48, 0.06);
    border: 1px solid rgba(255, 176, 48, 0.2);
    border-radius: var(--border-radius);
}

.meal-why-label {
    font-family: 'Share Tech Mono', monospace;
    font-size: 11px;
    color: var(--pip-amber);
    letter-spacing: 1px;
    display: block;
    margin-bottom: 8px;
}

.meal-why-text {
    font-size: 13px;
    color: var(--text-normal);
    line-height: 1.6;
}

.meal-daily-totals {
    margin-top: 16px;
    padding: 12px;
    background: rgba(255, 176, 48, 0.06);
    border: 1px solid rgba(255, 176, 48, 0.2);
    border-radius: var(--border-radius);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.totals-label {
    font-family: 'Share Tech Mono', monospace;
    font-size: 10px;
    color: var(--pip-amber-muted);
    letter-spacing: 1px;
}

.totals-value {
    font-family: 'Share Tech Mono', monospace;
    font-size: 12px;
    color: var(--pip-amber);
}

/* Workout Complete Button */
.workout-complete-section {
    margin-top: 12px;
}
.workout-complete-btn {
    width: 100%;
    padding: 12px;
    background: transparent;
    border: 2px solid var(--accent-main);
    color: var(--accent-main);
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1px;
    cursor: pointer;
    border-radius: var(--border-radius);
    transition: all 0.2s;
}
.workout-complete-btn:hover:not(.completed) {
    background: var(--accent-main);
    color: var(--bg-dark);
}
.workout-complete-btn.completed {
    border-color: var(--accent-secondary);
    color: var(--accent-secondary);
    cursor: default;
    opacity: 0.8;
}

/* Responsive */
@media (max-width: 900px) {
    .workout-layout {
        grid-template-columns: 1fr;
        height: auto;
    }

    .workout-schedule {
        max-height: 300px;
    }
}

@media print {
    .top-nav,
    .status-bar,
    .quest-actions,
    .contract-actions,
    .mobile-back-btn,
    button {
        display: none !important;
    }

    .main-content {
        overflow: visible;
        height: auto;
    }

    .tab-panel {
        display: block !important;
        page-break-inside: avoid;
    }
}