@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700;800&display=swap");

:root {
    --bg: #030503 !important;
    --panel: #080d09 !important;
    --panel-strong: #0b110c !important;
    --line: #29352c !important;
    --text: #edf7ee !important;
    --muted: #8d9d90 !important;
    --lime: #8cff00 !important;
    --cyan: #25e6ff !important;
    --hot: #ff557f !important;
    --amber: #ffc857 !important;
}

html { background: var(--bg); }

body {
    padding: clamp(8px, 2vw, 22px) !important;
    color: var(--text) !important;
    background:
        linear-gradient(rgba(3, 5, 3, .9), rgba(3, 5, 3, .97)),
        repeating-linear-gradient(90deg, transparent 0 54px, rgba(140, 255, 0, .04) 55px),
        repeating-linear-gradient(0deg, transparent 0 54px, rgba(140, 255, 0, .04) 55px),
        #030503 !important;
    font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
}

body::before {
    background: none !important;
    mask-image: none !important;
}

body::after {
    background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(0, 0, 0, .2) 4px) !important;
    background-size: auto !important;
    opacity: .42 !important;
}

*,
*::before,
*::after { font-family: inherit !important; }

.page {
    width: min(1080px, 100%) !important;
    padding-top: 0 !important;
}

.topbar {
    min-height: 38px !important;
    margin-bottom: 10px !important;
    padding: 0 14px !important;
    border: 1px solid var(--line) !important;
    border-radius: 6px !important;
    background: #0d130e !important;
}

.topbar::before {
    content: "●  ●  ●";
    margin-right: auto;
    color: #667368;
    font-size: 10px;
    letter-spacing: 4px;
}

.back {
    order: 2;
    min-height: 32px !important;
    padding: 0 10px !important;
    border: 1px solid var(--line) !important;
    border-radius: 3px !important;
    color: var(--green) !important;
    background: transparent !important;
    font-size: 12px !important;
    text-transform: uppercase;
}

.back:hover,
.back:focus-visible {
    color: #071007 !important;
    background: var(--green) !important;
    outline: none;
}

.badge {
    order: 1;
    margin: 0 auto !important;
    padding: 0 !important;
    border: 0 !important;
    color: var(--muted) !important;
    background: transparent !important;
    font-size: 11px !important;
}

.badge span {
    background: var(--green) !important;
    box-shadow: 0 0 12px rgba(140, 255, 0, .7) !important;
}

.hero {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    margin-bottom: 18px !important;
}

.hero-panel,
.panel,
.stats,
.market-widget,
.note,
.legal-index {
    border: 1px solid var(--line) !important;
    border-radius: 6px !important;
    background: rgba(8, 13, 9, .96) !important;
    box-shadow: none !important;
}

.hero-panel,
.panel {
    position: relative;
    min-height: 0 !important;
    padding: 22px !important;
}

.eyebrow,
.label,
.category,
.location,
.tagline {
    color: var(--cyan) !important;
    letter-spacing: 0 !important;
}

h1,
h2,
h3 {
    color: var(--text) !important;
    letter-spacing: 0 !important;
}

h1 {
    font-size: clamp(1.9rem, 4vw, 3rem) !important;
    line-height: 1 !important;
}

.hero-copy {
    min-height: 0 !important;
    padding: 22px !important;
    border: 1px solid var(--line) !important;
    border-radius: 5px !important;
    background: rgba(8, 13, 9, .96) !important;
}

.hero-copy p,
.panel p {
    max-width: 760px !important;
    margin-top: 12px !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
}

.hero-panel {
    display: flex !important;
    min-height: 0 !important;
    align-items: center !important;
    gap: 16px !important;
    padding: 11px 14px !important;
}

.hero-panel strong {
    color: var(--green) !important;
    font-size: 22px !important;
}

.hero-panel span {
    max-width: none !important;
    font-size: 12px !important;
    line-height: 1.4 !important;
}

.stats {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
}

