/* Media Gallery: dark theme, white accents. Element ids used by app.js are unchanged. */
:root{--bg:#090b10;--bg2:#10131a;--panel:#141824;--panel2:#1a2030;--line:#2a3142;--line2:#3a4358;--fg:#f4f4f2;--mut:#9aa0ab;--acc:#ffffff;--acc2:#e8e8e4;--accbg:rgba(255,255,255,.1);--r:14px;--rs:10px;--tap:44px}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
html,body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
[hidden]{display:none!important}
a{color:var(--fg)}
code{background:#0e1117;border:1px solid var(--line);padding:0 5px;border-radius:5px;font-size:.92em}

.top{display:flex;flex-direction:column;align-items:center;padding:16px 12px 0;padding-top:max(14px,env(safe-area-inset-top));background:transparent;border:0}
.brand{width:min(640px,100%);text-align:center;font-weight:650;color:var(--fg);text-decoration:none;font-size:22px;letter-spacing:-.03em;line-height:1.15}

.bar{display:flex;gap:8px;width:min(640px,100%);margin:12px auto 0}
.field{position:relative;flex:1;min-width:0;display:flex}
.field input{flex:1;min-width:0;height:var(--tap);background:var(--panel);border:1px solid var(--line2);color:var(--fg);border-radius:12px;padding:0 40px 0 14px;font:inherit;font-size:16px;outline:none}
.field input::placeholder{color:#7d869a}
.field input:focus{border-color:#fff;box-shadow:0 0 0 3px var(--accbg)}
.clear{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:36px;height:36px;padding:0;border:0;background:none;color:var(--mut);font-size:15px;border-radius:50%}
.clear:hover{background:var(--panel2);color:var(--fg)}

button,.btn{font:inherit;font-size:15px;color:var(--fg);background:var(--panel2);border:1px solid var(--line2);border-radius:var(--rs);min-height:var(--tap);padding:0 16px;cursor:pointer;text-decoration:none;white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;gap:6px;-webkit-tap-highlight-color:transparent}
button:hover,.btn:hover{background-color:#232a3d}
button:focus-visible,.btn:focus-visible,select:focus-visible,summary:focus-visible{outline:2px solid #fff;outline-offset:2px}
.pri,.btn.pri{background:#fff;border-color:#fff;color:#111;font-weight:650}
.pri:hover,.btn.pri:hover{background:var(--acc2);border-color:var(--acc2)}
#go{min-width:64px}
button:disabled{opacity:.55;cursor:default}
select.btn{appearance:none;-webkit-appearance:none;padding-right:34px;background-image:linear-gradient(45deg,transparent 50%,var(--mut) 50%),linear-gradient(135deg,var(--mut) 50%,transparent 50%);background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;background-size:5px 5px;background-repeat:no-repeat}
.ghost{background:none;border:0;min-height:var(--tap);min-width:var(--tap);padding:0 8px;color:var(--mut)}
.ghost:hover{background:var(--panel2)}

main{padding:6px 12px 64px;max-width:760px;margin:0 auto}

.hero{max-width:640px;margin:18px auto 8px;text-align:center}
.hero h1{font-size:24px;line-height:1.25;margin:0 0 10px;letter-spacing:-.2px;font-weight:650}
.hero p{color:var(--mut);margin:0 auto 16px;max-width:640px;font-size:15px}
.sites{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;align-items:center}
.sites-l{color:var(--mut);font-size:13px;margin-right:2px;width:100%}
.chip{font-size:13px;color:#e6e6e2;background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:4px 11px}
@media(min-width:760px){.hero{margin-top:28px}.hero h1{font-size:30px}.sites-l{width:auto}.brand{font-size:24px}}

.status{color:var(--mut);margin:6px 0 14px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:15px}
.status:before{content:"";flex:none;width:16px;height:16px;border:2px solid var(--line2);border-top-color:#fff;border-radius:50%;animation:r .8s linear infinite}
.status.idle:before{display:none}
#zBox{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:10px 12px}
@keyframes r{to{transform:rotate(360deg)}}
.err{background:#2a1418;border:1px solid #5c2a33;color:#ffbdc5;border-radius:var(--r);padding:12px 16px;margin:8px 0 16px}
.warn{background:#272112;border:1px solid #574926;color:#ffe3ad;border-radius:var(--r);padding:11px 14px;margin:0 0 14px;font-size:14px}
.ok{background:#11251a;border:1px solid #285a39;color:#bdfccf;border-radius:var(--r);padding:10px 14px;margin:6px 0}
.fine{color:var(--mut);font-size:14px}

.meta{display:flex;flex-direction:column;gap:12px;margin:4px 0 14px}
.meta h1{font-size:19px;margin:0;line-height:1.3;word-break:break-word}
.sub{color:var(--mut);font-size:14px}
.acts{display:flex;flex-wrap:wrap;gap:8px}
.acts>.btn{flex:1 1 calc(50% - 4px);padding:0 10px}
.sortw{flex:1 1 calc(50% - 4px);display:flex;align-items:center;gap:8px}
.sortw select{flex:1;min-width:0}
@media(min-width:760px){.meta{flex-direction:row;align-items:flex-end;justify-content:space-between}.acts{justify-content:flex-end}.acts>.btn{flex:none;padding:0 16px}.sortw{flex:none}.sortw select{flex:none}}

.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:16px;margin:0 0 16px}
.panel h2{font-size:18px;margin:0 0 6px;letter-spacing:-.2px}
.ph{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:4px}
.row{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0}
.row>button,.row>.btn,.row>.bmbtn{flex:0 1 auto}
.row input{flex:1 1 200px;min-height:var(--tap);background:var(--bg2);border:1px solid var(--line2);color:var(--fg);border-radius:var(--rs);padding:0 12px;font:inherit;font-size:16px}
.row input:focus{outline:none;border-color:#fff;box-shadow:0 0 0 3px var(--accbg)}
.row .passwrap{position:relative;flex:1 1 200px;min-width:0;display:flex}
.row .passwrap input{width:100%;padding-right:42px}
.eye{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:36px;height:36px;min-height:36px;padding:0;border:0;background:none;color:var(--mut);border-radius:50%}
.eye:hover{background:var(--panel2);color:var(--fg)}
.eye svg{width:20px;height:20px;display:block;margin:auto;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.eye .slash{display:none}
.eye.off .open{display:none}
.eye.off .slash{display:block}
textarea{width:100%;background:var(--bg2);border:1px solid var(--line2);color:var(--fg);border-radius:var(--rs);padding:10px;font:13px ui-monospace,monospace;margin:8px 0}
.warn button,.panel p>button{margin:6px 6px 0 0}
details summary{cursor:pointer;color:var(--mut);font-size:14px;margin-top:8px;min-height:32px;display:flex;align-items:center;gap:6px;list-style:none}
details summary::-webkit-details-marker{display:none}
details summary:before{content:"▸";transition:transform .15s;display:inline-block}
details[open]>summary:before{transform:rotate(90deg)}
#ckForm{display:flex;flex-direction:column;align-items:flex-start}

.bmk{max-width:680px;margin:28px auto 0;padding:18px 16px 8px}
.kicker{margin:0 0 6px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#6e7482;font-weight:600}
.bmk .lead{color:var(--mut);margin:0 0 4px;font-size:15px}
.tools{display:grid}
.tool{padding:14px 0 4px;border-top:1px solid var(--line)}
.tool:first-child{border-top:0;padding-top:8px}
.tool:last-child{padding-bottom:0}
.tool h3{margin:0 0 4px;font-size:15px;font-weight:650}
.tool .fine{margin:0}
.tool .row{margin:10px 0 2px}
.tool details summary,.bmk>details summary{margin-top:2px;min-height:28px}
.bmk>details{margin:2px 0 0}
#bmCode[hidden],#dlCode[hidden],#mgCode[hidden]{display:none!important;height:0!important;min-height:0!important;margin:0!important;padding:0!important;border:0!important;overflow:hidden}
.bmbtn{display:inline-flex;align-items:center;min-height:var(--tap);background:#fff;color:#111;font-weight:700;padding:0 16px;border-radius:999px;text-decoration:none;cursor:grab}
.bmbtn:hover{background:var(--acc2)}
@media(max-width:420px){.tool .row>.btn,.tool .row>.bmbtn{flex:1 1 100%;justify-content:center}}

body:has(#meta:not([hidden])) .top,
body:has(#gallery:not(:empty)) .top{position:sticky;top:0;z-index:5;align-items:flex-start;background:rgba(9,11,16,.92);backdrop-filter:blur(12px);border-bottom:1px solid var(--line);padding:10px 12px}
body:has(#meta:not([hidden])) .brand,
body:has(#gallery:not(:empty)) .brand{width:auto;text-align:left;font-size:16px}
body:has(#meta:not([hidden])) .bar,
body:has(#gallery:not(:empty)) .bar{width:100%;max-width:760px;margin:8px auto 0}
/* saved logins (🔐) */
.top{position:relative}
/* ⋮ sits on the brand's line: a box exactly as tall as the brand line (same top as the header padding), button centred in it */
.tmenu{position:absolute;right:8px;top:max(14px,env(safe-area-inset-top));height:calc(22px * 1.15);display:flex;align-items:center;z-index:30}
@media(min-width:760px){.tmenu{height:calc(24px * 1.15)}}
body:has(#meta:not([hidden])) .tmenu,
body:has(#gallery:not(:empty)) .tmenu{top:10px;height:calc(16px * 1.15)}
.vopen{width:var(--tap);min-width:var(--tap);height:var(--tap);padding:0;background:none;border:0;border-radius:50%;color:#d9dce2;transition:background .15s,color .15s}
.vopen svg{display:block}
.vopen:hover,.vopen:focus-visible,.vopen:active{background:rgba(255,255,255,.08);color:#fff;outline:none}
.vopen.on{background:rgba(255,255,255,.1);color:#fff}
.autonote{font-size:14px}
.vchk{display:flex;gap:8px;align-items:center;color:var(--mut);font-size:14px;margin:8px 0 2px}
.vchk input{width:20px;height:20px;accent-color:#fff}
#vault input{width:100%;box-sizing:border-box;height:var(--tap);background:var(--bg2);border:1px solid var(--line2);color:var(--fg);border-radius:12px;padding:0 14px;font:inherit;font-size:16px;outline:none;margin:0 0 8px}
#vault input:focus{border-color:#fff;box-shadow:0 0 0 3px var(--accbg)}
.vrow{display:flex;gap:8px;flex-wrap:wrap}
#vPinF input{flex:1;min-width:0;margin:0;letter-spacing:.3em}
.vlist{list-style:none;margin:6px 0 14px;padding:0;display:flex;flex-direction:column;gap:8px}
.vlist li{display:flex;align-items:center;gap:8px;flex-wrap:wrap;background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:8px 8px 8px 14px}
.vlist .vd{flex:1;min-width:0;line-height:1.3}
.vlist .vd b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vlist .vd span{color:var(--mut);font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}
.vlist button{min-height:38px;padding:0 12px;font-size:14px}
.vlist .vq{color:#ffbdc5;font-size:14px;flex:1 1 100%}
.vlist .vrm{background:#5c2a33;border-color:#7a3a45;color:#fff}
.vlist .vnone{color:var(--mut);font-size:14px;background:none;border:1px dashed var(--line2);justify-content:center;padding:12px}
.vform h3{font-size:15px;margin:4px 0 8px;color:var(--mut);font-weight:600}
#vault .vsel{width:100%;margin:0 0 8px;justify-content:flex-start;text-align:left;font-size:16px}
.tmlist{position:absolute;right:0;top:calc(50% + 28px);min-width:180px;background:var(--panel);border:1px solid var(--line2);border-radius:12px;padding:4px;box-shadow:0 12px 32px rgba(0,0,0,.55);display:flex;flex-direction:column;gap:0}
.tmlist[hidden]{display:none}
.tmlist button{justify-content:flex-start;width:100%;background:none;border:0;border-radius:8px;min-height:42px;padding:0 12px;font-size:15px;color:var(--fg)}
.tmlist button:hover,.tmlist button:focus-visible{background:var(--panel2);outline:none}
#vault .passwrap{position:relative;display:flex;margin:0 0 8px}
#vault .passwrap input{margin:0;padding-right:42px}
/* phone: the Sort box spans the full row like the buttons above; the count sits inside it, left of the arrow */
@media(max-width:759px){.sortw{position:relative;flex:1 1 100%}.sortw select{width:100%;padding-right:96px}.sortw #sortN{position:absolute;right:36px;top:50%;transform:translateY(-50%);pointer-events:none;white-space:nowrap;max-width:45%;overflow:hidden;text-overflow:ellipsis}}
/* line icons on Zip / Folder / Log in (same style as the ⋮ menu) */
#zip,#fold,#lgOpen{gap:8px}#zip svg,#fold svg,#lgOpen svg{flex:none;display:block}
/* scanning: grey shimmer tiles where the grid will be (site-icons.js shows them while a scan runs and nothing is in the grid yet) */
@keyframes fgsh{0%{background-position:150% 0}100%{background-position:-50% 0}}
.skel{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:8px;margin-top:4px}.skel[hidden]{display:none}
.skel i{aspect-ratio:1/1;border-radius:10px;background:linear-gradient(100deg,#141824 30%,#222838 50%,#141824 70%);background-size:200% 100%;animation:fgsh 1.3s linear infinite}
@media(prefers-reduced-motion:reduce){.skel i{animation:none}}
/* phone: Zip and Folder always side by side (also with larger text: labels wrap to 2 lines, font size unchanged); Log in and Sort full width below */
@media(max-width:759px){.acts{display:grid;grid-template-columns:1fr 1fr}.acts>#lgOpen,.acts>.sortw{grid-column:1/-1}
  .acts>#zip,.acts>#fold{min-width:0;white-space:normal;line-height:1.2;padding:6px 8px;gap:6px;text-align:left}
  .skel{grid-template-columns:repeat(auto-fill,minmax(105px,1fr));gap:4px}} /* tiles: same columns as the real grid on a phone */

.hc{margin:12px 0 4px}
#hcBox{margin-top:8px}
#hcPic{position:relative;width:100%;max-width:412px;aspect-ratio:412/760;border:1px solid var(--line2);border-radius:10px;overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none;background:var(--bg2)}
#hcImg{display:block;width:100%;height:100%;object-fit:contain;touch-action:none;cursor:pointer;user-select:none;-webkit-user-drag:none}
#hcTrail{display:none}
#hcSt{margin:8px 0}
#hc.run #hcSt{min-height:4.6em;box-sizing:border-box}
/* message boxes under the link row: a clear gap above (same as between panels), so they never touch the input / Go button at large text */
#autoNote,#err,#warn{margin-top:16px}

/* order flip (icon only): arrow points down = first to last; flipped + highlighted = last to first */
#order{flex:none;width:var(--tap);padding:0}#order svg{transition:transform .2s}#order[aria-pressed=true]{border-color:var(--acc);background:var(--accbg)}#order[aria-pressed=true] svg{transform:scaleY(-1)}
@media(max-width:759px){.sortw #sortN{right:88px}}
/* Download to folder: the long server path wraps inside the box instead of running off the edge */
#fServer{display:block;white-space:normal;width:100%;max-width:100%;flex:1 1 100%;height:auto;padding:10px 12px;text-align:center;overflow-wrap:break-word}.fpath{display:block;overflow-wrap:anywhere}

/* "Open posted links" tick under the link box (unticked: only the thread's own media, its posted bunkr/gofile/... links are not opened) */
.plkw{width:min(640px,100%);margin:12px auto 0}
.plk{display:inline-flex;align-items:center;gap:8px;font-size:15px;line-height:22px;color:var(--fg);cursor:pointer;-webkit-tap-highlight-color:transparent;position:relative}
.plk input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.plk .bx{width:22px;height:22px;flex:none;box-sizing:border-box;border-radius:7px;border:1.5px solid var(--line2);background:var(--panel2);display:inline-flex;align-items:center;justify-content:center;transition:background .15s,border-color .15s}
.plk .bx svg{opacity:0;transition:opacity .15s}
.plk input:checked+.bx{background:#fff;border-color:#fff}.plk input:checked+.bx svg{opacity:1}
.plk input:focus-visible+.bx{outline:2px solid #fff;outline-offset:2px}
.plk>span:last-child{display:block}