:root {
    --bg: #050805;
    --panel: #0d120d;
    --raised: #151d15;
    --line: #263526;
    --text: #eef9eb;
    --muted: #8eaa8a;
    --accent: #4fae4f;
    --lime: #d8ff65;
}

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

html, body { width: 100%; height: 100%; }

body {
    min-width: 320px;
    overflow: hidden;
    background: var(--bg);
    color: var(--text);
    font-family: "Trebuchet MS", system-ui, sans-serif;
}

button, input { font: inherit; }
button { cursor: pointer; }

.map-area { position: fixed; inset: 0 0 0 350px; z-index: 0; }
#map {
    width: 100%;
    height: 100vh;
    min-height: 520px;
    background:
        radial-gradient(ellipse at 65% 35%, #274927 0%, #112411 40%, #060906 80%),
        repeating-linear-gradient(25deg, transparent 0 58px, rgba(74, 128, 74, .22) 59px 60px, transparent 61px 118px),
        repeating-linear-gradient(115deg, transparent 0 86px, rgba(74, 128, 74, .18) 87px 88px, transparent 89px 172px),
        repeating-linear-gradient(2deg, transparent 0 136px, rgba(116, 166, 100, .12) 137px 139px, transparent 140px 270px);
}
.map-area {
    position: relative;
}

.map-actions {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 1000;
    display: flex;
    gap: 0.5rem;
}
#map::before {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 0 17%, rgba(9, 20, 10, .55) 17.2% 17.8%, transparent 18%), linear-gradient(26deg, transparent 0 62%, rgba(9, 20, 10, .45) 62.2% 62.8%, transparent 63%);
    content: "";
    pointer-events: none;
}

.sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 9000;
    display: flex;
    width: 350px;
    flex-direction: column;
    overflow-y: auto;
    border-right: 1px solid var(--line);
    background: rgba(13, 18, 13, .98);
    box-shadow: 6px 0 32px rgba(0, 0, 0, .6);
    scrollbar-color: var(--line) transparent;
}

.sidebar-header-row {
    padding: 22px 18px 18px;
    border-bottom: 1px solid var(--line);
    text-align: center;
}

.brand h1 { color: #77d86b; font-size: 1.5rem; font-weight: 800; }
.brand p { margin-top: 4px; color: var(--muted); font-size: .75rem; }

.auth-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--line);
}

.auth-buttons [hidden] {
    display: none !important;
}

#view-authenticated {
    grid-column: 1 / -1;
    width: 100%;
}

#view-unauthenticated {
    grid-column: 1 / -1;
    display: flex;
    justify-content: center;
    gap: 8px;
    width: 100%;
}

#view-unauthenticated .login-button,
#view-unauthenticated .signup-button {
    flex: 0 1 125px;
}

.auth-user-status {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-bottom: 10px;
    color: var(--muted);
    font-size: .7rem;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.auth-user-status strong {
    overflow: hidden;
    color: var(--lime);
    font-size: .85rem;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.3;
    text-overflow: ellipsis;
    text-transform: none;
    white-space: nowrap;
}

#view-authenticated .login-button {
    display: inline-block;
    width: calc(50% - 5px);
}

.auth-buttons button,
.auth-buttons a {
    padding: 9px 0;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--raised);
    color: var(--text);
    font-size: .82rem;
    font-weight: 700;
    transition: background .15s, color .15s, border-color .15s;
    text-align: center;
    text-decoration: none;
}

.auth-buttons .signup-button { border-color: var(--accent); background: var(--accent); color: #fff; }
.auth-buttons button:hover, .auth-buttons a:hover { border-color: #baf2a7; background: #baf2a7; color: #0b1a0b; }

.event-views {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--line);
}

.event-view {
    padding: 8px 6px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--raised);
    color: var(--muted);
    font-size: .75rem;
    font-weight: 700;
    transition: background .15s, color .15s, border-color .15s;
}

