*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  --gold:#FFE81F;--gold-l:#FFFF55;--gold-d:#D4C000;
  --bg:#000000;--bg2:#080808;--bg3:#111111;--bg4:#1A1A1A;
  --dim:#555555;--mid:#888888;--bright:#EAEAEA;
  --radius:0px;
}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--bright);font-family:'Inter',sans-serif;min-height:100vh;overflow-x:hidden}
body::before{content:'';position:fixed;inset:0;
  background: 
    radial-gradient(var(--bg2) 15%, transparent 16%) 0 0,
    radial-gradient(var(--bg2) 15%, transparent 16%) 4px 4px,
    radial-gradient(rgba(255,255,255,.03) 15%, transparent 20%) 0 1px,
    radial-gradient(rgba(255,255,255,.03) 15%, transparent 20%) 4px 5px;
  background-size:8px 8px; background-color:var(--bg);
  pointer-events:none;z-index:0;}
.app{position:relative;z-index:1;min-height:100vh;display:flex;flex-direction:column}

/* ── TOPBAR ── */
.topbar{display:flex;align-items:center;justify-content:space-between;padding:.9rem 2rem;
  background:rgba(5,5,5,.92);border-bottom:1px solid rgba(240,216,58,.12);
  position:sticky;top:0;z-index:100;backdrop-filter:blur(14px);gap:1rem}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;flex-shrink:0}
.logo-name{font-family:'Orbitron',sans-serif;font-size:.95rem;color:var(--gold);letter-spacing:.1em}
.logo-tag{font-family:'Orbitron',sans-serif;font-size:.48rem;color:var(--dim);letter-spacing:.3em;text-transform:uppercase;margin-top:3px;display:block}
.search-wrap{flex:1;max-width:480px;position:relative}
.search-input{width:100%;background:var(--bg3);border:1px solid rgba(255,255,255,.08);border-radius:0;clip-path:polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
  color:var(--bright);font-size:.85rem;padding:.55rem 1rem .55rem 2.5rem;outline:none;transition:border-color .2s}
.search-input:focus{border-color:rgba(240,216,58,.4);box-shadow:0 0 12px rgba(240,216,58,.1)}
.search-input::placeholder{color:var(--dim)}
.search-icon{position:absolute;left:.75rem;top:50%;transform:translateY(-50%);color:var(--dim);font-size:.9rem;pointer-events:none}
.topbar-actions{display:flex;gap:.7rem;align-items:center}
.btn{clip-path:polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);font-family:'Orbitron',sans-serif;font-size:.65rem;letter-spacing:.18em;text-transform:uppercase;
  padding:.5rem 1.2rem;border:1px solid rgba(255,255,255,.1);color:var(--mid);
  background:var(--bg3);cursor:pointer;border-radius:var(--radius);transition:all .2s;white-space:nowrap}
.btn:hover{border-color:rgba(240,216,58,.4);color:var(--gold);box-shadow:0 0 10px rgba(240,216,58,.15)}
.btn-gold{border-color:var(--gold);color:var(--gold);background:transparent}
.btn-gold:hover{background:var(--gold);color:var(--bg)}
.hidden{display:none!important}

/* ── ADMIN BAR (only visible to admin) ── */
.admin-bar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.5rem;
  padding:.6rem 2rem;background:rgba(240,216,58,.05);border-bottom:1px solid rgba(240,216,58,.1)}
.admin-info{font-size:.72rem;color:var(--dim)}
.admin-info strong{color:var(--gold)}

/* ── STATS BAR (visible to all) ── */
.stats-bar{display:flex;align-items:center;gap:1.5rem;padding:.55rem 2rem;
  background:var(--bg2);border-bottom:1px solid rgba(255,255,255,.04);font-size:.72rem;color:var(--dim)}
.stats-bar strong{color:var(--mid)}

/* ── CATEGORY BAR ── */
.cat-bar{display:flex;align-items:center;gap:.5rem;padding:.8rem 2rem;
  background:rgba(11,11,14,.92);border-bottom:1px solid rgba(255,255,255,.05);overflow-x:auto;scrollbar-width:none;
  position:sticky;top:60px;z-index:90;backdrop-filter:blur(12px)}
