/* Terminal UI Theme - Berkeley Mono Font */

@font-face {
    font-family: 'Berkeley Mono';
    src: url('../fonts/250901L8NX359W8L/TX-02-4J26KV9W/BerkeleyMono-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Berkeley Mono';
    src: url('../fonts/250901L8NX359W8L/TX-02-4J26KV9W/BerkeleyMono-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Berkeley Mono';
    src: url('../fonts/250901L8NX359W8L/TX-02-4J26KV9W/BerkeleyMono-Oblique.woff2') format('woff2');
    font-weight: 400;
    font-style: italic;
}

:root {
    /* Terminal Color Palette */
    --bg-primary: #0a0e14;
    --bg-secondary: #151922;
    --bg-tertiary: #1f2430;
    
    --fg-primary: #e6e1cf;
    --fg-secondary: #b8b4a3;
    --fg-tertiary: #707a8c;
    
    --accent-green: #8bd49c;
    --accent-blue: #59c2ff;
    --accent-yellow: #ffcb6b;
    --accent-red: #f07178;
    --accent-purple: #d4bfff;
    --accent-cyan: #95e6cb;
    
    --border-color: #2d3640;
    --shadow: rgba(0, 0, 0, 0.5);
    
    --char-width: 0.6em;
    
    /* Filter Design System */
    --filter-height: 36px;
    --filter-font-size: 0.85rem;
    --filter-padding-x: 0.8em;
    --filter-padding-y: 0.4em;
    --filter-gap: 0.5em;
}

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

body {
    font-family: 'Berkeley Mono', 'Courier New', monospace;
    font-size: 14px;
    line-height: 1.6;
    color: var(--fg-primary);
    background: var(--bg-primary);
    overflow-x: hidden;
    position: relative;
}

/* Background Hero Text Decoration */
.bg-hero-decoration {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    opacity: 0.03;
    overflow: hidden;
}

.bg-hero-title {
    position: absolute;
    top: 15%;
    left: 5%;
    font-size: 18vw;
    font-weight: 800;
    color: var(--accent-cyan);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    line-height: 0.9;
    transform: rotate(-5deg);
    white-space: nowrap;
    font-family: 'Berkeley Mono', monospace;
}

.bg-hero-subtitle {
    position: absolute;
    top: 35%;
    right: 8%;
    font-size: 4vw;
    font-weight: 500;
    color: var(--accent-purple);
    letter-spacing: 0.05em;
    transform: rotate(3deg);
    white-space: nowrap;
    font-family: 'Berkeley Mono', monospace;
    max-width: 40vw;
}

/* Ensure content sits above background */
main.container,
.terminal-header,
footer.footer {
    position: relative;
    z-index: 1;
}

/* ASCII Box Drawing */
.box {
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    position: relative;
}

.box::before {
    content: attr(data-title);
    position: absolute;
    top: -0.5em;
    left: 1em;
    background: var(--bg-secondary);
    padding: 0 0.5em;
    color: var(--accent-cyan);
    font-weight: 700;
}

.box-content {
    padding: 1.5em;
}

/* Terminal Header - Chromatic Status Bar */
.terminal-header {
    background: var(--bg-primary);
    border-bottom: none;
    padding: 0;
    position: sticky;
    top: 0;
    z-index: 100;
}

.header-statusbar {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    font-family: 'Berkeley Mono', monospace;
    font-size: 0.9em;
    font-weight: 700;
    letter-spacing: 0.05em;
    line-height: 1;
}

.header-statusbar .status-block {
    padding: 1.2em 1.5em; /* Thicker header */
    transition: all 0.2s ease;
    font-weight: 800;
    position: relative;
}

/* Hard Brutalist Button Style - Mechanical & Tactile */
.header-statusbar a.status-block {
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    position: relative;
    /* Hard black shadow offset - no blur, pure brutalist */
    box-shadow: 4px 4px 0 0 #000000;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    border: 2px solid #000000; /* Hard black border for definition */
}

.header-statusbar a.status-block:hover {
    /* Button shifts down to cover shadow - mechanical press */
    transform: translate(4px, 4px);
    box-shadow: 0 0 0 0 #000000; /* Shadow disappears as button covers it */
    filter: brightness(1.1); /* Slight glow on hover */
}

.header-statusbar a.status-block:active {
    /* Pressed state - fully down */
    transform: translate(4px, 4px);
    box-shadow: 0 0 0 0 #000000;
    filter: brightness(0.95); /* Slightly dimmed when pressed */
}

/* Static spans in header remain flat */
.header-statusbar span.status-block {
    cursor: default;
}

/* Legacy classes kept for compatibility */
.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2em;
}

.terminal-title {
    font-size: 1.2em;
    color: var(--accent-cyan);
    letter-spacing: 0.1em;
    margin: 0;
    font-weight: 700;
}

.header-nav {
    display: flex;
    gap: 1.5em;
    align-items: center;
}

.nav-link {
    color: var(--accent-blue);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95em;
    padding: 0.5em 1em;
    border: 1px solid var(--border-color);
    background: var(--bg-tertiary);
    transition: all 0.2s ease;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.nav-link:hover {
    color: var(--accent-cyan);
    border-color: var(--accent-cyan);
    background: var(--bg-secondary);
    box-shadow: 0 0 10px rgba(149, 230, 203, 0.3);
}

/* Breadcrumb */
.breadcrumb {
    padding: 1em 2em;
    color: var(--fg-tertiary);
    font-size: 0.9em;
}

.breadcrumb-sep {
    color: var(--accent-blue);
    margin: 0 0.5em;
}

.breadcrumb-link {
    color: var(--accent-blue);
    text-decoration: none;
    cursor: pointer;
}

.breadcrumb-link:hover {
    color: var(--accent-yellow);
    text-decoration: underline;
}

/* Container */
.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 2em;
}

/* Grid Layout */
.grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2em;
}

.grid-1 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2em;
}

/* Poster Wall Grid (Landing Page) */
.poster-wall {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 2em;
    margin: 2em 0;
}

/* Poster Card - Improved Design with Dynamic Colors */
.poster-card {
    --accent-color: var(--accent-cyan, #95e6cb); /* Fallback to cyan */
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-bottom-width: 3px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    /* CRT/Noise Texture Background - uses accent color */
    background-image: 
        repeating-linear-gradient(
            0deg,
            color-mix(in srgb, var(--accent-color) 2%, transparent) 0px,
            transparent 1px,
            transparent 2px,
            color-mix(in srgb, var(--accent-color) 2%, transparent) 3px
        );
}

/* Archive Card - Special styling */
.poster-card.archive-trigger {
    --accent-color: #eab308; /* Yellow accent for archive */
    border-bottom-color: #eab308;
}

/* Archive Card Art Background */
.archive-card-art {
    background: var(--bg-tertiary);
    position: relative;
    overflow: hidden;
}

.archive-card-art svg {
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 1;
}

.archive-card-art text {
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
    position: relative;
    z-index: 2;
}

/* Archived events - hidden by default (JS will control visibility) */
.poster-card.is-archived {
    /* Visibility controlled by JavaScript */
}

.poster-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 20% 50%, color-mix(in srgb, var(--accent-color) 3%, transparent) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, color-mix(in srgb, var(--accent-color) 3%, transparent) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
}

.poster-card:hover {
    transform: translateY(-4px);
    border-color: var(--accent-color);
    border-width: 2px;
    border-bottom-width: 3px;
    box-shadow: 8px 8px 0 var(--shadow), 0 0 40px color-mix(in srgb, var(--accent-color) 30%, transparent);
    z-index: 10;
}

/* Fallback for browsers without color-mix support */
@supports not (color-mix(in srgb, red, transparent)) {
    .poster-card {
        background-image: 
            repeating-linear-gradient(
                0deg,
                rgba(149, 230, 203, 0.02) 0px,
                transparent 1px,
                transparent 2px,
                rgba(149, 230, 203, 0.02) 3px
            );
    }
    
    .poster-card::before {
        background: 
            radial-gradient(circle at 20% 50%, rgba(149, 230, 203, 0.03) 0%, transparent 50%),
            radial-gradient(circle at 80% 80%, rgba(89, 194, 255, 0.03) 0%, transparent 50%);
    }
    
    .poster-card:hover {
        box-shadow: 8px 8px 0 var(--shadow), 0 0 20px rgba(149, 230, 203, 0.3);
    }
}

/* Poster Image Container - Unified 2:3 Aspect Ratio */
.poster-image-container {
    width: 100%;
    aspect-ratio: 2 / 3;
    overflow: hidden;
    background: var(--bg-tertiary);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    /* Recessed shadow effect with accent color hint */
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.3), inset 0 0 20px color-mix(in srgb, var(--accent-color) 5%, transparent);
}

@supports not (color-mix(in srgb, red, transparent)) {
    .poster-image-container {
        box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.3);
    }
}

.poster-image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    display: block;
}

.poster-card:hover .poster-image-container img {
    transform: scale(1.05);
}

/* Date Badge - Calendar Page Style */
.poster-date-badge {
    position: absolute;
    top: 1em;
    left: 1em;
    background: var(--bg-primary);
    border: 2px solid var(--accent-color);
    padding: 0.5em 0.75em;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 2;
    box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.3), 0 0 10px color-mix(in srgb, var(--accent-color) 40%, transparent);
}

.date-badge-day {
    font-family: 'Berkeley Mono', monospace;
    font-size: 1.5em;
    font-weight: 700;
    color: var(--accent-color);
    line-height: 1;
    text-shadow: 0 0 8px color-mix(in srgb, var(--accent-color) 50%, transparent);
}

.date-badge-month {
    font-family: 'Berkeley Mono', monospace;
    font-size: 0.7em;
    font-weight: 600;
    color: var(--fg-secondary);
    letter-spacing: 0.1em;
    margin-top: 0.2em;
}

.poster-date-badge-tba .date-badge-text {
    font-family: 'Berkeley Mono', monospace;
    font-size: 0.85em;
    font-weight: 700;
    color: var(--fg-tertiary);
    letter-spacing: 0.1em;
}