.stat {
    min-height: 0 !important;
    padding: 12px 14px !important;
    border: 0 !important;
    border-right: 1px solid var(--line) !important;
    border-radius: 0 !important;
    background: transparent !important;
}

.stat:last-child { border-right: 0 !important; }
.stat strong { margin-top: 4px !important; font-size: 20px !important; }

.hero p,
.description,
.content p,
.note p,
.legal-index p {
    color: var(--muted) !important;
}

.section-head {
    margin: 20px 0 10px !important;
    padding: 9px 0 !important;
    border-top: 1px dashed var(--line);
    border-bottom: 1px dashed var(--line);
}

.section-head .number {
    color: var(--green) !important;
    text-shadow: none !important;
    font-size: 20px !important;
}

.section-head h2 { font-size: 24px !important; }

.tools,
.restaurants,
.apps {
    gap: 12px !important;
}

.tool,
.restaurant,
.app-card {
    border: 1px solid var(--line) !important;
    border-radius: 5px !important;
    background: rgba(8, 13, 9, .96) !important;
    box-shadow: none !important;
}

.app-card {
    min-height: 0 !important;
    gap: 12px !important;
    padding: 15px !important;
}

.app-icon {
    width: 52px !important;
    height: 52px !important;
    font-size: 18px !important;
}

.app-card h2 {
    margin-top: 10px !important;
    font-size: 23px !important;
}

.app-card .tagline { margin-top: 5px !important; font-size: 11px !important; }
.app-card .description { margin-top: 9px !important; font-size: 12px !important; line-height: 1.45 !important; }
.app-card .category { min-height: 24px !important; font-size: 10px !important; }
.app-card .button { min-height: 36px !important; }

.app-actions {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 6px;
}

.app-actions a {
    display: inline-flex;
    min-height: 34px;
    align-items: center;
    justify-content: center;
    padding: 7px 9px;
    border: 1px solid var(--line);
    border-radius: 3px;
    color: var(--muted);
    background: transparent;
    font-size: 10px;
    font-weight: 800;
    text-decoration: none;
    text-transform: uppercase;
}

.app-actions a:first-child {
    border-color: rgba(37, 230, 255, .42);
    color: var(--cyan);
}

.app-actions a:hover,
.app-actions a:focus-visible {
    border-color: var(--green);
    color: #071007;
    background: var(--green);
    outline: none;
}

.tool { min-height: 0 !important; }
.tool .photo { min-height: 0 !important; height: 180px !important; }
.tool .content { padding: 14px !important; }
.tool h3 { font-size: 20px !important; }
.tool p { font-size: 12px !important; line-height: 1.45 !important; }

.restaurant {
    grid-template-columns: 1fr !important;
    min-height: 0 !important;
}

.restaurant .photo { display: none !important; }
.restaurant .content { padding: 18px !important; }
.restaurant h3 { font-size: 22px !important; }
.restaurant .note { font-size: 13px !important; line-height: 1.5 !important; }
.menu-box { padding: 11px !important; }

.restaurant:hover,
.app-card:hover,
.app-card:focus-visible {
    border-color: var(--green) !important;
    box-shadow: 0 0 30px rgba(140, 255, 0, .06) !important;
    transform: translateY(-2px) !important;
}

.tool,
.tool:hover {
    cursor: default !important;
    border-color: var(--line) !important;
    box-shadow: none !important;
    transform: none !important;
}

.photo,
.app-icon {
    border-radius: 3px !important;
}

.app-icon {
    border-color: var(--green) !important;
    color: var(--green) !important;
    background: #071007 !important;
    box-shadow: 4px 4px 0 rgba(140, 255, 0, .14) !important;
}

.category,
.meal,
.visit,
.button,
.legal-links a {
    border-radius: 3px !important;
}

.category,
.meal.ok {
    border-color: rgba(140, 255, 0, .38) !important;
    color: var(--green) !important;
    background: rgba(140, 255, 0, .06) !important;
}

