@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&display=swap');
:root{--bg:#0a0f08;--bg2:#0f1510;--fg:#b8ffcc;--green:#39ff88;--green-d:#1ea85a;--amber:#ffb454;--red:#ff5670;--dim:#5a7a60}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--bg);color:var(--fg);font-family:'JetBrains Mono',ui-monospace,Menlo,monospace;font-size:14px;line-height:1.55;min-height:100%}
body{background-image:
 linear-gradient(rgba(57,255,136,.03) 1px,transparent 1px),
 linear-gradient(90deg,rgba(57,255,136,.03) 1px,transparent 1px);
 background-size:24px 24px;
 position:relative}
body::before{content:"";position:fixed;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,.25) 3px,rgba(0,0,0,.25) 3px);z-index:100;mix-blend-mode:multiply}
a{color:var(--green);text-decoration:none}
a:hover{background:var(--green);color:var(--bg)}
.topbar{border-bottom:1px solid var(--green-d);padding:10px 20px;display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;background:var(--bg2)}
.topbar .brand{color:var(--green);font-weight:700}
.topbar .brand::before{content:"█ "}
.topbar nav{display:flex;gap:20px;font-size:13px}
.topbar nav a::before{content:"["}
.topbar nav a::after{content:"]"}
.status{font-size:12px;color:var(--dim)}
.status b{color:var(--amber)}
.wrap{max-width:1200px;margin:0 auto;padding:28px 20px 60px}
/* prompt header */
.prompt{color:var(--dim);margin-bottom:14px;font-size:13px}
.prompt b{color:var(--green)}
.prompt span{color:var(--amber)}
h1.ascii{color:var(--green);font-size:12px;line-height:1.1;white-space:pre;font-weight:700;margin-bottom:24px;overflow-x:auto}
/* table */
table{width:100%;border-collapse:collapse;font-size:13px;margin-top:16px}
thead th{text-align:left;padding:10px 12px;border-bottom:1px solid var(--green-d);color:var(--green);font-weight:700;text-transform:uppercase;letter-spacing:.05em;font-size:11px}
tbody td{padding:10px 12px;border-bottom:1px dashed #1a2518;color:var(--fg)}
tbody tr:hover{background:rgba(57,255,136,.06)}
tbody tr:hover td{color:var(--green)}
td.name{color:var(--green);font-weight:700}
td.rating{color:var(--amber)}
td.price{color:var(--fg);text-align:right}
.chip{display:inline-block;padding:1px 8px;border:1px solid var(--green-d);color:var(--green);font-size:11px;text-transform:uppercase;letter-spacing:.05em;margin-right:4px}
.tag-ipa{border-color:var(--amber);color:var(--amber)}
.tag-stout{border-color:#8a6a3a;color:#c89a5a}
.tag-trap{border-color:var(--red);color:var(--red)}
/* filter */
.filters{display:flex;gap:8px;flex-wrap:wrap;margin:20px 0;padding:12px;border:1px dashed var(--green-d);background:var(--bg2)}
.filters label{color:var(--dim);font-size:12px;margin-right:6px}
.filters button{background:transparent;border:1px solid var(--green-d);color:var(--fg);font-family:inherit;font-size:12px;padding:4px 10px;cursor:pointer}
.filters button:hover,.filters button.on{background:var(--green);color:var(--bg)}
/* detail */
.box{border:1px solid var(--green-d);padding:0;margin-bottom:18px;background:var(--bg2)}
.box > header{background:var(--green-d);color:var(--bg);padding:4px 12px;font-size:11px;text-transform:uppercase;letter-spacing:.1em;font-weight:700}
.box > .body{padding:14px 16px}
.kv{display:grid;grid-template-columns:140px 1fr;gap:6px 16px;font-size:13px}
.kv dt{color:var(--dim)}
.kv dd{color:var(--fg)}
.kv dd.hi{color:var(--green);font-weight:700}
.detail-grid{display:grid;grid-template-columns:360px 1fr;gap:20px}
@media(max-width:760px){.detail-grid{grid-template-columns:1fr}}
.ascii-art{white-space:pre;color:var(--amber);font-size:10px;line-height:1.1;padding:14px;background:#0a0f08;border:1px solid var(--green-d);overflow:auto}
.bar{height:8px;background:#1a2518;position:relative;margin:4px 0 10px}
.bar i{position:absolute;inset:0;background:var(--green);display:block}
pre.review{white-space:pre-wrap;border-left:2px solid var(--green);padding:6px 12px;margin:10px 0;color:var(--fg);font-size:13px}
pre.review b{color:var(--amber)}
/* map */
.map-grid{display:grid;grid-template-columns:280px 1fr;gap:16px;margin-top:14px}
@media(max-width:760px){.map-grid{grid-template-columns:1fr}}
.ascii-map{white-space:pre;font-size:10px;line-height:1.05;color:var(--green);background:var(--bg2);border:1px solid var(--green-d);padding:14px;overflow:auto}
.ascii-map b{color:var(--amber);font-weight:700}
.ascii-map .r{color:var(--red);font-weight:700}
/* footer */
footer{border-top:1px solid var(--green-d);margin-top:40px;padding:16px 20px;color:var(--dim);font-size:12px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;background:var(--bg2)}
footer b{color:var(--green)}
.blink{animation:bl 1s steps(2) infinite}
@keyframes bl{50%{opacity:0}}