/* Hover Overlay - Call to Action Only */
.poster-card-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, var(--bg-primary) 85%, transparent 100%);
    padding: 1.5em;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
}

.poster-card:hover .poster-card-overlay {
    opacity: 1;
}

.poster-overlay-cta {
    background: var(--bg-primary);
    color: var(--accent-color);
    border: 2px solid var(--accent-color);
    padding: 0.6em 1.5em;
    font-family: 'Berkeley Mono', monospace;
    font-size: 0.85em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.3), 0 0 15px color-mix(in srgb, var(--accent-color) 50%, transparent);
}

.poster-overlay-cta:hover {
    background: var(--accent-color);
    color: var(--bg-primary);
    transform: translate(2px, 2px);
    box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.3), 0 0 25px color-mix(in srgb, var(--accent-color) 70%, transparent);
}

/* Empty State - SVG Pattern */
.poster-empty-state {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-tertiary);
}

.poster-empty-svg {
    width: 100%;
    height: 100%;
    opacity: 0.5;
}

/* Event Info Section */
.poster-card-info {
    padding: 1.5em;
    padding-bottom: 1.25em; /* Ensure enough bottom padding for tags */
    border-top: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    position: relative;
    z-index: 1;
    overflow: visible; /* Allow tags to render fully */
    /* Atmospheric glow background using accent color */
    background: linear-gradient(to bottom, color-mix(in srgb, var(--accent-color) 5%, transparent) 0%, transparent 40%);
}

@supports not (color-mix(in srgb, red, transparent)) {
    .poster-card-info {
        background: linear-gradient(to bottom, rgba(149, 230, 203, 0.05) 0%, transparent 40%);
    }
}

/* Typography - Refined with Dynamic Color */
.poster-card-title {
    font-family: 'Berkeley Mono', monospace;
    font-size: 1.2em;
    font-weight: 700;
    color: var(--accent-color);
    text-transform: uppercase;
    margin-bottom: 0.75em;
    line-height: 1.3;
    letter-spacing: 0.03em;
    /* Clamp to 2 lines */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 2.6em;
    text-shadow: 0 0 10px color-mix(in srgb, var(--accent-color) 30%, transparent);
    transition: text-shadow 0.3s ease;
}

.poster-card:hover .poster-card-title {
    text-shadow: 0 0 15px color-mix(in srgb, var(--accent-color) 50%, transparent);
}

@supports not (color-mix(in srgb, red, transparent)) {
    .poster-card-title {
        color: var(--accent-cyan);
        text-shadow: 0 0 10px rgba(149, 230, 203, 0.3);
    }
    
    .poster-card:hover .poster-card-title {
        text-shadow: 0 0 15px rgba(149, 230, 203, 0.5);
    }
}

/* Meta Grid - Standardized Layout - Strict 1-Line Policy */
.poster-meta-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5em;
    margin-bottom: 0.75em;
    color: var(--fg-tertiary);
    font-size: 0.9em;
}

.poster-meta-item {
    display: flex;
    align-items: center;
    gap: 0.5em;
    min-width: 0; /* Allows flex children to shrink below content size */
    overflow: hidden; /* Prevent wrapping */
    white-space: nowrap; /* Enforce single line for entire meta item */
    height: 1.5em; /* Fixed height to ensure consistency */
}

.poster-meta-location {
    /* Ensure venue/city line never wraps */
    flex-wrap: nowrap;
    overflow: hidden;
}

.poster-status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 0 8px currentColor;
    animation: pulse-glow 2s ease-in-out infinite;
}

@keyframes pulse-glow {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.7; transform: scale(1.1); }
}

.poster-meta-icon {
    color: var(--accent-green);
    flex-shrink: 0;
    opacity: 0.8;
}

.poster-meta-location .poster-meta-icon {
    color: var(--accent-color);
    opacity: 1;
    flex-shrink: 0;
}

.poster-meta-text {
    color: var(--fg-secondary);
    font-family: 'Berkeley Mono', monospace;
    font-size: 0.9em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0; /* Critical for ellipsis to work in flex */
    flex: 1 1 auto; /* Allow to shrink */
}

/* Venue Text - Bold and Colored - Strict 1-Line */
.venue-text {
    font-family: 'Berkeley Mono', monospace;
    font-weight: 700;
    font-size: 0.95em;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0; /* Critical for ellipsis in flex */
    flex: 1 1 auto; /* Allow to shrink, city badge takes priority */
    max-width: 100%; /* Prevent overflow */
}

/* City Badge - Terminal Tag Style - Never Wraps */
.city-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.2em 0.6em;
    margin-left: 0.5em;
    font-family: 'Berkeley Mono', monospace;
    font-size: 0.7em;
    font-weight: 800;
    letter-spacing: 0.05em;
    color: var(--bg-primary);
    border-radius: 3px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3), 0 0 8px color-mix(in srgb, currentColor 40%, transparent);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    animation: badge-pop 0.3s ease-out;
    flex-shrink: 0; /* Never shrink the city badge */
    white-space: nowrap; /* Ensure badge text never wraps */
}

@keyframes badge-pop {
    0% { transform: scale(0.9); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

/* Tag Row - Max 3 Tags, Pill Shaped - Strict 1-Line with Expand Option */
.poster-tag-row {
    display: flex;
    flex-wrap: nowrap; /* Changed from wrap to nowrap - enforce single line */
    gap: 0.4em;
    margin-top: auto;
    padding-top: 0.75em;
    padding-bottom: 0.25em; /* Add bottom padding to prevent clipping */
    overflow: visible; /* Changed from hidden to visible - allow tags to render fully */
    min-width: 0; /* Allow shrinking */
    min-height: 2.2em; /* Minimum height to accommodate tag height + padding */
    align-items: center; /* Vertically center tags */
}

.tag-pill {
    font-size: 0.7em !important;
    padding: 0.4em 0.8em !important; /* Increased padding for better visibility */
    border-radius: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.4; /* Ensure proper line height */
    white-space: nowrap; /* Prevent tag text from wrapping */
    flex-shrink: 1; /* Allow tags to shrink if needed */
    min-width: 0; /* Critical for ellipsis */
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-flex; /* Better alignment */
    align-items: center; /* Vertically center text within tag */
    height: fit-content; /* Let tag determine its own height */
    min-height: 1.8em; /* Minimum height to prevent clipping */
}

/* Tag expand indicator - shows when tags are truncated */
.tag-expand-indicator {
    font-size: 0.7em !important;
    padding: 0.3em 0.7em !important;
    border-radius: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    color: var(--fg-secondary);
    cursor: pointer;
    flex-shrink: 0; /* Never shrink the expand indicator */
    white-space: nowrap;
    transition: all 0.2s ease;
}

.tag-expand-indicator:hover {
    background: var(--bg-secondary);
    border-color: var(--accent-cyan);
    color: var(--accent-cyan);
}

/* Legacy support - keep old classes working */
.poster-card-image {
    width: 100%;
    aspect-ratio: 2 / 3;
    overflow: hidden;
    background: var(--bg-tertiary);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.3);
}

.poster-card-meta {
    color: var(--fg-tertiary);
    font-size: 0.9em;
    margin: 0.5em 0;
}

.poster-card-meta-item {
    display: flex;
    gap: 0.5em;
    margin: 0.3em 0;
}

.poster-card-meta-label {
    color: var(--accent-green);
    min-width: 4em;
}

.poster-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em;
    margin-top: 1em;
}

/* Event Header */
.event-header-box {
    background: var(--bg-secondary);
    border: 2px solid var(--accent-cyan);
    padding: 2em;
    margin-bottom: 2em;
}

.event-title-large {
    font-size: 2.5em;
    font-weight: 700;
    color: var(--accent-yellow);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.5em;
    text-shadow: 2px 2px 0 var(--shadow);
}

.event-subtitle {
    color: var(--accent-purple);
    font-size: 1.1em;
    margin-bottom: 1em;
}

/* Info Table */
.info-table {
    width: 100%;
    border-collapse: collapse;
    margin: 1em 0;
}

.info-table td {
    padding: 0.75em 1em;
    border: 1px solid var(--border-color);
}

.info-table td:first-child {
    color: var(--accent-green);
    font-weight: 700;
    width: 30%;
    background: var(--bg-tertiary);
}

.info-table td:last-child {
    color: var(--fg-primary);
}

/* Tags */
.tag {
    display: inline-block;
    padding: 0.4em 1em;
    margin: 0.3em;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    color: var(--accent-yellow);
    font-size: 0.85em;
    font-weight: 700;
    transition: all 0.2s;
    cursor: pointer;
}