.cat-bar::-webkit-scrollbar{display:none}
.cat-pill{font-family:'Orbitron',sans-serif;font-size:.62rem;letter-spacing:.15em;text-transform:uppercase;
  padding:.38rem .95rem;border:1px solid rgba(255,255,255,.07);color:var(--dim);
  background:var(--bg3);cursor:pointer;border-radius:20px;transition:all .2s;white-space:nowrap;flex-shrink:0}
.cat-pill:hover{color:var(--mid);border-color:rgba(255,255,255,.15)}
.cat-pill.active{background:var(--gold);color:var(--bg);border-color:var(--gold);font-weight:600}

/* ── TOOLBAR ── */
.toolbar{display:flex;align-items:center;justify-content:space-between;padding:.7rem 2rem;gap:1rem}
.count{font-size:.78rem;color:var(--dim)}
.count strong{color:var(--gold)}
.sort-select{background:var(--bg3);border:1px solid rgba(255,255,255,.08);color:var(--mid);
  font-size:.76rem;padding:.35rem .7rem;border-radius:var(--radius);outline:none;cursor:pointer}

/* ── GRID ── */
.main{flex:1;padding:1.2rem 2rem 3rem}
.wall-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px}
.wall-card{position:relative;border-radius:0;clip-path:polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);overflow:hidden;cursor:pointer;
  background:var(--bg4);border:1px solid rgba(255,255,255,.06);aspect-ratio:9/16;
  transition:transform .22s,border-color .22s,box-shadow .22s}
.wall-card:hover{transform:translateY(-5px);border-color:rgba(240,216,58,.4);box-shadow:0 12px 32px rgba(0,0,0,1), 0 0 15px rgba(240,216,58,.15)}
.wall-card img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s}
.wall-card:hover img{transform:scale(1.03)}

/* skeleton while image loads */
.wall-card img.loading{background:linear-gradient(to bottom,transparent 0%,var(--gold) 50%,transparent 100%);background-size:100% 200%;animation:laserscan 1.2s infinite linear;opacity:0.3;}
@keyframes laserscan{0%{background-position:0 -100%}100%{background-position:0 200%}}

.card-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(5,5,5,1) 0%,transparent 60%);
  opacity:0;transition:opacity .22s;display:flex;flex-direction:column;justify-content:flex-end;padding:.9rem}
.wall-card:hover .card-overlay{opacity:1}
.card-title{font-family:'Orbitron',sans-serif;font-size:.72rem;letter-spacing:.08em;color:var(--bright);margin-bottom:.2rem;line-height:1.3}
.card-cats{display:flex;flex-wrap:wrap;gap:.25rem;margin-bottom:.5rem}
.card-cat-chip{font-size:.6rem;padding:.15rem .4rem;background:rgba(201,168,76,0.15);border:1px solid rgba(201,168,76,0.3);border-radius:20px;color:var(--gold);text-transform:capitalize;}
.card-actions{display:flex;gap:.4rem}
.card-btn{clip-path:polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);flex:1;font-family:'Orbitron',sans-serif;font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;
  padding:.35rem .4rem;border:none;cursor:pointer;border-radius:3px;transition:filter .2s;font-weight:600}
.card-btn-dl{background:var(--gold);color:var(--bg)}
.card-btn-dl:hover{filter:brightness(1.12)}
.card-btn-link{background:rgba(255,255,255,.1);color:var(--mid);border:1px solid rgba(255,255,255,.12)}
.card-btn-link:hover{background:rgba(255,255,255,.18)}

/* admin delete button on card */
.card-del{position:absolute;top:8px;left:8px;width:26px;height:26px;border-radius:3px;
  background:rgba(139,26,44,.8);border:1px solid rgba(255,80,80,.3);color:#ff8080;
  font-size:.75rem;cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:all .2s;opacity:0}
.wall-card:hover .card-del{opacity:1}
.card-del:hover{background:rgba(139,26,44,1)}

.card-badge{position:absolute;top:8px;right:8px;background:rgba(10,10,15,.78);
  border:1px solid rgba(201,168,76,.35);border-radius:3px;font-size:.55rem;
  letter-spacing:.12em;font-family:'Orbitron',sans-serif;color:var(--gold);padding:.2rem .45rem;text-transform:uppercase}