.visit.primary,
.button {
    border-color: rgba(37, 230, 255, .42) !important;
    color: var(--cyan) !important;
    background: rgba(37, 230, 255, .06) !important;
}

.menu-box,
.meal-row,
.place-top {
    border-color: var(--line) !important;
    background: transparent !important;
}

.ticker-tape,
.market-widget,
.note {
    overflow: hidden;
}

.ticker-tape { min-height: 60px !important; }
.market-widget { padding: 10px !important; }
.note { padding: 14px !important; }
.note p { font-size: 12px !important; }

.legal-index {
    margin-top: 16px !important;
    padding: 15px !important;
}

.market-widget h2,
.note h2 {
    color: var(--green) !important;
}

.map-stage {
    overflow: hidden !important;
    border: 1px solid var(--line) !important;
    border-radius: 6px !important;
    box-shadow: none !important;
    min-height: min(620px, calc(100vh - 92px)) !important;
    max-height: 620px !important;
    background: #020503 !important;
}

.map-stage::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 450;
    pointer-events: none;
    background:
        linear-gradient(90deg, transparent calc(50% - .5px), rgba(140, 255, 0, .1) 50%, transparent calc(50% + .5px)),
        linear-gradient(0deg, transparent calc(50% - .5px), rgba(140, 255, 0, .1) 50%, transparent calc(50% + .5px)),
        repeating-radial-gradient(circle at center, transparent 0 84px, rgba(140, 255, 0, .08) 85px, transparent 86px);
}

#map { min-height: 100% !important; background: #020503 !important; }

.leaflet-tile-pane {
    filter: grayscale(1) sepia(.55) hue-rotate(58deg) saturate(.7) brightness(.48) contrast(1.45);
}

.landmark-pin {
    display: grid;
    width: 28px;
    height: 28px;
    place-items: center;
    border: 1px solid rgba(140, 255, 0, .78);
    border-radius: 50%;
    color: var(--green);
    background: rgba(2, 8, 4, .9);
    box-shadow: 0 0 0 3px rgba(140, 255, 0, .08), 0 0 18px rgba(140, 255, 0, .28);
    font-size: 14px;
    line-height: 1;
}

.leaflet-marker-icon:has(.landmark-pin) {
    transition: opacity .18s ease, transform .18s ease;
}

.map-stage > .panel {
    left: 14px !important;
    right: auto !important;
    bottom: 14px !important;
    width: min(300px, calc(100% - 28px)) !important;
    padding: 10px !important;
}

.current-card {
    border: 1px solid var(--green) !important;
    border-radius: 4px !important;
    background: rgba(5, 10, 6, .94) !important;
    box-shadow: 0 0 30px rgba(140, 255, 0, .1) !important;
}

.current-card::before {
    content: "CURRENT_NODE";
    display: block;
    margin-bottom: 8px;
    color: var(--green);
    font-size: 11px;
    font-weight: 800;
}

.leaflet-bar a,
.leaflet-control-zoom a {
    color: var(--green) !important;
    background: #080d09 !important;
}

.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
    color: var(--text) !important;
    background: #080d09 !important;
}

@media (max-width: 680px) {
    .page { padding: 8px !important; }
    .topbar::before { content: "● ● ●"; letter-spacing: 1px; }
    .badge { display: none !important; }
    .back { margin-left: auto; }
    .hero-panel,
    .panel,
    .hero-copy { padding: 17px 14px !important; }
    h1 { font-size: clamp(1.8rem, 9vw, 2.7rem) !important; }
    .stats { grid-template-columns: 1fr !important; }
    .stat { border-right: 0 !important; border-bottom: 1px solid var(--line) !important; }
    .stat:last-child { border-bottom: 0 !important; }
    .restaurant { grid-template-columns: 1fr !important; }
    .restaurant .photo { min-height: 180px !important; }
    .app-actions { grid-template-columns: 1fr 1fr; }
    .app-actions a:first-child { grid-column: 1 / -1; }
}