.tag:hover {
    background: var(--accent-yellow);
    color: var(--bg-primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px var(--shadow);
}

.tag-green {
    color: var(--accent-green);
    border-color: var(--accent-green);
}

.tag-green:hover {
    background: var(--accent-green);
    color: var(--bg-primary);
}

.tag-blue {
    color: var(--accent-blue);
    border-color: var(--accent-blue);
}

.tag-blue:hover {
    background: var(--accent-blue);
    color: var(--bg-primary);
}

.tag-purple {
    color: var(--accent-purple);
    border-color: var(--accent-purple);
}

.tag-purple:hover {
    background: var(--accent-purple);
    color: var(--bg-primary);
}

.tag-cyan {
    color: var(--accent-cyan);
    border-color: var(--accent-cyan);
}

.tag-cyan:hover {
    background: var(--accent-cyan);
    color: var(--bg-primary);
}

.tag-red {
    color: var(--accent-red);
    border-color: var(--accent-red);
}

.tag-red:hover {
    background: var(--accent-red);
    color: var(--bg-primary);
}

.tag-yellow {
    color: var(--accent-yellow);
    border-color: var(--accent-yellow);
}

.tag-yellow:hover {
    background: var(--accent-yellow);
    color: var(--bg-primary);
}

/* Event Type Badges (distinct styling with solid backgrounds) */
.tag-type-music {
    background: #8b5cf6;
    color: white;
    border-color: #8b5cf6;
}

.tag-type-art {
    background: #06b6d4;
    color: white;
    border-color: #06b6d4;
}

.tag-type-activism {
    background: #eab308;
    color: #1e293b;
    border-color: #eab308;
}

.tag-type-educational {
    background: #10b981;
    color: white;
    border-color: #10b981;
}

.tag-type-community {
    background: #f97316;
    color: white;
    border-color: #f97316;
}

.tag-type-general {
    background: #64748b;
    color: white;
    border-color: #64748b;
}

.tag-type-market {
    background: #f59e0b;
    color: white;
    border-color: #f59e0b;
}

/* Confidence Badges */
.confidence-badge {
    font-size: 0.75em;
    padding: 0.35em 0.7em;
    border-radius: 4px;
    font-weight: 600;
    letter-spacing: 0.05em;
}

.confidence-high {
    background-color: #10b981;
    color: white;
}

.confidence-medium {
    background-color: #eab308;
    color: #1e293b;
}

.confidence-low {
    background-color: #ef4444;
    color: white;
}

/* Tag Container */
.tag-container {
    margin: 1em 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.3em;
}

/* FFO Tags (integrated in artist header) */

/* Button */
.btn {
    display: inline-block;
    padding: 0.8em 2em;
    background: var(--bg-tertiary);
    color: var(--accent-cyan);
    border: 2px solid var(--accent-cyan);
    text-decoration: none;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    cursor: pointer;
    transition: all 0.2s;
    font-family: 'Berkeley Mono', monospace;
    font-size: 1em;
}

.btn:hover {
    background: var(--accent-cyan);
    color: var(--bg-primary);
    box-shadow: 0 0 20px var(--accent-cyan);
}

.btn::before {
    content: '▶ ';
}

/* Artist Card */
.artist-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    padding: 2em;
    margin-bottom: 2em;
}

.artist-header {
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 1.5em;
    margin-bottom: 1.5em;
}