/* ── EMPTY / LOADING ── */
.state-msg{text-align:center;padding:5rem 2rem;color:var(--dim)}
.state-msg .icon{font-size:2.5rem;margin-bottom:1rem;opacity:.4}
.state-msg p{font-family:'Orbitron',sans-serif;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase}
.spinner{width:40px;height:40px;border-radius:50%;background:conic-gradient(from 0deg, transparent 70%, var(--gold) 100%);animation:spin 1s linear infinite;margin:0 auto 1rem;position:relative}
.spinner::before{content:'';position:absolute;inset:2px;background:var(--bg);border-radius:50%}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── PAGINATION ── */
.pagination{display:flex;align-items:center;justify-content:center;gap:.5rem;padding:2rem;flex-wrap:wrap}
.page-btn{clip-path:polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);font-family:'Orbitron',sans-serif;font-size:.65rem;letter-spacing:.1em;padding:.45rem .9rem;
  border:1px solid rgba(255,255,255,.08);color:var(--mid);background:var(--bg3);
  cursor:pointer;border-radius:var(--radius);transition:all .2s}
.page-btn:hover,.page-btn.active{border-color:var(--gold);color:var(--gold)}

/* ── MODALS (shared) ── */
.modal-bg{display:none;position:fixed;inset:0;z-index:400;
  background:rgba(0,0,0,.85);align-items:center;justify-content:center;backdrop-filter:blur(6px)}
.modal-bg.open{display:flex}
.modal{background:var(--bg3);border:1px solid rgba(255,232,31,.2);border-radius:0;clip-path:polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px);
  padding:2rem;max-width:480px;width:95%;max-height:92vh;overflow-y:auto;position:relative}
.modal-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.5rem}
.modal-title{font-family:'Orbitron',sans-serif;font-size:1.1rem;color:var(--gold);letter-spacing:.08em}
.modal-close{background:none;border:none;color:var(--dim);font-size:1.3rem;cursor:pointer;padding:.2rem}
.modal-close:hover{color:var(--gold)}

/* ── ADMIN LOGIN MODAL ── */
.login-sub{font-size:.82rem;color:var(--dim);margin-bottom:1.5rem;line-height:1.5}
.pw-wrap{position:relative;margin-bottom:1rem}
.pw-input{width:100%;background:var(--bg2);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius);
  color:var(--bright);font-size:.9rem;padding:.7rem 1rem;outline:none;letter-spacing:.08em;transition:border-color .2s}
.pw-input:focus{border-color:rgba(201,168,76,.4)}
.pw-input::placeholder{letter-spacing:.02em;font-size:.82rem;color:var(--dim)}
.btn-login{clip-path:polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);width:100%;font-family:'Orbitron',sans-serif;font-size:.72rem;letter-spacing:.25em;text-transform:uppercase;
  padding:.85rem;background:linear-gradient(135deg,var(--gold-d),var(--gold));color:var(--bg);
  border:none;cursor:pointer;font-weight:600;border-radius:var(--radius);transition:filter .2s}
.btn-login:hover{filter:brightness(1.1)}
.btn-login:disabled{opacity:.5;cursor:default;filter:none}
.login-err{font-size:.75rem;color:#ff8080;text-align:center;margin-top:.6rem;min-height:1em}

/* ── UPLOAD MODAL ── */
.drop-zone{border:2px dashed rgba(201,168,76,.25);border-radius:var(--radius);
  padding:2.5rem;text-align:center;cursor:pointer;transition:all .2s;margin-bottom:1.2rem;position:relative}
.drop-zone:hover,.drop-zone.drag{border-color:rgba(201,168,76,.6);background:rgba(201,168,76,.04)}
.drop-zone input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.dz-icon{font-size:2.2rem;margin-bottom:.6rem;opacity:.5}
.dz-text{font-family:'Orbitron',sans-serif;font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--dim);margin-bottom:.3rem}
.dz-sub{font-size:.72rem;color:var(--dim);opacity:.7}
.preview-img{width:100%;max-height:200px;object-fit:contain;border-radius:var(--radius);
  border:1px solid rgba(255,255,255,.06);margin-bottom:1.2rem;display:none}
