:root {
  --bg:#f4f1ec;--ink:#1a1a1a;--muted:#8a8580;--line:rgba(26,26,26,0.08);
  --bar-bg:rgba(244,241,236,0.88);--card-bg:#ece8e2;--modal-bg:rgba(244,241,236,0.97);
  --viewer-bg:rgba(0,0,0,0.93);--accent:#c44;--gap:5px;--cols:5;
  --mono:'JetBrains Mono','SF Mono','Consolas',monospace;
  --serif:'Cormorant Garamond','Georgia',serif;
  --bar-h:38px;
}
.dark {
  --bg:#0a0a0a;--ink:#d4d0cc;--muted:#5a5550;--line:rgba(255,255,255,0.06);
  --bar-bg:rgba(10,10,10,0.9);--card-bg:#141414;--modal-bg:rgba(18,18,18,0.97);
  --viewer-bg:rgba(0,0,0,0.96);--accent:#e55;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg);color:var(--ink);font-family:var(--mono);font-size:11px;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
body{min-height:100dvh;overflow-x:hidden}

/* ── TOPBAR ── */
#bar{position:fixed;top:0;left:0;right:0;height:var(--bar-h);display:flex;align-items:center;justify-content:space-between;padding:0 12px;background:var(--bar-bg);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);z-index:100;border-bottom:1px solid var(--line);user-select:none}
.wm{font-family:var(--serif);font-size:16px;font-weight:600;letter-spacing:-0.02em}
.nav{display:flex;gap:2px;align-items:center}
.nav button{background:none;border:none;color:var(--muted);font-size:14px;width:32px;height:32px;display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:4px;transition:color .15s,background .15s;font-family:var(--mono)}
.nav button:hover{color:var(--ink);background:var(--line)}

/* ── FEED ── */
#feed{column-count:var(--cols);column-gap:var(--gap);padding:calc(var(--bar-h) + var(--gap)) var(--gap) var(--gap);min-height:100vh}

/* ── CARD ── */
.c{break-inside:avoid;margin-bottom:var(--gap);position:relative;background:var(--card-bg);overflow:hidden;cursor:pointer}
.c img{width:100%;display:block;opacity:0;transition:opacity .3s}
.c img.ok{opacity:1}
/* hover overlay */
.c .ho{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:center;gap:6px;padding:8px;opacity:0;transition:opacity .2s;background:linear-gradient(transparent 50%,rgba(0,0,0,0.45))}
.c:hover .ho{opacity:1}
.ho button{background:rgba(255,255,255,0.15);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,0.15);color:rgba(255,255,255,0.9);width:36px;height:36px;border-radius:50%;font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s;font-family:var(--mono)}
.ho button:hover{background:rgba(255,255,255,0.3);color:#fff}
.ho .hl{color:var(--accent)}
.ho .hd{color:#888}
/* badge */
.c .badge{position:absolute;top:6px;right:6px;width:16px;height:16px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:8px;pointer-events:none;z-index:2}
.badge.bl{background:rgba(200,60,60,0.85);color:#fff}
.badge.bd{background:rgba(0,0,0,0.5);color:#fff}
/* hide disliked from view */
.c.killed{display:none}

/* ── LOADER ── */
#loader{display:flex;justify-content:center;gap:6px;padding:40px 0 60px}
#loader.off{display:none}
.dot{width:4px;height:4px;border-radius:50%;background:var(--muted);animation:p 1s ease-in-out infinite}
.dot:nth-child(2){animation-delay:.15s}.dot:nth-child(3){animation-delay:.3s}
@keyframes p{0%,100%{opacity:.2;transform:scale(.8)}50%{opacity:1;transform:scale(1)}}

/* ── VIEWER ── */
#vw{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center}
#vw.on{display:flex}
#vwBg{position:absolute;inset:0;background:var(--viewer-bg)}
#vwImg{position:relative;max-width:92vw;max-height:88dvh;object-fit:contain;z-index:1;user-select:none}
#vwBar{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);display:flex;gap:4px;padding:4px;background:rgba(255,255,255,0.1);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-radius:24px;border:1px solid rgba(255,255,255,0.08);z-index:2}
.vb{background:none;border:none;color:rgba(255,255,255,0.7);font-size:15px;width:40px;height:40px;display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:50%;transition:all .15s;text-decoration:none;font-family:var(--mono)}
.vb:hover{color:#fff;background:rgba(255,255,255,0.1)}
.vb.al{color:var(--accent)}.vb.ad{color:#888}
.vn{font-size:22px;font-weight:300}
#vwSt{position:absolute;top:16px;left:50%;transform:translateX(-50%);color:rgba(255,255,255,0.5);font-size:10px;letter-spacing:.1em;z-index:2;pointer-events:none}

/* ── SAVE MODAL ── */
#sm{position:fixed;inset:0;z-index:300;display:none;align-items:center;justify-content:center}
#sm.on{display:flex}
.mbg{position:absolute;inset:0;background:rgba(0,0,0,0.5)}
.mbox{position:relative;width:320px;max-height:400px;background:var(--modal-bg);backdrop-filter:blur(20px);border:1px solid var(--line);border-radius:12px;overflow:hidden;display:flex;flex-direction:column}
.mhd{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;border-bottom:1px solid var(--line);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.mhd button{background:none;border:none;color:var(--muted);font-size:16px;cursor:pointer}
#fl{flex:1;overflow-y:auto;padding:4px 0}
.fi{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;cursor:pointer;transition:background .1s;font-size:12px}
.fi:hover{background:var(--line)}
.fi .ct{color:var(--muted);font-size:10px}
.fi.in{color:var(--accent)}
.mnw{display:flex;gap:6px;padding:10px 14px;border-top:1px solid var(--line)}
.mnw input{flex:1;background:transparent;border:1px solid var(--line);border-radius:6px;padding:8px 10px;font-family:var(--mono);font-size:11px;color:var(--ink);outline:none}
.mnw input:focus{border-color:var(--muted)}
.mnw button{background:none;border:1px solid var(--line);border-radius:6px;width:34px;cursor:pointer;color:var(--muted);font-size:16px;font-family:var(--mono)}

/* ── PANEL ── */
#pn{position:fixed;inset:0;z-index:250;display:none}
#pn.on{display:block}
.pnBg{position:absolute;inset:0;background:rgba(0,0,0,0.3)}
.pnC{position:absolute;right:0;top:0;bottom:0;width:340px;max-width:90vw;background:var(--modal-bg);backdrop-filter:blur(20px);border-left:1px solid var(--line);display:flex;flex-direction:column;animation:si .2s ease}
@keyframes si{from{transform:translateX(100%)}to{transform:translateX(0)}}
.pnH{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid var(--line);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.pnH button{background:none;border:none;color:var(--muted);font-size:16px;cursor:pointer}
.pnU{padding:14px 16px;border-bottom:1px solid var(--line);font-size:10px;color:var(--muted);display:flex;justify-content:space-between;align-items:center}
.pnU button{background:none;border:none;color:var(--muted);font-family:var(--mono);font-size:10px;cursor:pointer;text-transform:uppercase;letter-spacing:.06em}
.pnU button:hover{color:var(--accent)}
#pl{flex:1;overflow-y:auto;padding:4px 0}
.pf{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;cursor:pointer;transition:background .1s;font-size:12px}
.pf:hover{background:var(--line)}
.pf .fc{color:var(--muted);font-size:10px}
.pfd{background:none;border:none;color:var(--muted);font-size:10px;cursor:pointer;opacity:0;transition:opacity .15s}
.pf:hover .pfd{opacity:1}.pfd:hover{color:var(--accent)}
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;padding:8px 16px}
.pgrid img{width:100%;aspect-ratio:1;object-fit:cover;cursor:pointer;border-radius:2px}
.pnF{padding:12px 16px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center}
#pnBk{background:none;border:none;color:var(--muted);font-family:var(--mono);font-size:10px;cursor:pointer}
#pnBk.off{display:none}
.pa{display:flex;gap:8px}
.pa button,.pa .fl{background:none;border:none;color:var(--muted);font-family:var(--mono);font-size:10px;cursor:pointer;text-transform:uppercase;letter-spacing:.08em}
.pa button:hover,.pa .fl:hover{color:var(--ink)}

/* ── RESPONSIVE ── */
@media(max-width:1400px){:root{--cols:4}}
@media(max-width:1000px){:root{--cols:3}}
@media(max-width:680px){:root{--cols:2;--gap:3px}#vwBar{bottom:max(12px,env(safe-area-inset-bottom))}.vb{width:44px;height:44px}.ho button{width:40px;height:40px}}
@media(hover:none){.vb{width:48px;height:48px;font-size:17px}.vn{font-size:26px}.c .ho{opacity:1;background:linear-gradient(transparent 60%,rgba(0,0,0,0.35))}}
::-webkit-scrollbar{width:4px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--line);border-radius:4px}
.toast{position:fixed;bottom:70px;left:50%;transform:translateX(-50%);background:var(--ink);color:var(--bg);font-family:var(--mono);font-size:10px;letter-spacing:.06em;padding:8px 16px;border-radius:20px;z-index:400;pointer-events:none;animation:ti .2s ease,to .3s ease 1.2s forwards}
@keyframes ti{from{opacity:0;transform:translateX(-50%) translateY(8px)}}
@keyframes to{to{opacity:0;transform:translateX(-50%) translateY(-4px)}}

#loadMore {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  line-height: 1;
  display: block;
  margin: 20px auto;
  padding: 0;
  font-size: 20px;
  background: transparent;
  border: 1px solid #999;
  border-radius: 50%;
  cursor: pointer;
  opacity: 0.3;
  transition: opacity 0.2s;
}
#loadMore:hover { opacity: 0.7; }
#loadMore.hidden { display: none; }