.artist-name {
    font-size: 1.8em;
    font-weight: 700;
    color: var(--accent-cyan);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.artist-genre {
    color: var(--accent-purple);
    font-style: italic;
    margin-top: 0.3em;
}

.artist-bio {
    color: var(--fg-secondary);
    line-height: 1.8;
    margin: 1em 0;
}

/* Social Links */
.social-links {
    display: flex;
    flex-direction: row;
    gap: 0.75em;
    margin: 0;
    flex-wrap: wrap;
}

.social-link {
    padding: 0.6em 1.2em;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    color: var(--accent-blue);
    text-decoration: none;
    font-size: 0.85em;
    transition: all 0.2s;
    white-space: nowrap;
    text-align: center;
}

.social-link:hover {
    background: var(--accent-blue);
    color: var(--bg-primary);
    border-color: var(--accent-blue);
}

/* List */
.list-styled {
    list-style: none;
    margin: 1em 0;
}

.list-styled li {
    padding: 0.5em 0;
    color: var(--fg-secondary);
    position: relative;
    padding-left: 1.5em;
}

.list-styled li::before {
    content: '→';
    position: absolute;
    left: 0;
    color: var(--accent-green);
}

/* Separator */
.separator {
    height: 2px;
    background: var(--border-color);
    margin: 2em 0;
    position: relative;
}

.separator::before {
    content: '◆';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: var(--bg-primary);
    padding: 0 1em;
    color: var(--accent-cyan);
}

/* Section Header */
.section-header {
    font-size: 1.5em;
    font-weight: 700;
    color: var(--accent-yellow);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 1.5em;
    padding-bottom: 0.5em;
    border-bottom: 2px solid var(--accent-yellow);
}

.section-header::before {
    content: '▓▓▓ ';
    color: var(--accent-cyan);
}

/* Poster Display */
.poster-box {
    background: var(--bg-secondary);
    border: 2px solid var(--border-color);
    padding: 2em;
    text-align: center;
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.poster-ascii {
    font-size: 3em;
    color: var(--accent-green);
    margin-bottom: 0.5em;
}

.poster-desc {
    color: var(--fg-tertiary);
    font-size: 0.9em;
}

/* Venue Box */
.venue-section {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    padding: 2em;
}

.venue-name {
    font-size: 1.8em;
    font-weight: 700;
    color: var(--accent-green);
    margin-bottom: 0.5em;
}

.rating {
    color: var(--accent-yellow);
    margin: 0.5em 0;
}

.rating::before {
    content: '[RATING] ';
    color: var(--fg-tertiary);
}

/* Map Embed */
.map-container {
    background: var(--bg-tertiary);
    border: 2px solid var(--border-color);
    padding: 1em;
    margin-top: 2em;
}

.map-embed {
    width: 100%;
    height: 400px;
    border: 1px solid var(--border-color);
}

/* Artist Content Row Layout */
.artist-content-row {
    display: flex;
    flex-direction: column;
    gap: 1.5em;
    margin-top: 2em;
}

.artist-links-section {
    width: 100%;
}

.artist-spotify-section {
    width: 100%;
}

/* Spotify Embed - Compact Version */
.spotify-container-compact {
    margin: 0;
    padding: 0;
    background: var(--bg-primary);
    border: 2px solid var(--accent-cyan);
    position: relative;
    max-width: 600px;
}

/* Legacy Spotify Container (kept for compatibility) */
.spotify-container {
    margin: 2em 0;
    padding: 0;
    background: var(--bg-primary);
    border: 2px solid var(--accent-cyan);
    position: relative;
}

.spotify-header {
    background: var(--bg-secondary);
    padding: 0.8em 1em;
    border-bottom: 1px solid var(--accent-cyan);
    display: flex;
    align-items: center;
    gap: 0.5em;
}

.spotify-header::before {
    content: '♫';
    color: var(--accent-cyan);
    font-size: 1.2em;
}

.spotify-title {
    color: var(--accent-cyan);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.9em;
}

.spotify-embed-wrapper {
    padding: 1em;
    background: var(--bg-tertiary);
    position: relative;
}

.spotify-embed-wrapper::before {
    content: '┌─────────────────────────────────────────────────────────┐';
    position: absolute;
    top: 0.5em;
    left: 0.5em;
    color: var(--border-color);
    font-size: 0.7em;
    pointer-events: none;
    opacity: 0.3;
}

.spotify-embed-wrapper::after {
    content: '└─────────────────────────────────────────────────────────┘';
    position: absolute;
    bottom: 0.5em;
    left: 0.5em;
    color: var(--border-color);
    font-size: 0.7em;
    pointer-events: none;
    opacity: 0.3;
}

.spotify-container iframe {
    width: 100%;
    border: 2px solid var(--border-color);
    border-radius: 0;
    filter: saturate(0.8) contrast(1.1);
}

.spotify-footer {
    background: var(--bg-secondary);
    padding: 0.6em 1em;
    border-top: 1px solid var(--border-color);
    font-size: 0.8em;
    color: var(--fg-tertiary);
    text-align: center;
}

.spotify-footer::before {
    content: '🎵 ';
}

.spotify-status {
    color: var(--accent-green);
}

.spotify-status::before {
    content: '● ';
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

/* Footer */
.footer {
    background: var(--bg-secondary);
    border-top: 2px solid var(--accent-cyan);
    padding: 0; /* Remove padding to let status bar fill */
    text-align: center;
    color: var(--fg-tertiary);
    margin-top: 4em;
}

.footer-statusbar {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    font-family: 'Berkeley Mono', monospace;
    font-size: 0.85em;
    font-weight: 700;
    letter-spacing: 0.05em;
    line-height: 1;
}

.status-block {
    padding: 0.8em 1.2em;
    color: #000000 !important; /* Pure black - override inline styles */
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-grow: 1; /* Distribute space */
    min-width: max-content;
    font-weight: 900; /* Extra bold for maximum visibility */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); /* Stronger shadow for depth */
}

/* Footer blocks remain flat/informational (no button effects) */
.footer-statusbar .status-block {
    border-top: none;
    border-bottom: none;
    box-shadow: none;
    cursor: default;
}

.footer-statusbar .status-block:hover {
    transform: none;
    filter: brightness(1.05); /* Subtle hover only */
    box-shadow: none;
}

/* Complementary color pairs for maximum contrast */
.block-yellow { 
    background: var(--accent-yellow); 
    color: #000000 !important; /* Pure black - override inline styles */
    border-left: 2px solid #8b6914; /* Darker yellow border */
    border-right: 2px solid #8b6914;
    font-weight: 900;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.block-cyan { 
    background: var(--accent-cyan); 
    color: #000000 !important; /* Pure black - override inline styles */
    border-left: 2px solid #0d7377; /* Darker cyan border */
    border-right: 2px solid #0d7377;
    font-weight: 900;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.block-purple { 
    background: var(--accent-purple); 
    color: #000000 !important; /* Pure black - override inline styles */
    border-left: 2px solid #6d28d9; /* Darker purple border */
    border-right: 2px solid #6d28d9;
    font-weight: 900; /* Extra bold for readability */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); /* Subtle shadow for depth */
}
.block-green { 
    background: var(--accent-green); 
    color: #000000 !important; /* Pure black - override inline styles */
    border-left: 2px solid #047857; /* Darker green border */
    border-right: 2px solid #047857;
    font-weight: 900; /* Extra bold for readability */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.block-blue { 
    background: var(--accent-blue); 
    color: #000000 !important; /* Pure black - override inline styles */
    border-left: 2px solid #0369a1; /* Darker blue border */
    border-right: 2px solid #0369a1;
    font-weight: 900;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.block-red { 
    background: var(--accent-red); 
    color: #000000 !important; /* Pure black - override inline styles */
    border-left: 2px solid #991b1b; /* Darker red border */
    border-right: 2px solid #991b1b;
    font-weight: 900;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.block-dark { 
    background: var(--bg-tertiary); 
    color: var(--accent-cyan); /* Cyan text for better visibility */
    border-left: 2px solid var(--accent-cyan); /* Cyan border */
    border-right: 2px solid var(--accent-cyan); /* Cyan border */
    flex-grow: 0;
    font-weight: 700;
}

/* Adjacent spans to dark blocks get cyan border where they touch */
.status-block.block-dark + .status-block:not(.block-dark) {
    border-left: 2px solid var(--accent-cyan);
}

.status-block:not(.block-dark) + .status-block.block-dark {
    border-left: 2px solid var(--accent-cyan);
}

.status-block:hover {
    filter: brightness(1.1);
    cursor: default;
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-track {
    background: var(--bg-primary);
}

::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border: 2px solid var(--bg-primary);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--accent-cyan);
}

/* Responsive */
@media (max-width: 968px) {
    .header-content {
        padding: 0 1em;
    }
    
    .terminal-title {
        font-size: 1em;
    }
    
    .nav-link {
        font-size: 0.85em;
        padding: 0.4em 0.8em;
    }
    
    .header-statusbar .status-block {
        padding: 1em 1.2em; /* Still thicker than footer on mobile */
        font-size: 0.8em;
    }
    
    .bg-hero-title {
        font-size: 25vw;
        top: 10%;
    }
    
    .bg-hero-subtitle {
        font-size: 5vw;
        top: 40%;
    }
    
    .grid-2 {
        grid-template-columns: 1fr;
    }
    
    .poster-wall {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
        gap: 1.5em;
    }
    
    .poster-image-container,
    .poster-card-image {
        aspect-ratio: 2 / 3;
    }
    
    .poster-card-title {
        font-size: 1.1em;
        min-height: 2.4em;
    }
    
    .poster-date-badge {
        top: 0.75em;
        left: 0.75em;
        padding: 0.4em 0.6em;
    }
    
    .date-badge-day {
        font-size: 1.3em;
    }
    
    .event-title-large {
        font-size: 1.8em;
    }
    
    .container {
        padding: 1em;
    }
}

@media (max-width: 640px) {
    .poster-wall {
        grid-template-columns: 1fr;
        gap: 2em;
    }
    
    .poster-image-container,
    .poster-card-image {
        aspect-ratio: 2 / 3;
    }
    
    .poster-card-title {
        font-size: 1em;
        min-height: 2.2em;
    }
    
    .poster-meta-grid {
        font-size: 0.85em;
    }
}

/* Hover Effect for Text Animation */
.hover-effect {
    font-kerning: none;
    position: relative;
    cursor: pointer;
}

.hover-effect .word {
    display: inline-block;
}

.hover-effect .char {
    position: relative;
    display: inline-block;
}

/* Hover Group - triggers animation for all children */
.hover-group {
    cursor: pointer;
}

/* Animations */
@keyframes blink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}

.cursor-blink::after {
    content: '█';
    animation: blink 1s infinite;
    color: var(--accent-green);
}

/* Status Indicator */
.status-active {
    color: var(--accent-green);
}

.status-active::before {
    content: '● ';
}

/* Link Styling */
a {
    color: var(--accent-blue);
    text-decoration: none;
}

a:hover {
    color: var(--accent-cyan);
    text-decoration: underline;
}

/* About Page Styles */
.values-grid {
    display: grid;
    gap: 1.5em;
    margin-top: 1em;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.value-card {
    background: var(--bg-tertiary);
    border: 2px solid var(--border-color);
    padding: 2em;
    position: relative;
    transition: all 0.3s ease;
    overflow: hidden;
}

.value-card:hover {
    transform: translateY(-4px);
    border-color: var(--accent-cyan);
    box-shadow: 0 8px 16px rgba(149, 230, 203, 0.2);
}

.value-card[data-color="green"] {
    border-left: 4px solid var(--accent-green);
}

.value-card[data-color="blue"] {
    border-left: 4px solid var(--accent-blue);
}

.value-card[data-color="yellow"] {
    border-left: 4px solid var(--accent-yellow);
}

.value-card[data-color="purple"] {
    border-left: 4px solid var(--accent-purple);
}

.value-card[data-color="cyan"] {
    border-left: 4px solid var(--accent-cyan);
}

.value-icon {
    font-size: 2.5em;
    margin-bottom: 0.5em;
    display: block;
}

.value-title {
    font-size: 1.2em;
    font-weight: 700;
    color: var(--accent-cyan);
    margin-bottom: 0.8em;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.value-description {
    color: var(--fg-secondary);
    line-height: 1.7;
    font-size: 0.95em;
}

.value-glow {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at center, rgba(149, 230, 203, 0.1), transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.value-card:hover .value-glow {
    opacity: 1;
}

.portrait-container {
    position: relative;
    width: 100%;
    padding-top: 133.33%; /* 3:4 aspect ratio */
    overflow: hidden;
    border-radius: 8px;
    border: 2px solid var(--border-color);
}

.portrait-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
    transition: opacity 0.5s ease;
}

.portrait-serious {
    opacity: 1;
    z-index: 1;
}

.portrait-laughing {
    opacity: 0;
    z-index: 2;
}

.portrait-container:hover .portrait-serious {
    opacity: 0;
}

.portrait-container:hover .portrait-laughing {
    opacity: 1;
}

/* Contact Form Styles */
.contact-container {
    max-width: 800px;
    margin: 0 auto;
}

.contact-intro {
    text-align: center;
    margin-bottom: 3em;
}


.contact-form {
    display: flex;
    flex-direction: column;
    gap: 1.5em;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5em;
}

.form-label {
    color: var(--accent-cyan);
    font-weight: 600;
    font-size: 0.95em;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.form-input,
.form-textarea {
    background: var(--bg-tertiary);
    border: 2px solid var(--border-color);
    padding: 0.8em 1em;
    font-family: 'Berkeley Mono', monospace;
    font-size: 0.95em;
    transition: all 0.3s ease;
    outline: none;
}

.form-input:focus,
.form-textarea:focus {
    border-color: var(--accent-cyan);
    background: var(--bg-secondary);
    box-shadow: 0 0 0 3px rgba(149, 230, 203, 0.1);
}

.form-input::placeholder,
.form-textarea::placeholder {
    color: var(--fg-tertiary);
    opacity: 0.6;
}

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

.form-actions {
    display: flex;
    justify-content: center;
    margin-top: 1em;
}

.btn-submit {
    display: flex;
    align-items: center;
    gap: 0.8em;
    padding: 1em 2.5em;
    background: linear-gradient(135deg, var(--accent-cyan) 0%, var(--accent-blue) 100%);
    border: 2px solid var(--accent-cyan);
    color: var(--bg-primary);
    font-family: 'Berkeley Mono', monospace;
    font-weight: 700;
    font-size: 1em;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.btn-submit::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s ease;
}

.btn-submit:hover::before {
    left: 100%;
}

.btn-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(149, 230, 203, 0.4);
}

.btn-submit:active {
    transform: translateY(0);
}

.btn-submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.btn-text {
    position: relative;
    z-index: 1;
}

.btn-icon {
    position: relative;
    z-index: 1;
    font-size: 1.2em;
    transition: transform 0.3s ease;
}

.btn-submit:hover .btn-icon {
    transform: translateX(4px);
}

.form-message {
    padding: 1em 1.5em;
    border-radius: 4px;
    text-align: center;
    font-weight: 600;
    margin-top: 1em;
    animation: slideIn 0.3s ease;
}

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

.form-message.success {
    background: rgba(16, 185, 129, 0.15);
    border: 2px solid var(--accent-green);
    color: var(--accent-green);
}

.form-message.error {
    background: rgba(239, 68, 68, 0.15);
    border: 2px solid var(--accent-red);
    color: var(--accent-red);
}

/* Share Button */
.share-button {
    display: flex;
    align-items: center;
    gap: 0.5em;
    padding: 0.6em 1.2em;
    background: var(--bg-secondary);
    border: 2px solid var(--accent-cyan);
    color: var(--accent-cyan);
    font-family: 'Berkeley Mono', 'Courier New', monospace;
    font-size: 0.85em;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.share-button:hover {
    background: var(--bg-tertiary);
    border-color: var(--accent-yellow);
    color: var(--accent-yellow);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 255, 255, 0.2);
}

.share-button:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 255, 255, 0.1);
}

.share-button-copied {
    border-color: var(--accent-green);
    color: var(--accent-green);
    background: rgba(16, 185, 129, 0.1);
}

.share-button-icon {
    font-size: 1.1em;
    line-height: 1;
}

.share-button-text {
    line-height: 1;
}

@media (max-width: 768px) {
    .share-button {
        padding: 0.5em 1em;
        font-size: 0.75em;
    }
    
    .share-button-icon {
        font-size: 1em;
    }
}

/* Share Modal */
.share-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.share-modal.modal-open {
    opacity: 1;
    visibility: visible;
}

.share-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(4px);
}

.share-modal-content {
    position: relative;
    z-index: 1;
    background: var(--bg-secondary);
    border: 2px solid var(--accent-cyan);
    border-radius: 4px;
    padding: 2em;
    max-width: 500px;
    width: 90%;
    transform: scale(0.9);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.share-modal.modal-open .share-modal-content {
    transform: scale(1);
}

.share-modal-close {
    position: absolute;
    top: 1em;
    right: 1em;
    background: transparent;
    border: none;
    color: var(--accent-cyan);
    font-size: 2em;
    cursor: pointer;
    line-height: 1;
    padding: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease, color 0.2s ease;
}

.share-modal-close:hover {
    transform: rotate(90deg);
    color: var(--accent-yellow);
}

.share-modal-title {
    color: var(--accent-cyan);
    font-size: 1.2em;
    font-weight: 700;
    margin: 0 0 1.5em 0;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.share-options {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1em;
}

.share-options.has-native-share {
    grid-template-columns: repeat(3, 1fr);
}

.share-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5em;
    padding: 1.5em 1em;
    background: var(--bg-tertiary);
    border: 2px solid var(--border-color);
    color: var(--fg-primary);
    font-family: 'Berkeley Mono', 'Courier New', monospace;
    font-size: 0.9em;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.share-option:hover {
    border-color: var(--accent-cyan);
    background: var(--bg-secondary);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 255, 255, 0.2);
}

.share-option:active {
    transform: translateY(0);
}

.share-option-copied {
    border-color: var(--accent-green);
    background: rgba(16, 185, 129, 0.1);
    color: var(--accent-green);
}

.share-option-icon {
    font-size: 2em;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
}

.share-option-icon svg {
    width: 100%;
    height: 100%;
}

.share-option[data-platform="whatsapp"] .share-option-icon {
    color: #25D366;
}

.share-option[data-platform="twitter"] .share-option-icon {
    color: #1DA1F2;
}

.share-option[data-platform="facebook"] .share-option-icon {
    color: #1877F2;
}

.share-option[data-platform="copy"] .share-option-icon {
    color: var(--accent-cyan);
}

.share-option-native .share-option-icon {
    color: var(--accent-yellow);
}

.share-option-label {
    line-height: 1;
}

@media (max-width: 768px) {
    .share-modal-content {
        padding: 1.5em;
        width: 95%;
    }
    
    .share-options {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75em;
    }
    
    .share-options.has-native-share {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .share-option {
        padding: 1.2em 0.75em;
        font-size: 0.8em;
    }
    
    .share-option-icon {
        font-size: 1.5em;
    }
    
    .share-modal-close {
        top: 0.75em;
        right: 0.75em;
        font-size: 1.5em;
        width: 30px;
        height: 30px;
    }
}

/* Filter Box - Event Filter UI */
.filter-box {
    background: transparent;
    border: none;
    padding: 1em 0;
    margin-bottom: 2em;
    text-align: center;
}

.hero-banner {
    background: linear-gradient(135deg, rgba(149, 230, 203, 0.08), rgba(89, 194, 255, 0.08));
    border: 2px solid var(--border-color);
    padding: 2em;
    margin-bottom: 2em;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}

.hero-header {
    text-align: center;
    margin-bottom: 1.5em;
    padding: 1em 0;
}

.hero-text {
    display: flex;
    flex-direction: column;
    gap: 0.75em;
}

.hero-title {
    font-size: 2.2em;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--accent-cyan);
    text-transform: uppercase;
    margin-bottom: 0.4em;
}

.hero-subtitle {
    color: var(--fg-primary);
    font-size: 1.2em;
    font-weight: 500;
    max-width: 720px;
    margin: 0 auto;
    opacity: 0.9;
}

.hero-actions {
    display: flex;
    gap: 0.75em;
    flex-wrap: wrap;
}

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

.btn-primary:hover {
    background: transparent;
    color: var(--accent-cyan);
}

.btn-secondary {
    background: transparent;
    color: var(--accent-yellow);
    border: 1px solid var(--accent-yellow);
}

.btn-secondary:hover {
    background: var(--accent-yellow);
    color: var(--bg-primary);
}

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

.filter-title {
    color: var(--accent-cyan);
    font-weight: 700;
    font-size: 1.1em;
    letter-spacing: 0.1em;
}

.filter-clear {
    color: var(--fg-tertiary);
    font-size: 1rem;
    text-decoration: none;
    padding: 0.25em 0.5em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 0.6;
    transition: all 0.2s ease;
    margin-left: 0.5em;
}

.filter-clear:hover {
    color: var(--accent-red);
    opacity: 1;
}

/* No results message for client-side filtering */
.filter-no-results {
    text-align: center;
    padding: 4em 2em;
    border: 1px dashed var(--border-color);
    margin-bottom: 2em;
}

.filter-no-results p {
    font-size: 1.5em;
    color: var(--fg-tertiary);
    margin-bottom: 1em;
}

.filter-section {
    display: flex;
    align-items: flex-start;
    gap: 1em;
    margin-bottom: 1em;
}

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

/* Filter Sentence - unified center alignment */
.filter-sentence {
    display: flex;
    flex-wrap: wrap;
    gap: var(--filter-gap);
    align-items: center;
    line-height: var(--filter-height);
    justify-content: center;
}

.filter-sentence-text {
    color: var(--fg-secondary);
    font-weight: 600;
    font-size: var(--filter-font-size);
    letter-spacing: 0.03em;
    line-height: var(--filter-height);
}

.filter-selected-display {
    background: none;
    border: none;
    color: var(--accent-yellow);
    font-family: var(--font-mono);
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 0;
    text-transform: capitalize;
    text-shadow: 0 0 10px rgba(255, 195, 50, 0.2);
}

.filter-selected-display-active {
    text-shadow: 0 0 18px rgba(255, 195, 50, 0.5);
    color: var(--accent-yellow);
}

/* Share button inline */
.share-button-inline {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--fg-secondary);
    font-family: var(--font-mono);
    font-size: 1.2em;
    font-weight: 400;
    padding: 0.3em 0.5em;
    margin-left: 0.5em;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--filter-height);
    height: var(--filter-height);
    transition: all 0.2s ease;
    opacity: 0.7;
}

.share-button-inline:hover {
    background: var(--bg-tertiary);
    color: var(--accent-cyan);
    border-color: var(--accent-cyan);
    opacity: 1;
    transform: translateY(-1px);
}

.share-button-inline .share-button-text {
    display: none;
}

/* Go button */
.filter-tag-go {
    background: var(--accent-green);
    color: var(--bg-primary);
    border: 1px solid var(--accent-green);
    font-weight: 800;
    margin-left: 0.5em;
}

.filter-tag-go:hover {
    background: transparent;
    color: var(--accent-green);
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.3);
}

.filter-box-summary {
    background: transparent;
    border: none;
    box-shadow: none;
    padding-top: 0.25em;
    padding-bottom: 2em;
}

.filter-box-summary .filter-sentence {
    justify-content: center;
    text-align: center;
    gap: 0.85em;
}

.filter-box-summary .filter-tag,
.filter-box-summary .filter-clear,
.filter-box-summary .filter-sentence-text,
.filter-box-summary .filter-input-sentence {
    background: transparent;
    border-color: transparent;
}

/* Ensure selected tags (MUSIC/ART) keep their accent color even in summary mode */
.filter-box-summary .filter-tag.filter-tag-selected {
    /* Keep the background color defined by the specific type class */
    border-color: transparent; 
}
/* Re-assert type colors because the above generic rule might override them if not careful */
.filter-box-summary .filter-tag-type-music.filter-tag-selected { color: #8b5cf6; background: transparent; }
.filter-box-summary .filter-tag-type-art.filter-tag-selected { color: #06b6d4; background: transparent; }

/* Hide unselected type tags in summary mode to reduce clutter? User said "centered sentence of user choice" */
/* If I select Music, Art should probably disappear or be dim? Let's just keep them clean text */
.filter-box-summary .filter-tag-type:not(.filter-tag-selected) {
    opacity: 0.5;
}


/* Hide date buckets when summary mode (month selected) is active */
.filter-box-summary .filter-tag-date[data-filter-type="date_bucket"] {
    display: none !important;
}

.filter-box-summary .filter-city-tag {
    background: linear-gradient(120deg, #8b5cf6, #22d3ee);
    color: var(--bg-primary);
    box-shadow: 0 0 12px rgba(34, 211, 238, 0.35);
}

.filter-box-summary .filter-tag-go,
.filter-box-summary .share-button-inline {
    /* Keep buttons visible/styled even in summary mode */
    background: var(--accent-green);
    border-color: var(--accent-green); 
    /* Share button reset to default style override if needed, but for now this ensures visibility */
}

.filter-box-summary .share-button-inline {
   background: transparent;
   border: 1px dashed var(--accent-cyan);
   color: var(--accent-cyan);
}

.filter-box-summary .share-button-inline:hover {
   background: var(--accent-cyan);
   color: var(--bg-primary);
   border-style: solid;
}

/* Ensure GO button is always solid */
.filter-box-summary .filter-tag-go {
    background: var(--accent-green);
    color: var(--bg-primary);
    border: 1px solid var(--accent-green);
}

/* Filter rows */
.filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--filter-gap);
    align-items: center;
    margin-top: 0.75em;
}


.filter-tags-inline {
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--filter-gap);
    align-items: center;
}



.filter-autocomplete {
    position: relative;
    min-width: 180px;
}

/* Inline autocomplete in sentence - no margins */
.filter-autocomplete-inline {
    display: inline-block;
    min-width: auto;
}

/* Ghost text typeahead - no dropdown! */
.filter-typeahead {
    position: relative;
    display: inline-block;
}

.filter-typeahead .filter-input-sentence {
    position: relative;
    z-index: 2;
    background: transparent;
}

.filter-typeahead-ghost {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    pointer-events: none;
    color: var(--accent-cyan);
    opacity: 0.4;
    font-family: var(--font-mono);
    font-size: var(--filter-font-size);
    font-weight: 600;
    letter-spacing: 0.05em;
    line-height: var(--filter-height);
    height: var(--filter-height);
    padding: 0;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
    text-transform: uppercase;
}

/* City container for multiple city tags */
.filter-city-container {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35em;
}

/* City tag styling - colorful pill */
.filter-city-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
    height: var(--filter-height);
    padding: 0 0.6em;
    font-family: var(--font-mono);
    font-size: var(--filter-font-size);
    font-weight: 600;
    letter-spacing: 0.03em;
    border: none;
    cursor: default;
    text-transform: uppercase;
    animation: tagPop 0.2s ease-out;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

@keyframes tagPop {
    0% { transform: scale(0.8); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

.filter-city-tag-remove {
    cursor: pointer;
    opacity: 0.7;
    font-size: 0.9em;
    margin-left: 0.2em;
    transition: opacity 0.15s;
}

.filter-city-tag-remove:hover {
    opacity: 1;
}

.filter-date-tag-remove {
    cursor: pointer;
    opacity: 0.7;
    font-size: 0.9em;
    margin-left: 0.3em;
    transition: opacity 0.15s;
    display: inline-flex;
    align-items: center;
}

.filter-date-tag-remove:hover {
    opacity: 1;
}

/* City tag color variations */
.filter-city-tag:nth-child(4n+1) { background: var(--accent-cyan); color: var(--bg-primary); }
.filter-city-tag:nth-child(4n+2) { background: var(--accent-green); color: var(--bg-primary); }
.filter-city-tag:nth-child(4n+3) { background: var(--accent-yellow); color: var(--bg-primary); }
.filter-city-tag:nth-child(4n) { background: var(--accent-red); color: var(--bg-primary); }

/* Selected state - hide other options */
.filter-tag-selected {
    /* Keep visible and highlighted */
}

.filter-tag.filter-tag-hidden {
    display: none !important;
}

/* Type tags when one is selected */
.filter-tag-type.filter-tag-selected {
    background: var(--accent-purple);
    border-color: var(--accent-purple);
    color: var(--bg-primary);
}

/* Date tags when one is selected */
.filter-tag-date.filter-tag-selected {
    background: var(--accent-yellow);
    border-color: var(--accent-yellow);
    color: var(--bg-primary);
}


.filter-input {
    padding: 0.55em 0.75em;
    border: 1px solid var(--border-color);
    background: var(--bg-tertiary);
    color: var(--fg-primary);
    font-weight: 700;
    letter-spacing: 0.05em;
    width: 100%;
    min-width: 180px;
}

.filter-input:focus {
    outline: 1px solid var(--accent-cyan);
    border-color: var(--accent-cyan);
}

.filter-suggestions {
    position: absolute;
    top: 105%;
    left: 0;
    right: 0;
    background: var(--bg-secondary);
    border: 1px solid var(--accent-cyan);
    box-shadow: 0 8px 20px rgba(0,0,0,0.35);
    z-index: 100;
    display: none;
    max-height: 260px;
    overflow-y: auto;
}

.filter-suggestion {
    width: 100%;
    text-align: left;
    padding: 0.55em 0.8em;
    background: transparent;
    border: none;
    color: var(--fg-primary);
    cursor: pointer;
    border-bottom: 1px solid var(--border-color);
    transition: background 0.15s ease;
}

.filter-suggestion:hover {
    background: var(--bg-tertiary);
    color: var(--accent-cyan);
}

.filter-calendar {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    flex-wrap: wrap;
}

/* Selected month display */
#selected-month-display {
    gap: 0.5em;
}

.filter-month-clear {
    cursor: pointer;
    opacity: 0.7;
    font-size: 0.85em;
    transition: opacity 0.15s;
}

.filter-month-clear:hover {
    opacity: 1;
}

/* Custom Calendar Picker - Headfirst inspired */
.calendar-picker {
    /* Position relative to the filter box */
    position: absolute; 
    top: 100%;
    left: 50%;
    transform: translateX(-50%) scaleY(0); /* Start collapsed */
    transform-origin: top center;
    z-index: 100;
    
    margin-top: 1em;
    padding: 1em;
    background: var(--bg-secondary);
    /* Border handled by pseudo-element for shimmer */
    border: 1px solid transparent; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.5), 0 0 20px rgba(34, 211, 238, 0.1);
    max-width: 350px;
    width: 90vw;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.calendar-picker.is-visible {
    opacity: 1;
    transform: translateX(-50%) scaleY(1);
    pointer-events: auto;
}

/* Ensure filter box has relative positioning for absolute calendar */
.filter-box {
    position: relative;
}

/* Deprecated simple animation
@keyframes calendarSlideIn {
    0% { opacity: 0; transform: translateY(-10px); }
    100% { opacity: 1; transform: translateY(0); }
} */

.calendar-select-month {
    width: 100%;
    margin-top: 0.75em;
    padding: 0.65em 0.8em;
    background: var(--accent-yellow);
    color: var(--bg-primary);
    border: 1px solid var(--accent-yellow);
    font-family: var(--font-mono);
    font-weight: 700;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}

.calendar-select-month:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}

.calendar-select-month:active {
    transform: translateY(0);
    opacity: 0.9;
}

@keyframes calendarSlideIn {
    0% { opacity: 0; transform: translateY(-10px); }
    100% { opacity: 1; transform: translateY(0); }
}

.calendar-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75em;
    padding: 0.5em;
    background: var(--bg-tertiary);
    border-radius: 4px;
}