.field{margin-bottom:1rem}
.field label{display:block;font-size:.72rem;color:var(--mid);letter-spacing:.05em;margin-bottom:.35rem}
.field input{width:100%;background:var(--bg2);border:1px solid rgba(255,255,255,.09);border-radius:var(--radius);
  color:var(--bright);font-size:.83rem;padding:.55rem .85rem;outline:none;transition:border-color .2s}
.field input:focus{border-color:rgba(201,168,76,.4)}
.field input::placeholder{color:var(--dim)}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
.btn-upload{clip-path:polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);width:100%;font-family:'Orbitron',sans-serif;font-size:.72rem;letter-spacing:.25em;text-transform:uppercase;
  padding:.85rem;background:linear-gradient(135deg,var(--gold-d),var(--gold));color:var(--bg);
  border:none;cursor:pointer;font-weight:600;border-radius:var(--radius);transition:filter .2s;margin-top:.5rem}
.btn-upload:hover{filter:brightness(1.1)}
.btn-upload:disabled{opacity:.5;cursor:default;filter:none}
.upload-prog{margin-top:.8rem;display:none}
.prog-bar-wrap{background:var(--bg4);border-radius:20px;height:4px;overflow:hidden;margin-bottom:.3rem}
.prog-bar{height:100%;background:var(--gold);width:0%;transition:width .3s;border-radius:20px}
.prog-text{font-size:.72rem;color:var(--dim);text-align:center}

/* ── TAGS UI ── */
.tag-input-wrap { display: flex; flex-wrap: wrap; gap: 0.4rem; background: var(--bg2); border: 1px solid rgba(255,255,255,.09); border-radius: var(--radius); padding: 0.5rem; transition: border-color .2s; position: relative; cursor: text; }
.tag-input-wrap:focus-within { border-color: rgba(201,168,76,.4); }
.tag-chip { background: var(--bg4); color: var(--bright); font-size: 0.75rem; padding: 0.2rem 0.5rem; border-radius: 4px; display: flex; align-items: center; gap: 0.3rem; }
.tag-chip button { background: none; border: none; color: var(--dim); cursor: pointer; font-size: 0.75rem; }
.tag-chip button:hover { color: #ff8080; }
.tag-input-field { flex: 1; min-width: 60px; background: none !important; border: none !important; padding: 0 !important; color: var(--bright); outline: none; }
.autocomplete-list { position: absolute; top: 100%; left: 0; right: 0; background: var(--bg3); border: 1px solid rgba(201,168,76,.3); border-radius: var(--radius); max-height: 150px; overflow-y: auto; z-index: 10; display: none; margin-top: 4px; box-shadow: 0 4px 12px rgba(0,0,0,0.5); list-style: none; padding: 0; }
.autocomplete-item { padding: 0.6rem 1rem; cursor: pointer; color: var(--bright); font-size: 0.75rem; transition: 0.2s; }
.autocomplete-item:hover, .autocomplete-item.active { background: rgba(201,168,76,.1); color: var(--gold); }
.autocomplete-item.create { font-style: italic; color: var(--gold); }

/* ── LIGHTBOX ── */
.lb-bg{display:none;position:fixed;inset:0;z-index:500;
  background:rgba(0,0,0,.92);align-items:center;justify-content:center;backdrop-filter:blur(8px)}
.lb-bg.open{display:flex}
.lb-inner{position:relative;max-width:1000px;width:95%;max-height:92vh;display:flex;gap:1.5rem;align-items:flex-start}
.lb-img-wrap{flex:1;display:flex;align-items:center;justify-content:center;max-height:85vh;overflow:auto;}
.lb-img-wrap img{max-width:100%;max-height:85vh;object-fit:contain;border-radius:var(--radius);border:1px solid rgba(201,168,76,.15);cursor:zoom-in;transition:transform .3s ease;transform-origin:center center;}
.lb-img-wrap img.zoomed{transform:scale(2.5);cursor:zoom-out;}
.lb-info{width:260px;flex-shrink:0;background:var(--bg3);border:1px solid rgba(255,255,255,.07);border-radius:0;clip-path:polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px);padding:1.4rem}
.lb-close{position:absolute;top:-40px;right:0;background:none;border:none;color:var(--mid);font-size:1.5rem;cursor:pointer}
.lb-close:hover{color:var(--gold)}
.lb-title{font-family:'Orbitron',sans-serif;font-size:.95rem;letter-spacing:.1em;color:var(--bright);margin-bottom:.3rem}
.lb-cat{font-size:.72rem;color:var(--gold);text-transform:capitalize;margin-bottom:.8rem}
.lb-tags{display:flex;flex-wrap:wrap;gap:.35rem;margin-bottom:1rem}
.lb-tag{font-size:.65rem;padding:.2rem .6rem;background:var(--bg4);border:1px solid rgba(255,255,255,.07);border-radius:20px;color:var(--dim)}
.lb-meta{font-size:.72rem;color:var(--dim);margin-bottom:1rem;line-height:1.8}
.lb-meta span{color:var(--mid)}
.lb-link-box{background:var(--bg2);border:1px solid rgba(201,168,76,.2);border-radius:var(--radius);
  padding:.6rem .8rem;margin-bottom:.8rem;display:flex;align-items:center;gap:.5rem}