.event-view:hover, .event-view.active { border-color: var(--accent); background: var(--accent); color: #fff; }

.create-event {
    padding: 14px 16px;
    border-bottom: 1px solid var(--line);
}

.create-event h2 {
    margin-bottom: 9px;
    color: var(--muted);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.create-event button {
    width: 100%;
    padding: 9px;
    border: 1px solid var(--accent);
    border-radius: 7px;
    background: var(--accent);
    color: #fff;
    font-size: .8rem;
    font-weight: 700;
}

.create-event button + button {
    margin-top: 7px;
    border-color: var(--line);
    background: var(--raised);
    color: var(--muted);
}

.create-event button:hover,
.create-event button.filter-active {
    border-color: #baf2a7;
    background: #baf2a7;
    color: #0b1a0b;
}

.create-event p {
    margin-top: 8px;
    color: var(--muted);
    font-size: .7rem;
    line-height: 1.4;
}

.filter-sections { padding: 14px 16px; border-bottom: 1px solid var(--line); }
.filter-sections h2, .events h2 {
    margin-bottom: 9px;
    color: var(--muted);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.filter-sections label { display: block; margin-bottom: 7px; color: var(--muted); font-size: .72rem; }
#radius { width: 100%; margin-bottom: 10px; accent-color: var(--accent); }
.filter-buttons { display: flex; flex-wrap: wrap; gap: 5px; }
.filter-buttons button {
    padding: 5px 10px;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: var(--raised);
    color: var(--muted);
    font-size: .74rem;
    transition: background .15s, color .15s, border-color .15s;
}
.filter-buttons button:hover, .filter-buttons .filter-active { border-color: var(--accent); background: var(--accent); color: #fff; }

.events { flex: 1; padding: 14px 16px 20px; overflow-y: auto; }
#event-status { padding: 3px 2px 8px; color: var(--muted); font-size: .72rem; }
#event-list { display: flex; flex-direction: column; gap: 8px; }

.event-card {
    position: relative;
    display: flex;
    gap: 10px;
    padding: 12px 12px 12px 14px;
    padding-right: 75px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--raised);
    color: var(--text);
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
}

.event-card:hover { border-color: #baf2a7; background: #baf2a7; color: #0b1a0b; }
.event-card[hidden] { display: none; }
.event-card h3 { margin-bottom: 4px; font-size: .9rem; }
.event-card p { margin-top: 3px; color: var(--muted); font-size: .72rem; line-height: 1.4; }
.event-card:hover p { color: #284b28; }
.event-card strong { display: block; margin-top: 6px; color: var(--lime); font-size: .7rem; }
.event-card:hover strong { color: #0b1a0b; }

.zoom-controls {
    position: absolute;
    right: 18px;
    bottom: 28px;
    z-index: 5;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.zoom-controls button {
    width: 36px;
    height: 36px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: var(--raised);
    color: #a9ee9e;
    font-size: 1.2rem;
    font-weight: 700;
}
.zoom-controls button:hover { border-color: #baf2a7; background: #baf2a7; color: #0b1a0b; }

/* Pin Button Styles */
.pin-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    padding: 4px 8px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--bg);
    color: var(--muted);
    font-size: 0.7rem;
    font-weight: 700;
    z-index: 2;
    transition: all 0.15s ease;
}

.pin-btn:hover {
    border-color: var(--accent);
    color: #fff;
}

.pin-btn.pinned {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}

/* Custom Pin Modal Styles */
.modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal[hidden] {
    display: none;
}

.modal-content {
    background: var(--panel);
    padding: 20px;
    border: 1px solid var(--line);
    border-radius: 10px;
    width: 320px;
    max-width: 90vw;
    box-shadow: 0 10px 30px rgba(0,0,0,0.8);
}

.modal-content h3 {
    margin-bottom: 15px;
    color: var(--accent);
    font-size: 1.1rem;
}

.modal-content label {
    display: block;
    margin-bottom: 6px;
    color: var(--muted);
    font-size: 0.8rem;
}

.modal-content input {
    width: 100%;
    margin-bottom: 15px;
    padding: 10px;
    border: 1px solid var(--line);
    background: var(--bg);
    color: var(--text);
    border-radius: 6px;
}

.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 10px;
}

.modal-actions button {
    padding: 8px 14px;
    border-radius: 6px;
    font-weight: 700;
    font-size: 0.85rem;
}

#cancel-pin {
    background: transparent;
    color: var(--muted);
    border: 1px solid var(--line);
}

#cancel-pin:hover {
    background: var(--raised);
    color: var(--text);
}

.modal-actions button[type="submit"] {
    background: var(--accent);
    color: #050805;
    border: 1px solid var(--accent);
}

.modal-actions button[type="submit"]:hover {
    background: #baf2a7;
    border-color: #baf2a7;
}