.calendar-nav-btn {
    background: transparent;
    border: none;
    color: var(--fg-secondary);
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0.25em 0.5em;
    transition: color 0.15s;
}

.calendar-nav-btn:hover {
    color: var(--accent-cyan);
}

.calendar-nav-spacer {
    flex: 1;
}

.calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75em;
    padding: 0 0.25em;
}

.calendar-month-name {
    font-family: var(--font-mono);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--fg-primary);
}

.calendar-year {
    font-family: var(--font-mono);
    font-size: 1.1rem;
    color: var(--fg-tertiary);
}

.calendar-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    margin-bottom: 0.5em;
    text-align: center;
}

.calendar-weekdays span {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--fg-tertiary);
    padding: 0.5em 0;
}

.calendar-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}

.calendar-day {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-size: 0.9rem;
    background: var(--bg-tertiary);
    color: var(--fg-secondary);
    border: none;
    cursor: pointer;
    transition: all 0.15s ease;
}

.calendar-day:hover {
    background: var(--accent-purple);
    color: var(--bg-primary);
}

.calendar-day.has-events {
    background: rgba(187, 134, 252, 0.3);
    color: var(--fg-primary);
}

.calendar-day.has-events:hover {
    background: var(--accent-purple);
    color: var(--bg-primary);
}