.lb-link-label{font-size:.6rem;color:var(--dim);letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
.lb-link-url{font-size:.68rem;color:var(--gold);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;font-family:monospace}
.lb-copy-btn{background:none;border:1px solid rgba(201,168,76,.3);color:var(--gold);font-size:.62rem;
  padding:.25rem .5rem;cursor:pointer;border-radius:3px;flex-shrink:0;transition:all .2s}
.lb-copy-btn:hover{background:var(--gold);color:var(--bg)}
.lb-dl-btn{clip-path:polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);width:100%;font-family:'Orbitron',sans-serif;font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;
  padding:.7rem;background:linear-gradient(135deg,var(--gold-d),var(--gold));color:var(--bg);
  border:none;cursor:pointer;font-weight:600;border-radius:var(--radius);transition:filter .2s}
.lb-dl-btn:hover{filter:brightness(1.1)}

/* ── TOAST ── */
.toast{position:fixed;bottom:1.5rem;right:1.5rem;z-index:999;background:var(--bg3);
  border:1px solid rgba(201,168,76,.35);color:var(--gold);font-family:'Orbitron',sans-serif;
  font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;padding:.7rem 1.3rem;
  border-radius:var(--radius);opacity:0;transform:translateY(8px);transition:all .28s;pointer-events:none}
.toast.show{opacity:1;transform:translateY(0)}

/* ── ADS ── */
.ad-slot{background:var(--bg3);border:1px solid rgba(255,255,255,.05);border-radius:var(--radius);display:flex;align-items:center;justify-content:center;color:var(--dim);font-size:.75rem;aspect-ratio:9/16;overflow:hidden;}

/* ── RESPONSIVE ── */
@media(max-width:640px){
  .topbar{padding:.8rem 1rem;flex-wrap:wrap;}
  .search-wrap{order:3;width:100%;max-width:100%;margin-top:.5rem;}
  .ad-slot{grid-column:1/-1;aspect-ratio:auto;min-height:100px;}
  .main{padding:.8rem 1rem 2rem}
  .cat-bar,.toolbar,.admin-bar,.stats-bar{padding:.6rem 1rem}
  .wall-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
  .lb-inner{flex-direction:column; overflow-y:auto; max-height:100vh; width:100%; padding:2.5rem 1rem 1rem; border-radius:0; gap:1rem; clip-path:none;}
  .lb-img-wrap{max-height:50vh; width:100%; overflow:hidden;}
  .lb-img-wrap img{max-height:50vh; width:100%; object-fit:contain;}
  .lb-info{width:100%; flex-shrink:0;}
  .lb-close{top:10px; right:10px; position:fixed; z-index:510; font-size:2rem; background:rgba(0,0,0,0.5); border-radius:50%; width:40px; height:40px; display:flex; align-items:center; justify-content:center;}
  .field-row{grid-template-columns:1fr}
}
