:root{--ink:#0f172a;--mut:#64748b;--line:#e2e8f0;--bg:#f4f5fb;--card:#fff;--acc:#4f46e5;--acc2:#7c3aed;--ok:#16a34a;--gold:#f59e0b;
  --r:16px;--sh:0 1px 2px #0f172a0d,0 4px 14px #0f172a12;--sh2:0 2px 4px #0f172a14,0 14px 34px #0f172a26}
*{box-sizing:border-box} html{overflow-x:clip}
body{font-family:Inter,"Segoe UI",system-ui,-apple-system,sans-serif;margin:0 auto;max-width:1280px;padding:0 20px 70px;background:var(--bg);color:var(--ink);
  -webkit-font-smoothing:antialiased}
a{color:var(--acc)}
h1{margin:0;font-size:clamp(24px,3.6vw,38px);letter-spacing:-.02em;line-height:1.15} h2{margin-top:30px;letter-spacing:-.01em}
h3{font-size:16px;margin:0;line-height:1.3} small{display:block;color:var(--mut);font-size:11px}
.sub,.muted{color:var(--mut);font-size:14px}

/* ---------- hero header ---------- */
header{position:relative;margin:0 calc(50% - 50vw);padding:34px calc(50vw - 50% + 20px) 0;color:#fff;overflow:hidden;
  background:radial-gradient(1200px 400px at 85% -10%,#a855f755,transparent 60%),radial-gradient(900px 300px at 10% 0%,#3b82f655,transparent 60%),
  linear-gradient(160deg,#0b1026 0%,#1e1b4b 55%,#312e81 100%)}
header::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.55;
  background-image:radial-gradient(1.5px 1.5px at 12% 30%,#fff,transparent),radial-gradient(1px 1px at 28% 70%,#fff,transparent),
  radial-gradient(1.5px 1.5px at 46% 22%,#fff,transparent),radial-gradient(1px 1px at 63% 58%,#fff,transparent),radial-gradient(1.2px 1.2px at 77% 35%,#fff,transparent),
  radial-gradient(1px 1px at 90% 72%,#fff,transparent),radial-gradient(1px 1px at 5% 80%,#fff,transparent),radial-gradient(1.3px 1.3px at 55% 85%,#fff,transparent)}
header > *{position:relative}
header .sub{color:#c7d2fe;margin:8px 0 0;max-width:900px}
nav{display:flex;gap:6px;flex-wrap:wrap;margin-top:22px}
nav a{color:#e0e7ff;text-decoration:none;padding:10px 16px;border-radius:12px 12px 0 0;font-weight:500;font-size:15px;transition:background .15s}
nav a:hover{background:#ffffff14} nav a.on{background:var(--bg);color:var(--ink);font-weight:650}
nav #logout{margin-left:auto;color:#a5b4fc;font-size:14px}

/* ---------- vote bar ---------- */
.bar{position:sticky;top:0;z-index:500;margin:0 -20px;padding:12px 20px;display:flex;gap:12px;align-items:center;flex-wrap:wrap;
  background:#f4f5fbe6;backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line)}
.bar label{font-size:14px;font-weight:500} .grow{flex:1}
.bar input:not([type=checkbox]){padding:8px 12px;border:1px solid var(--line);border-radius:10px;font-size:14px;margin-left:6px;width:190px;background:#fff}
input:focus,select:focus{outline:2px solid #a5b4fc;outline-offset:1px}
button{padding:8px 14px;border-radius:10px;border:1px solid var(--line);background:#fff;cursor:pointer;font-size:14px;font-weight:500;color:var(--ink);
  transition:transform .1s,box-shadow .15s,filter .15s}
button:hover{box-shadow:var(--sh)} button:active{transform:translateY(1px)}
button.primary{background:linear-gradient(135deg,var(--acc),var(--acc2));color:#fff;border-color:transparent;box-shadow:0 4px 14px #4f46e555}
.msg{min-height:1.2em;font-size:14px;margin:6px 0} .msg.ok{color:var(--ok)} .msg.err,.err{color:#dc2626}

/* ---------- intro + filters ---------- */
.howto{background:linear-gradient(135deg,#eef2ff,#faf5ff);border:1px solid #e0e7ff;border-radius:var(--r);padding:14px 18px;font-size:14px;line-height:1.55;margin:14px 0 8px}
.filters{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:12px 0;font-size:13.5px;background:var(--card);border-radius:var(--r);padding:12px;box-shadow:var(--sh)}
.filters label{display:inline-flex;gap:6px;align-items:center;background:#f8fafc;border:1px solid var(--line);border-radius:999px;padding:4px 6px 4px 12px;color:#334155}
.filters label.chk{padding:6px 12px;cursor:pointer} .filters label.chk:has(input:checked){background:#eef2ff;border-color:#c7d2fe;color:#3730a3}
.filters select,.filters input:not([type=checkbox]){padding:5px 8px;border-radius:999px;border:none;background:#fff;font-size:13.5px;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
.filters input:not([type=checkbox]){width:170px}
.filters input[type=checkbox]{accent-color:var(--acc)}
#n{font-weight:500;color:#475569;margin:6px 2px 12px}
#map{height:540px;border-radius:var(--r);margin:8px 0 18px;box-shadow:var(--sh);border:1px solid var(--line)}

/* ---------- cards ---------- */
.g{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:20px}
.c{background:var(--card);border-radius:var(--r);overflow:hidden;box-shadow:var(--sh);display:flex;flex-direction:column;outline:3px solid transparent;
  transition:transform .18s ease,box-shadow .18s ease}
.c:hover{transform:translateY(-3px);box-shadow:var(--sh2)}
.c.ap{outline-color:#22c55e} .c.fav{outline-color:var(--gold)}
.ph{position:relative}
.strip{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;height:200px;background:linear-gradient(135deg,#e2e8f0,#cbd5e1)}
.strip::-webkit-scrollbar{display:none}
.strip img{flex:0 0 100%;width:100%;height:200px;object-fit:cover;display:block;scroll-snap-align:start}
.strip.noph{align-items:center;justify-content:center;color:var(--mut);font-size:13px}
.ph::after{content:"";position:absolute;inset:auto 0 0 0;height:50px;background:linear-gradient(transparent,#0006);pointer-events:none}
.ph button{position:absolute;top:50%;transform:translateY(-50%);width:34px;height:34px;padding:0;border:none;border-radius:50%;z-index:2;
  background:#fffffff0;font-size:22px;line-height:32px;box-shadow:0 2px 8px #0004;opacity:0;transition:opacity .15s}
.c:hover .ph button{opacity:1} .ph .pv{left:10px} .ph .nx{right:10px}
.ph .n{position:absolute;bottom:9px;right:10px;z-index:2;background:#0009;color:#fff;font-size:11px;padding:2px 8px;border-radius:9px;backdrop-filter:blur(4px)}
@media (hover:none){.ph button{display:none}}
.b{padding:12px 14px 14px;display:flex;flex-direction:column;gap:8px;flex:1}
.k{font-size:12px;color:var(--mut);display:flex;justify-content:space-between;gap:6px;align-items:flex-start}
.k span{display:inline-flex;gap:4px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
h3 a{color:inherit;text-decoration:none} h3 a:hover{color:var(--acc)} .ext{color:var(--acc);font-size:13px}
.s{font-size:13px;color:#475569;line-height:1.5} .s a{color:var(--acc)}
.pr{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.pr b{font-size:20px;letter-spacing:-.01em} .pr span{color:var(--mut);font-size:13px} .pr .on{font-size:14px;color:#475569;font-weight:600}
.bd{background:#f1f5f9;color:#475569;border-radius:999px;padding:2px 9px;font-size:11.5px;font-weight:500;white-space:nowrap}
.bd.ok{background:#dbeafe;color:#1d4ed8} .bd.warn{background:#fee2e2;color:#b91c1c} .bd.gf{background:#fef3c7;color:#92400e}
.bd.src{background:#eef2ff;color:#4338ca} .bd.src.ab{background:#ffe4e6;color:#be123c}
.wl{display:flex;gap:5px;flex-wrap:wrap} .wl .bd{font-size:11px;background:#f8fafc;border:1px solid var(--line)}
.dr{font-size:12px;display:flex;gap:5px;flex-wrap:wrap;align-items:center}
.dr span{background:#f1f5f9;border-radius:999px;padding:2px 8px;color:#334155} .dr span.near{background:#dcfce7;color:#166534;font-weight:600}

/* price grid */
table.pg{width:100%;border-collapse:separate;border-spacing:3px;font-size:12px;table-layout:fixed;background:#f8fafc;border-radius:12px;padding:4px}
table.pg th{font-weight:600;color:#94a3b8;font-size:10.5px;text-align:center;padding:2px;text-transform:uppercase;letter-spacing:.03em}
table.pg td{text-align:center;padding:4px 1px;border-radius:8px;background:#fff}
table.pg td a{color:#0f766e;font-weight:650;text-decoration:none;display:block} table.pg td a:hover{color:var(--acc)}
table.pg td small{font-size:10px;font-weight:500}
table.pg td.na{color:#cbd5e1;background:transparent} table.pg td.fr{color:var(--ok);font-weight:700;background:#f0fdf4}
table.pg td.best{background:#dcfce7;box-shadow:inset 0 0 0 1px #86efac} table.pg td.sel{box-shadow:inset 0 0 0 2px var(--acc)}
.ask{background:#f8fafc;border:1px dashed #cbd5e1;border-radius:12px;padding:10px 12px;font-size:13px;color:#334155}
.nt{color:var(--mut);font-size:11px;cursor:help;line-height:1.4}

/* vote buttons */
.vote{display:flex;gap:8px;margin-top:auto;padding-top:4px}
.vote label{flex:1;text-align:center;border:1px solid var(--line);border-radius:12px;padding:9px 4px;cursor:pointer;font-size:14px;font-weight:500;user-select:none;
  transition:background .15s,border-color .15s}
.vote label:hover{background:#f8fafc}
.vote input{display:none} .vote label.on.a{background:#dcfce7;border-color:#22c55e;color:#166534} .vote label.on.f{background:#fef3c7;border-color:var(--gold);color:#92400e}
.more{text-align:center;margin:26px} .more button{padding:11px 28px;border-radius:999px}
.g.one{grid-template-columns:1fr}
/* single place in the dialog: big photos (whole image, no crop), details next to it */
.g.one .c{flex-direction:row;box-shadow:none;outline:none} .g.one .c:hover{transform:none;box-shadow:none}
.g.one .ph{flex:0 0 62%;background:#0f172a;border-radius:14px;overflow:hidden;align-self:flex-start}
.g.one .strip{height:auto;aspect-ratio:3/2;max-height:72vh;background:#0f172a}
.g.one .strip img{height:100%;object-fit:contain}
.g.one .ph::after{display:none}
.g.one .ph button{opacity:.9;width:42px;height:42px;font-size:26px;line-height:40px}
.g.one .b{padding:4px 4px 4px 22px;overflow:auto;max-height:72vh}
@media (max-width:900px){.g.one .c{flex-direction:column} .g.one .ph{flex:none;width:100%} .g.one .b{padding:14px 2px 4px;max-height:none}}

/* ---------- boxes, tables, dates ---------- */
.box{background:var(--card);border-radius:var(--r);padding:18px 22px;box-shadow:var(--sh);font-size:14px}
.res{width:100%;border-collapse:collapse;background:var(--card);border-radius:var(--r);overflow:hidden;font-size:14px;box-shadow:var(--sh)}
.res th{background:#f8fafc;color:#475569;font-weight:600;font-size:12.5px;text-transform:uppercase;letter-spacing:.03em}
.res td,.res th{padding:10px 12px;border-top:1px solid var(--line);text-align:left;vertical-align:middle}
.res tr:hover td{background:#fafbff} .res img{width:96px;height:64px;object-fit:cover;border-radius:10px}
.barw{background:#eef2f7;border-radius:999px;height:8px;width:140px;margin:4px 0} .barw div{background:linear-gradient(90deg,#22c55e,#16a34a);height:8px;border-radius:999px}
.who{font-size:12px;color:var(--mut)}
.res a[data-item],.opt a,.apl{color:var(--acc);cursor:pointer;font-weight:500}
.av{display:flex;gap:14px 20px;flex-wrap:wrap;align-items:flex-end;margin:12px 0} .av label{display:flex;flex-direction:column;gap:6px;font-size:14px;font-weight:500}
.av input{padding:8px 10px;border:1px solid var(--line);border-radius:10px;font-size:14px} .av span{display:flex;gap:6px} .av .msg{flex-basis:100%;margin:0}
.sum{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin:14px 0} .sum .box h3{margin-bottom:6px}
.sum .big{font-size:21px;font-weight:700;margin:4px 0;letter-spacing:-.01em}
.sum .box.good{border-top:4px solid #22c55e} .sum .box.bad{border-top:4px solid #dc2626}
.tl{background:var(--card);border-radius:var(--r);padding:14px 16px;box-shadow:var(--sh);font-size:13px}
.tl .row{display:flex;align-items:center;gap:8px;margin:6px 0} .tl .nm{flex:0 0 90px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}
.tl .tr2{position:relative;flex:1;height:22px;background:#f1f5f9;border-radius:999px}
.tl .seg{position:absolute;top:3px;bottom:3px;background:linear-gradient(90deg,#818cf8,#6366f1);border-radius:999px}
.tl .ov{position:absolute;top:0;bottom:0;z-index:1;background:#22c55e33;border-left:2px solid #16a34a;border-right:2px solid #16a34a}
.tl .ax{position:relative;flex:1;height:16px;font-size:10px;color:var(--mut)} .tl .ax span{position:absolute;transform:translateX(-50%)}
.opt td,.opt th{padding:8px 10px;border-top:1px solid var(--line);text-align:left;vertical-align:top}
dialog{max-width:1100px;width:94vw;border:none;border-radius:20px;padding:20px 24px;box-shadow:0 20px 60px #0f172a55}
dialog::backdrop{background:#0f172a99;backdrop-filter:blur(3px)}
dialog h3{margin-top:14px}

#saved.ok{color:var(--ok);font-weight:600}
#namedlg{max-width:420px;padding:26px 28px} .namef h2{margin:0 0 6px} .namef p{color:var(--mut);font-size:14px;margin:0 0 14px}
.namef input{width:100%;padding:11px;border:1px solid var(--line);border-radius:12px;font-size:15px;margin-bottom:12px}
.namef button{width:100%;padding:11px;border-radius:12px;font-size:15px}

/* ---------- login ---------- */
body.login{display:flex;align-items:center;justify-content:center;min-height:100vh;max-width:none;
  background:radial-gradient(900px 400px at 80% 0%,#a855f755,transparent 60%),linear-gradient(160deg,#0b1026,#1e1b4b 55%,#312e81)}
body.login .box{max-width:380px;width:100%;padding:28px;border-radius:20px;box-shadow:0 20px 60px #0008}
body.login h1{font-size:26px} body.login input{width:100%;padding:11px;margin:10px 0;border:1px solid var(--line);border-radius:12px;font-size:15px}
body.login button{width:100%;background:linear-gradient(135deg,var(--acc),var(--acc2));color:#fff;border:none;padding:11px;border-radius:12px;font-size:15px}

@media (max-width:700px){
  body{padding:0 12px 60px} header{padding:24px calc(50vw - 50% + 12px) 0}
  .bar{position:static;margin:0 -12px;padding:10px 12px} .bar input:not([type=checkbox]){width:150px}
  nav a{padding:9px 11px;font-size:14px} nav #logout{margin-left:0}
  .filters label{flex:1 1 auto} .g{gap:14px} .strip,.strip img{height:210px}
}