.calendar-day.today {
    border: 2px solid var(--accent-yellow);
}

.calendar-day.selected {
    background: var(--accent-yellow);
    color: var(--bg-primary);
}

.calendar-day.empty {
    background: transparent;
    cursor: default;
}

.calendar-day.past {
    opacity: 0.4;
    cursor: default;
}

.calendar-day.past:hover {
    background: var(--bg-tertiary);
    color: var(--fg-secondary);
}

.filter-label-inline {
    color: var(--fg-tertiary);
    font-size: 0.85em;
}

.filter-input-compact {
    max-width: 260px;
}

/* Sentence-style underline inputs for "Mad Libs" UI */
.filter-input-sentence {
    background: transparent;
    border: none;
    border-bottom: 2px solid var(--fg-tertiary);
    border-radius: 0;
    padding: 0 0.3em;
    height: var(--filter-height);
    line-height: var(--filter-height);
    color: var(--fg-primary);
    font-family: inherit;
    font-size: var(--filter-font-size);
    font-weight: 700;
    width: auto;
    min-width: 100px;
    transition: border-color 0.2s ease;
}

/* Remove border when in "plus" mode (adding more items) */
.filter-input-sentence.input-plus-mode {
    border: 1px dashed var(--border-color);
    border-radius: 4px;
    width: auto;
    min-width: 5ch;
    padding: 0 0.5em;
    text-align: left;
    opacity: 0.6;
    background: transparent;
}

.filter-input-sentence.input-plus-mode:focus {
    opacity: 1;
    border-color: var(--accent-cyan);
    border-style: solid;
}

.filter-input-sentence:focus {
    outline: none;
    border-bottom-color: var(--accent-cyan);
}

.filter-input-sentence::placeholder {
    color: var(--fg-tertiary);
    font-weight: 400;
}

.filter-input-sentence.input-plus-mode::placeholder {
    color: var(--fg-tertiary);
    opacity: 0.7;
}

/* Contextual focus colors for sentence inputs */
#type-input.filter-input-sentence:focus {
    border-bottom-color: var(--accent-purple);
}

#city-input.filter-input-sentence:focus {
    border-bottom-color: var(--accent-cyan);
}



/* filter-clear inherits unified sizing from base class */

.btn-ghost {
    background: var(--bg-tertiary);
    color: var(--accent-yellow);
    border: 1px dashed var(--accent-yellow);
    padding: 0.5em 0.9em;
}

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

/* Quick types - subtle styling */
.filter-quick-types {
    gap: var(--filter-gap);
}

.filter-quick-types .filter-tag {
    opacity: 0.8;
}

.filter-quick-types .filter-tag:hover {
    opacity: 1;
}

.filter-tag-ghost {
    background: transparent;
    border-style: dashed;
}

.filter-suggestions {
    border-color: var(--accent-cyan);
}

.filter-suggestion:hover {
    background: var(--accent-cyan);
    color: var(--bg-primary);
}

.filter-panel {
    position: relative;
    opacity: 1;
    transform: translateY(0);
    max-height: 1200px;
    transition:
        opacity 0.25s ease,
        transform 0.25s ease,
        max-height 0.3s ease;
}

.filter-panel.is-hidden {
    opacity: 0;
    transform: translateY(-6px);
    max-height: 0;
    overflow: hidden;
    pointer-events: none;
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
    border-width: 0;
}

.filter-label {
    color: var(--accent-green);
    font-weight: 700;
    font-size: 0.85em;
    min-width: 5em;
    padding-top: 0.5em;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.filter-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--filter-gap);
}

.filter-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--filter-height);
    padding: 0 var(--filter-padding-x);
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    color: var(--fg-secondary);
    font-size: var(--filter-font-size);
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
    cursor: pointer;
    white-space: nowrap;
}

.filter-tag:hover {
    border-color: var(--accent-cyan);
    color: var(--accent-cyan);
    background: var(--bg-secondary);
    transform: translateY(-1px);
}

.filter-option-dim {
    opacity: 0.45;
    filter: grayscale(0.3);
}

.filter-option-dim:hover {
    opacity: 0.6;
    filter: grayscale(0.2);
}

.filter-tag-active {
    background: var(--accent-cyan);
    border-color: var(--accent-cyan);
    color: var(--bg-primary);
}

.filter-tag-active:hover {
    background: var(--accent-cyan);
    color: var(--bg-primary);
    transform: translateY(-1px);
}

/* Filter Tag Type Variants */
.filter-tag-type-music {
    border-color: #8b5cf6;
    color: #8b5cf6;
    font-weight: 800;
    box-shadow: 0 0 8px rgba(139, 92, 246, 0.15);
}

.filter-tag-type-music:hover {
    background: #8b5cf6;
    color: white;
    box-shadow: 0 0 15px rgba(139, 92, 246, 0.4);
}

.filter-tag-type-music.filter-tag-active {
    background: #8b5cf6;
    border-color: #8b5cf6;
    color: white;
    box-shadow: 0 0 15px rgba(139, 92, 246, 0.5);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.filter-tag-type-art {
    border-color: #06b6d4;
    color: #06b6d4;
    font-weight: 800;
    box-shadow: 0 0 8px rgba(6, 182, 212, 0.15);
}

.filter-tag-type-art:hover {
    background: #06b6d4;
    color: white;
    box-shadow: 0 0 15px rgba(6, 182, 212, 0.4);
}

.filter-tag-type-art.filter-tag-active {
    background: #06b6d4;
    border-color: #06b6d4;
    color: white;
    box-shadow: 0 0 15px rgba(6, 182, 212, 0.5);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.filter-tag-type-activism {
    border-color: #eab308;
    color: #eab308;
}

.filter-tag-type-activism:hover {
    background: #eab308;
    color: #1e293b;
}

.filter-tag-type-activism.filter-tag-active {
    background: #eab308;
    border-color: #eab308;
    color: #1e293b;
}

.filter-tag-type-educational {
    border-color: #10b981;
    color: #10b981;
}

.filter-tag-type-educational:hover {
    background: #10b981;
    color: white;
}

.filter-tag-type-educational.filter-tag-active {
    background: #10b981;
    border-color: #10b981;
    color: white;
}

.filter-tag-type-community {
    border-color: #f97316;
    color: #f97316;
}

.filter-tag-type-community:hover {
    background: #f97316;
    color: white;
}

.filter-tag-type-community.filter-tag-active {
    background: #f97316;
    border-color: #f97316;
    color: white;
}

.filter-tag-type-market {
    border-color: #f59e0b;
    color: #f59e0b;
}

.filter-tag-type-market:hover {
    background: #f59e0b;
    color: white;
}

.filter-tag-type-market.filter-tag-active {
    background: #f59e0b;
    border-color: #f59e0b;
    color: white;
}

.filter-tag-type-general {
    border-color: #64748b;
    color: #64748b;
}

.filter-tag-type-general:hover {
    background: #64748b;
    color: white;
}

.filter-tag-type-general.filter-tag-active {
    background: #64748b;
    border-color: #64748b;
    color: white;
}


/* Venue tags - blue accent */
.filter-tag-venue {
    border-color: var(--accent-blue);
    color: var(--accent-blue);
}

.filter-tag-venue:hover {
    background: var(--accent-blue);
    color: var(--bg-primary);
}

.filter-tag-venue.filter-tag-active {
    background: var(--accent-blue);
    border-color: var(--accent-blue);
    color: var(--bg-primary);
}

/* Date filter tags - yellow accent */
.filter-tag-date {
    border-color: var(--accent-yellow);
    color: var(--accent-yellow);
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
}

.filter-tag-date:hover {
    background: var(--accent-yellow);
    color: var(--bg-primary);
}

.filter-tag-date.filter-tag-active {
    background: var(--accent-yellow);
    border-color: var(--accent-yellow);
    color: var(--bg-primary);
}

.filter-tag-date.filter-tag-active .filter-date-tag-remove {
    color: var(--bg-primary);
}

/* Multi-select tags - show checkmark when active */
.filter-tag-multiselect.filter-tag-active {
    position: relative;
}

/* Dropdown toggle button */
.filter-dropdown-toggle {
    display: inline-block;
    padding: 0.4em 0.9em;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    color: var(--fg-secondary);
    font-size: 0.8em;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
    cursor: pointer;
    font-family: 'Berkeley Mono', monospace;
}

.filter-dropdown-toggle:hover {
    border-color: var(--accent-cyan);
    color: var(--accent-cyan);
    background: var(--bg-secondary);
    transform: translateY(-1px);
}

/* Dropdown container */
.filter-dropdown {
    position: relative;
    margin-top: 0.5em;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 0;
    max-height: 300px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.filter-dropdown-content {
    max-height: 250px;
    overflow-y: auto;
    padding: 0.5em;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4em;
}

.filter-dropdown-item {
    display: inline-block;
    padding: 0.35em 0.8em;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    color: var(--fg-secondary);
    font-size: 0.8em;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
    cursor: pointer;
}

.filter-dropdown-item:hover {
    border-color: var(--accent-blue);
    color: var(--accent-blue);
    background: var(--bg-tertiary);
}

.filter-dropdown-item-active {
    background: var(--accent-blue);
    border-color: var(--accent-blue);
    color: var(--bg-primary);
}

.filter-dropdown-item-active:hover {
    background: var(--accent-blue);
    color: var(--bg-primary);
}

/* Search input */
.filter-search-input {
    width: 100%;
    padding: 0.6em 1em;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-bottom: 2px solid var(--accent-cyan);
    color: var(--fg-primary);
    font-family: 'Berkeley Mono', monospace;
    font-size: 0.85em;
    outline: none;
    transition: border-color 0.2s ease;
}

.filter-search-input:focus {
    border-bottom-color: var(--accent-yellow);
}

.filter-search-input::placeholder {
    color: var(--fg-tertiary);
    opacity: 0.7;
}

/* Expandable section */
.filter-expand-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--filter-height);
    padding: 0 var(--filter-padding-x);
    background: var(--bg-tertiary);
    border: 1px solid var(--accent-purple);
    color: var(--accent-purple);
    font-size: var(--filter-font-size);
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
    cursor: pointer;
    font-family: inherit;
    white-space: nowrap;
}

.filter-expand-toggle:hover {
    border-color: var(--accent-purple);
    color: var(--bg-primary);
    background: var(--accent-purple);
}

.filter-expandable {
    margin-top: 1em;
    padding: 1em;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
}

.filter-expandable-content {
    margin-top: 0.8em;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em;
    max-height: 400px;
    overflow-y: auto;
}


/* Filter Responsive */
@media (max-width: 768px) {
    .filter-box {
        padding: 1em;
    }
    
    .filter-section {
        flex-direction: column;
        gap: 0.5em;
    }
    
    .filter-label {
        min-width: auto;
        padding-top: 0;
    }
    
    .filter-tag {
        font-size: 0.75em;
        padding: 0.35em 0.7em;
    }
    
    .filter-header {
        flex-direction: column;
        gap: 0.75em;
        align-items: flex-start;
    }
    
    .filter-dropdown {
        max-height: 250px;
    }
    
    .filter-dropdown-content {
        max-height: 200px;
    }
    
    .filter-expandable {
        padding: 0.8em;
    }
    
    .filter-expandable-content {
        max-height: 300px;
    }
    
    .filter-dropdown-toggle,
    .filter-expand-toggle {
        font-size: 0.75em;
        padding: 0.35em 0.7em;
    }
    
    /* Mobile: Stack date filters vertically if needed */
    .filter-tags {
        flex-wrap: wrap;
    }
}

/* Upload Modal Styles */
.upload-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.upload-modal.modal-open {
    display: flex;
    opacity: 1;
    visibility: visible;
}

.upload-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(4px);
}

.upload-modal-content {
    position: relative;
    z-index: 1;
    background: var(--bg-secondary);
    border: 2px solid var(--accent-cyan);
    padding: 2.5em;
    max-width: 600px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    transform: scale(0.9);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.upload-modal.modal-open .upload-modal-content {
    transform: scale(1);
}

.upload-modal-close {
    position: absolute;
    top: 1em;
    right: 1em;
    background: transparent;
    border: none;
    color: var(--accent-cyan);
    font-size: 2em;
    cursor: pointer;
    line-height: 1;
    padding: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease, color 0.2s ease;
}

.upload-modal-close:hover {
    transform: rotate(90deg);
    color: var(--accent-yellow);
}

.upload-step {
    text-align: center;
}

.upload-step-title {
    color: var(--accent-cyan);
    font-size: 1.5em;
    font-weight: 700;
    margin-bottom: 1em;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.upload-step-title-success {
    color: var(--accent-green);
}

.upload-step-title-error {
    color: var(--accent-red);
}

.upload-step-description {
    color: var(--fg-secondary);
    margin-bottom: 2em;
    line-height: 1.6;
}

/* Upload success event title */
.upload-success-event-title {
    font-size: 1.3em;
    font-weight: 700;
    color: var(--accent-yellow);
    margin-bottom: 1em;
    font-style: italic;
}

.upload-success-url-label {
    font-size: 0.9em;
    color: var(--fg-secondary);
    margin-bottom: 0.5em;
}

.upload-success-url {
    color: var(--accent-green);
    text-decoration: none;
    font-weight: 600;
    display: block;
    margin-bottom: 0.5em;
}

.upload-success-url:hover {
    text-decoration: underline;
}

.upload-success-note {
    color: var(--fg-muted);
}

/* Google Auth Button */
.btn-google-auth {
    display: inline-flex;
    align-items: center;
    gap: 0.8em;
    padding: 1em 2em;
    background: white;
    border: 2px solid var(--border-color);
    color: #1a1a1a;
    font-family: 'Berkeley Mono', monospace;
    font-weight: 700;
    font-size: 1em;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-google-auth:hover {
    background: #f5f5f5;
    border-color: var(--accent-cyan);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.btn-google-icon {
    width: 24px;
    height: 24px;
    background: linear-gradient(135deg, #4285f4 0%, #34a853 50%, #fbbc05 75%, #ea4335 100%);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 700;
    font-size: 0.9em;
}

/* Upload Dropzone */
.upload-dropzone {
    border: 2px dashed var(--border-color);
    background: var(--bg-tertiary);
    padding: 3em 2em;
    margin-bottom: 1.5em;
    cursor: pointer;
    transition: all 0.3s ease;
}

.upload-dropzone:hover {
    border-color: var(--accent-cyan);
    background: var(--bg-secondary);
}

.upload-dropzone.drag-over {
    border-color: var(--accent-green);
    background: rgba(139, 212, 156, 0.1);
}

.upload-dropzone-content {
    pointer-events: none;
}

.upload-dropzone-icon {
    font-size: 4em;
    margin-bottom: 0.5em;
}

.upload-dropzone-text {
    color: var(--fg-primary);
    font-size: 1.1em;
    margin-bottom: 0.5em;
}

.upload-dropzone-hint {
    color: var(--fg-tertiary);
    font-size: 0.9em;
}

/* File Preview */
.upload-file-preview {
    margin-bottom: 1.5em;
    border: 2px solid var(--border-color);
    background: var(--bg-tertiary);
    padding: 1em;
}

.upload-file-preview img {
    max-width: 100%;
    max-height: 300px;
    margin-bottom: 0.5em;
    border: 1px solid var(--border-color);
}

.upload-file-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--fg-secondary);
    font-size: 0.9em;
}

.btn-remove-file {
    background: var(--bg-secondary);
    border: 1px solid var(--accent-red);
    color: var(--accent-red);
    padding: 0.4em 1em;
    font-family: 'Berkeley Mono', monospace;
    font-size: 0.85em;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-remove-file:hover {
    background: var(--accent-red);
    color: var(--bg-primary);
}

/* Upload Submit Button */
.btn-upload-submit {
    width: 100%;
    padding: 1em 2em;
    background: var(--bg-tertiary);
    border: 2px solid var(--accent-cyan);
    color: var(--accent-cyan);
    font-family: 'Berkeley Mono', monospace;
    font-weight: 700;
    font-size: 1em;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-upload-submit:hover:not(:disabled) {
    background: var(--accent-cyan);
    color: var(--bg-primary);
    box-shadow: 0 0 20px var(--accent-cyan);
}

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

/* Upload Progress */
.upload-progress {
    margin-top: 2em;
}

.upload-progress-bar {
    width: 100%;
    height: 8px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    margin-bottom: 1em;
    overflow: hidden;
}

.upload-progress-fill {
    height: 100%;
    background: var(--accent-cyan);
    width: 0%;
    transition: width 0.3s ease;
    animation: pulse-progress 2s infinite;
}

@keyframes pulse-progress {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

.upload-progress-text {
    color: var(--fg-secondary);
    font-size: 0.9em;
}

/* Success State */
.upload-success-info {
    background: var(--bg-tertiary);
    border: 2px solid var(--accent-green);
    padding: 1.5em;
    margin-bottom: 1.5em;
}

.upload-success-url-label {
    color: var(--accent-green);
    font-weight: 700;
    margin-bottom: 0.5em;
    text-transform: uppercase;
    font-size: 0.9em;
}

.upload-success-url {
    display: block;
    color: var(--accent-cyan);
    word-break: break-all;
    text-decoration: underline;
    font-size: 0.95em;
    margin-top: 0.5em;
}

.upload-success-url:hover {
    color: var(--accent-yellow);
}

/* Error State */
.upload-step-description.error {
    color: var(--accent-red);
    background: rgba(239, 68, 68, 0.1);
    padding: 1em;
    border: 1px solid var(--accent-red);
    margin-bottom: 1.5em;
}

/* Action Buttons */
.btn-upload-retry,
.btn-upload-close {
    margin-top: 1em;
    padding: 0.8em 2em;
    background: var(--bg-tertiary);
    border: 2px solid var(--accent-cyan);
    color: var(--accent-cyan);
    font-family: 'Berkeley Mono', monospace;
    font-weight: 700;
    font-size: 0.95em;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-upload-retry {
    margin-right: 0.5em;
    border-color: var(--accent-yellow);
    color: var(--accent-yellow);
}

.btn-upload-retry:hover {
    background: var(--accent-yellow);
    color: var(--bg-primary);
}

.btn-upload-close:hover {
    background: var(--accent-cyan);
    color: var(--bg-primary);
}

/* Crop Area Styles (combined selection + crop) */
.upload-crop-area {
    margin-bottom: 1.5em;
}

.upload-crop-container {
    max-width: 100%;
    max-height: 60vh;
    overflow: hidden;
    border: 2px solid var(--border-color);
    background: var(--bg-primary);
    margin-bottom: 1em;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.upload-crop-container img {
    max-width: 100%;
    max-height: 60vh;
    display: block;
}

/* Ensure cropper fits the image */
.upload-crop-container .cropper-container {
    max-height: 60vh;
}

/* Remove any extra background outside image */
.upload-crop-container .cropper-canvas {
    background: var(--bg-primary);
}

.upload-crop-area .upload-file-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.8em 1em;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    color: var(--fg-secondary);
    font-size: 0.9em;
}

/* Cropper.js overrides for terminal theme */
.cropper-container {
    direction: ltr;
    font-size: 0;
    line-height: 0;
    position: relative;
    touch-action: none;
    user-select: none;
}

.cropper-wrap-box,
.cropper-canvas,
.cropper-drag-box,
.cropper-crop-box,
.cropper-modal {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.cropper-wrap-box {
    overflow: hidden;
    background: var(--bg-primary);
}

.cropper-modal {
    background-color: rgba(0, 0, 0, 0.6);
}

.cropper-view-box {
    display: block;
    overflow: hidden;
    width: 100%;
    height: 100%;
    outline: 2px solid var(--accent-cyan);
    outline-offset: -2px;
}

.cropper-dashed {
    border: 0 dashed var(--accent-cyan);
    display: block;
    position: absolute;
    opacity: 0.5;
}

.cropper-dashed.dashed-h {
    border-bottom-width: 1px;
    border-top-width: 1px;
    height: calc(100% / 3);
    left: 0;
    top: calc(100% / 3);
    width: 100%;
}

.cropper-dashed.dashed-v {
    border-left-width: 1px;
    border-right-width: 1px;
    height: 100%;
    left: calc(100% / 3);
    top: 0;
    width: calc(100% / 3);
}

.cropper-center {
    display: block;
    height: 0;
    left: 50%;
    opacity: 0.75;
    position: absolute;
    top: 50%;
    width: 0;
}

.cropper-center::before,
.cropper-center::after {
    background-color: var(--accent-cyan);
    content: "";
    display: block;
    position: absolute;
}

.cropper-center::before {
    height: 1px;
    left: -3px;
    top: 0;
    width: 7px;
}

.cropper-center::after {
    height: 7px;
    left: 0;
    top: -3px;
    width: 1px;
}

.cropper-face {
    background-color: rgba(139, 212, 156, 0.1);
    display: block;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

.cropper-line {
    background-color: var(--accent-cyan);
    display: block;
    position: absolute;
    opacity: 0.8;
}

.cropper-line.line-e {
    cursor: ew-resize;
    right: -3px;
    top: 0;
    width: 5px;
    height: 100%;
}

.cropper-line.line-n {
    cursor: ns-resize;
    height: 5px;
    left: 0;
    top: -3px;
    width: 100%;
}

.cropper-line.line-w {
    cursor: ew-resize;
    left: -3px;
    top: 0;
    width: 5px;
    height: 100%;
}

.cropper-line.line-s {
    bottom: -3px;
    cursor: ns-resize;
    height: 5px;
    left: 0;
    width: 100%;
}

.cropper-point {
    background-color: var(--accent-cyan);
    height: 10px;
    width: 10px;
    opacity: 1;
    display: block;
    position: absolute;
}

.cropper-point.point-e {
    cursor: ew-resize;
    margin-top: -5px;
    right: -5px;
    top: 50%;
}

.cropper-point.point-n {
    cursor: ns-resize;
    left: 50%;
    margin-left: -5px;
    top: -5px;
}

.cropper-point.point-w {
    cursor: ew-resize;
    left: -5px;
    margin-top: -5px;
    top: 50%;
}

.cropper-point.point-s {
    bottom: -5px;
    cursor: ns-resize;
    left: 50%;
    margin-left: -5px;
}

.cropper-point.point-ne {
    cursor: nesw-resize;
    right: -5px;
    top: -5px;
}

.cropper-point.point-nw {
    cursor: nwse-resize;
    left: -5px;
    top: -5px;
}

.cropper-point.point-se {
    cursor: nwse-resize;
    right: -5px;
    bottom: -5px;
    height: 15px;
    width: 15px;
}

.cropper-point.point-sw {
    cursor: nesw-resize;
    bottom: -5px;
    left: -5px;
}

.cropper-invisible {
    opacity: 0;
}

.cropper-bg {
    background-color: var(--bg-tertiary);
    background-image: none;
}

.cropper-hide {
    display: block;
    height: 0;
    position: absolute;
    width: 0;
}

.cropper-hidden {
    display: none !important;
}

.cropper-move {
    cursor: move;
}

.cropper-crop {
    cursor: crosshair;
}

.cropper-disabled .cropper-drag-box,
.cropper-disabled .cropper-face,
.cropper-disabled .cropper-line,
.cropper-disabled .cropper-point {
    cursor: not-allowed;
}

/* Responsive */
@media (max-width: 768px) {
    .upload-modal-content {
        padding: 1.5em;
        width: 95%;
    }
    
    .upload-step-title {
        font-size: 1.2em;
    }
    
    .upload-dropzone {
        padding: 2em 1em;
    }
    
    .upload-dropzone-icon {
        font-size: 3em;
    }
    
    /* Landing page button responsive */
    .event-header-box > div {
        flex-direction: column;
        align-items: flex-start;
        gap: 1em;
    }
    
    .event-header-box .btn {
        width: 100%;
        text-align: center;
    }
    
    .upload-crop-container {
        max-height: 40vh;
    }
}