:root {
  --bg: #0a0a0a;
  --bg2: #141414;
  --bg3: #1e1e1e;
  --bg4: #252525;
  --border: #2a2a2a;
  --border2: #333;
  --accent: #d6193b;
  --accent2: #ff3356;
  --accent3: #ff6680;
  --text: #f0f0f0;
  --text2: #888;
  --text3: #555;
  --radius: 8px;
  --card-radius: 12px;
  --shadow: 0 8px 40px rgba(0,0,0,.8);
  --shadow-red: 0 4px 30px rgba(214,25,59,.3);
}
*{box-sizing:border-box;margin:0;padding:0;}
html,body{background:var(--bg);color:var(--text);font-family:'Segoe UI',system-ui,sans-serif;min-height:100vh;line-height:1.5;}
a{color:var(--accent3);cursor:pointer;text-decoration:none;}
a:hover{text-decoration:underline;}

/* ================================================================
   AUTH WALL
   ================================================================ */
#authWall{
  position:fixed;inset:0;z-index:9000;
  display:flex;align-items:center;justify-content:center;
  background:var(--bg);
  padding:20px;
}
.auth-bg{position:absolute;inset:0;overflow:hidden;pointer-events:none;}
.auth-glow-1{
  position:absolute;top:-20%;left:50%;transform:translateX(-50%);
  width:900px;height:500px;
  background:radial-gradient(ellipse at center,rgba(214,25,59,.18) 0%,transparent 70%);
  filter:blur(40px);
}
.auth-glow-2{
  position:absolute;bottom:-10%;right:10%;
  width:500px;height:400px;
  background:radial-gradient(ellipse at center,rgba(100,0,200,.08) 0%,transparent 70%);
  filter:blur(60px);
}

.auth-card{
  position:relative;z-index:1;
  width:100%;max-width:420px;
  background:rgba(18,18,18,.95);
  border:1px solid var(--border2);
  border-radius:20px;
  padding:40px 36px 32px;
  box-shadow:var(--shadow), 0 0 0 1px rgba(255,255,255,.04);
  animation:cardIn .4s cubic-bezier(.22,1,.36,1);
}
@keyframes cardIn{from{opacity:0;transform:translateY(28px);}to{opacity:1;transform:none;}}

/* Logo */
.auth-logo{
  display:flex;align-items:center;gap:6px;justify-content:center;
  margin-bottom:6px;
}
.logo-x{
  font-size:3.2rem;font-weight:900;color:var(--accent2);
  letter-spacing:-3px;line-height:1;
  text-shadow:0 0 30px rgba(255,51,86,.5);
}
.logo-host{
  font-size:2.2rem;font-weight:900;color:var(--text);
  letter-spacing:-1px;line-height:1;
}
.logo-badge{
  background:var(--accent);color:#fff;font-size:.65rem;font-weight:800;
  padding:3px 7px;border-radius:6px;letter-spacing:.5px;
  align-self:flex-start;margin-top:4px;
}
.auth-tagline{
  text-align:center;color:var(--text2);font-size:.82rem;
  margin-bottom:24px;letter-spacing:.3px;
}

/* Auth tabs */
.auth-tabs{
  display:flex;background:var(--bg3);border-radius:10px;
  padding:4px;gap:4px;margin-bottom:24px;
}
.auth-tab{
  flex:1;background:transparent;border:none;color:var(--text2);
  padding:9px 0;border-radius:7px;cursor:pointer;
  font-size:.9rem;font-weight:500;transition:all .2s;
}
.auth-tab.active{
  background:var(--bg4);color:var(--text);box-shadow:0 1px 4px rgba(0,0,0,.4);
}
.auth-tab:hover:not(.active){color:var(--text);}

/* Auth form */
.auth-form{display:flex;flex-direction:column;gap:14px;}
.auth-form.hidden{display:none;}
.field-wrap{display:flex;flex-direction:column;gap:5px;}
.field-wrap label{font-size:.8rem;font-weight:600;color:var(--text2);letter-spacing:.4px;text-transform:uppercase;}
.field-hint{font-size:.74rem;color:var(--text3);}
.field-wrap input{
  background:var(--bg3);border:1px solid var(--border2);
  color:var(--text);border-radius:9px;padding:11px 14px;
  font-size:.95rem;outline:none;transition:border-color .2s,box-shadow .2s;
  width:100%;
}
.field-wrap input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(214,25,59,.15);}
.pw-wrap{position:relative;}
.pw-wrap input{width:100%;padding-right:44px;}
.pw-toggle{
  position:absolute;right:12px;top:50%;transform:translateY(-50%);
  background:none;border:none;color:var(--text2);cursor:pointer;font-size:1rem;
  padding:4px;
}
.pw-toggle:hover{color:var(--text);}
.auth-err{
  color:#ff5566;font-size:.83rem;min-height:18px;
  background:rgba(255,50,80,.08);border:1px solid rgba(255,50,80,.2);
  border-radius:7px;padding:8px 12px;display:none;
}
.auth-err:not(:empty){display:block;}

.btn-auth{
  background:linear-gradient(135deg,var(--accent) 0%,#b01030 100%);
  color:#fff;border:none;border-radius:10px;
  padding:13px 0;width:100%;font-size:1rem;font-weight:700;
  cursor:pointer;letter-spacing:.3px;
  transition:all .2s;
  box-shadow:0 4px 20px rgba(214,25,59,.35);
  position:relative;overflow:hidden;
}
.btn-auth::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,.08) 0%,transparent 60%);
  border-radius:inherit;
}
.btn-auth:hover{transform:translateY(-1px);box-shadow:0 6px 28px rgba(214,25,59,.5);}
.btn-auth:active{transform:none;}
.btn-label,.btn-spinner{pointer-events:none;}
.btn-spinner{color:rgba(255,255,255,.7);font-size:.85rem;}

.auth-footer{
  text-align:center;color:var(--text3);font-size:.75rem;
  margin-top:20px;padding-top:16px;border-top:1px solid var(--border);
}

/* ================================================================
   MAIN APP
   ================================================================ */
#app{min-height:100vh;}
#app.hidden{display:none;}

/* ---- HEADER ---- */
#header{
  position:sticky;top:0;z-index:100;
  background:rgba(12,12,12,.97);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);
  display:flex;align-items:center;gap:12px;padding:10px 20px;
}
.logo-small{display:flex;align-items:center;gap:0;text-decoration:none;flex-shrink:0;}
.logo-x-sm{font-size:1.5rem;font-weight:900;color:var(--accent2);letter-spacing:-1px;}
.logo-host-sm{font-size:1.1rem;font-weight:900;color:var(--text);letter-spacing:-.5px;}
.logo-small:hover .logo-x-sm{text-shadow:0 0 16px rgba(255,51,86,.6);}

.search-wrap{display:flex;flex:1;max-width:380px;}
.search-wrap input{
  flex:1;background:var(--bg3);border:1px solid var(--border2);
  border-right:none;color:var(--text);padding:8px 12px;
  border-radius:var(--radius) 0 0 var(--radius);font-size:.9rem;outline:none;
}
.search-wrap input:focus{border-color:var(--accent);}
.search-wrap button{
  background:var(--accent);border:none;color:#fff;
  padding:8px 14px;border-radius:0 var(--radius) var(--radius) 0;
  cursor:pointer;font-size:1rem;transition:background .2s;
}
.search-wrap button:hover{background:var(--accent2);}
.cat-wrap{display:flex;align-items:center;gap:6px;}
.cat-wrap select{
  background:var(--bg3);border:1px solid var(--border2);color:var(--text);
  padding:8px 10px;border-radius:var(--radius);font-size:.85rem;cursor:pointer;
}
.btn-fav{
  background:var(--bg3);border:1px solid var(--border2);color:var(--text3);
  padding:5px 10px;border-radius:var(--radius);cursor:pointer;font-size:1.05rem;
  line-height:1;transition:all .2s;flex-shrink:0;
}
.btn-fav:hover{border-color:var(--accent);color:var(--accent);}
.btn-fav.active{background:rgba(214,25,59,.15);border-color:var(--accent);color:var(--accent);}
.header-actions{display:flex;align-items:center;gap:10px;margin-left:auto;}

/* ---- BUTTONS ---- */
.btn-primary{
  background:var(--accent);color:#fff;border:none;
  padding:8px 18px;border-radius:var(--radius);cursor:pointer;
  font-size:.9rem;font-weight:600;transition:background .2s;
}
.btn-primary:hover{background:var(--accent2);}
.btn-ghost{
  background:transparent;color:var(--text);border:1px solid var(--border2);
  padding:7px 14px;border-radius:var(--radius);cursor:pointer;font-size:.9rem;
  transition:border-color .2s;
}
.btn-ghost:hover{border-color:var(--accent2);color:var(--accent3);}
.btn-danger{
  background:#2a0f0f;color:#ff6b6b;border:1px solid #4a2020;
  padding:7px 14px;border-radius:var(--radius);cursor:pointer;font-size:.9rem;
}
.btn-danger:hover{background:var(--accent);}

/* ---- USER MENU ---- */
.user-menu{position:relative;}
.user-btn{display:flex;align-items:center;gap:8px;}
.avatar-sm{width:28px;height:28px;border-radius:50%;object-fit:cover;flex-shrink:0;}
.avatar-placeholder{
  width:28px;height:28px;border-radius:50%;
  background:linear-gradient(135deg,var(--accent) 0%,#800020 100%);
  display:flex;align-items:center;justify-content:center;
  font-size:.75rem;font-weight:700;color:#fff;flex-shrink:0;
}
.dropdown{
  position:absolute;right:0;top:calc(100% + 8px);
  background:var(--bg2);border:1px solid var(--border2);
  border-radius:12px;min-width:180px;
  box-shadow:var(--shadow);z-index:200;overflow:hidden;
}
.dropdown a{
  display:block;padding:11px 16px;color:var(--text);font-size:.88rem;
  transition:background .15s;cursor:pointer;
}
.dropdown a:hover{background:var(--bg3);text-decoration:none;}
.dropdown-sep{height:1px;background:var(--border);margin:2px 0;}
.dropdown-danger{color:#ff6b6b !important;}
.dropdown-danger:hover{background:#2a0f0f !important;}

/* ---- FEED GRID ---- */
main#feedPage{padding:20px 16px;max-width:1600px;margin:0 auto;}
.feed-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
  gap:10px;
}
@media(min-width:600px){.feed-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));}}
@media(min-width:1200px){.feed-grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));}}

/* Compact image card */
.folder-card{
  position:relative;
  border-radius:var(--card-radius);overflow:hidden;cursor:pointer;
  background:var(--bg3);
  aspect-ratio:3/4;
  transition:transform .18s,box-shadow .18s;
}
.folder-card:hover{
  transform:scale(1.03);
  box-shadow:0 8px 32px rgba(0,0,0,.7);
  z-index:1;
}
/* The cover image fills the whole card */
.fc-cover{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;
  display:block;background:var(--bg3);
  transition:transform .3s;
}
.folder-card:hover .fc-cover{transform:scale(1.06);}
/* Gradient overlay for text legibility */
.fc-overlay{
  position:absolute;inset:0;
  background:linear-gradient(to bottom,
    transparent 35%,
    rgba(0,0,0,.5) 65%,
    rgba(0,0,0,.88) 100%);
}
/* Name + meta at bottom */
.fc-info{
  position:absolute;bottom:0;left:0;right:0;
  padding:10px 10px 9px;
}
.fc-name{
  font-size:.9rem;font-weight:700;line-height:1.3;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.8);
  margin-bottom:4px;
}
.fc-meta{
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;
}
.cat-badge{
  background:rgba(214,25,59,.75);border-radius:4px;
  padding:1px 6px;font-size:.68rem;color:#fff;font-weight:600;
}
.fc-count{
  font-size:.72rem;color:rgba(255,255,255,.7);
}
/* Quick-heart button on feed cards */
.fc-heart-btn{
  position:absolute;top:8px;right:8px;z-index:4;
  display:flex;align-items:center;gap:3px;
  background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.18);
  color:rgba(255,255,255,.75);border-radius:20px;
  padding:4px 9px;font-size:.75rem;cursor:pointer;
  backdrop-filter:blur(4px);transition:all .15s;line-height:1;
}
.fc-heart-btn:hover{background:rgba(220,40,40,.7);border-color:rgba(255,80,80,.5);color:#fff;}
.fc-heart-btn.active{background:rgba(200,30,30,.85);border-color:#f55;color:#fff;}
/* No-cover placeholder */
.fc-nocover{
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  font-size:2.5rem;color:var(--border2);
  background:var(--bg3);
}

/* ---- SUBFOLDER GRID (inside a folder detail page) ---- */
.subfolders-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
  gap:8px;
  padding:16px 20px 4px;
  max-width:1400px;margin:0 auto;
}
@media(min-width:600px){.subfolders-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));}}
@media(min-width:1200px){.subfolders-grid{grid-template-columns:repeat(auto-fill,minmax(175px,1fr));}}
.subfolder-card{
  position:relative;
  border-radius:var(--card-radius);overflow:hidden;cursor:pointer;
  background:var(--bg3);
  aspect-ratio:3/4;
  transition:transform .18s,box-shadow .18s;
  border:1px solid var(--border);
}
.subfolder-card:hover{transform:scale(1.03);box-shadow:0 8px 30px rgba(0,0,0,.6);}
.subfolder-card .fc-cover{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .3s;
}
.subfolder-card:hover .fc-cover{transform:scale(1.05);}
.subfolder-card .fc-overlay{
  position:absolute;inset:0;
  background:linear-gradient(to top,rgba(0,0,0,.85) 0%,rgba(0,0,0,.1) 55%,transparent 100%);
}
.subfolder-card .fc-nocover{
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  font-size:2rem;color:var(--border2);background:var(--bg3);
}
.subfolder-card .fc-info{
  position:absolute;bottom:0;left:0;right:0;
  padding:8px 8px 7px;
}
.subfolder-card .fc-name{
  font-size:.78rem;font-weight:700;color:#fff;
  text-shadow:0 1px 4px rgba(0,0,0,.9);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  margin-bottom:2px;
}
.subfolder-card .fc-meta{
  display:flex;align-items:center;gap:4px;flex-wrap:wrap;
}
.subfolder-card .fc-count{
  font-size:.66rem;color:rgba(255,255,255,.65);
}
.subfolders-section-label{
  padding:14px 20px 4px;
  max-width:1400px;margin:0 auto;
  font-size:.8rem;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.06em;
}

/* ---- FOLDER DETAIL ---- */
#folderPage{padding:0;}
.folder-hero{
  display:flex;gap:24px;align-items:flex-start;
  padding:28px 24px 22px;
  background:linear-gradient(180deg,var(--bg2) 0%,var(--bg) 100%);
  border-bottom:1px solid var(--border);
}
.folder-hero>img{
  width:200px;height:200px;object-fit:cover;
  border-radius:var(--card-radius);background:var(--bg3);flex-shrink:0;
  box-shadow:var(--shadow);
}
.folder-info{flex:1;}
.folder-info h1{font-size:2rem;margin-bottom:8px;letter-spacing:-.5px;}
.folder-info p{color:var(--text2);margin-bottom:10px;font-size:.88rem;}
.folder-tag-row{display:flex;align-items:center;gap:10px;margin-bottom:14px;}
.tag-label{font-size:.82rem;color:var(--text2);white-space:nowrap;}
.tag-select{
  background:var(--bg3);border:1px solid var(--border2);color:var(--text);
  padding:5px 10px;border-radius:8px;font-size:.85rem;cursor:pointer;
  transition:border-color .2s;
}
.tag-select:focus{outline:none;border-color:var(--accent);}
.folder-actions{display:flex;gap:8px;flex-wrap:wrap;}
.react-btn{
  background:var(--bg3);border:1px solid var(--border2);color:var(--text);
  padding:8px 18px;border-radius:20px;cursor:pointer;font-size:.9rem;
  transition:all .2s;
}
.react-btn:hover,.react-btn.active{border-color:var(--accent);color:var(--accent3);}

.media-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:10px;padding:20px;
  max-width:1400px;margin:0 auto;
}
.media-item{
  position:relative;border-radius:10px;overflow:hidden;
  background:var(--bg3);cursor:pointer;aspect-ratio:16/9;
  transition:transform .2s;
}
.media-item:hover{transform:scale(1.025);}
.media-item img,.media-item video{width:100%;height:100%;object-fit:cover;display:block;}
.duration-badge,.type-badge{
  position:absolute;background:rgba(0,0,0,.75);color:#fff;
  font-size:.7rem;padding:2px 7px;border-radius:5px;pointer-events:none;
}
.duration-badge{bottom:6px;right:8px;}
.type-badge{top:6px;left:8px;text-transform:uppercase;letter-spacing:.4px;}
.media-item .del-btn{
  position:absolute;top:6px;right:8px;display:none;
  background:var(--accent);color:#fff;border:none;border-radius:50%;
  width:24px;height:24px;cursor:pointer;font-size:.75rem;line-height:24px;text-align:center;
}
.media-item:hover .del-btn{display:block;}

/* ---- COMMENTS ---- */
.comments-section{max-width:800px;margin:0 auto;padding:28px 20px 48px;}
.comments-section h3{margin-bottom:18px;font-size:1rem;color:var(--text2);text-transform:uppercase;letter-spacing:.5px;}
.comment-item{display:flex;gap:12px;margin-bottom:22px;align-items:flex-start;}
.comment-avatar{width:36px;height:36px;border-radius:50%;object-fit:cover;background:var(--bg3);flex-shrink:0;}
.comment-body-wrap{flex:1;}
.comment-header{display:flex;gap:10px;align-items:baseline;margin-bottom:4px;}
.comment-user{font-weight:600;font-size:.88rem;}
.comment-time{font-size:.73rem;color:var(--text2);}
.comment-text{font-size:.88rem;color:var(--text);line-height:1.55;}
.comment-del{background:none;border:none;color:var(--text3);cursor:pointer;font-size:.8rem;margin-left:auto;}
.comment-del:hover{color:var(--accent);}
#commentForm{display:flex;gap:10px;margin-top:16px;}
#commentInput{
  flex:1;background:var(--bg3);border:1px solid var(--border2);
  color:var(--text);border-radius:var(--radius);padding:10px 14px;
  font-size:.88rem;resize:none;outline:none;
}
#commentInput:focus{border-color:var(--accent);}
.hint{font-size:.78rem;color:var(--text2);margin-top:6px;}

/* ---- PAGER ---- */
.pager{display:flex;gap:8px;justify-content:center;padding:20px;flex-wrap:wrap;}
.pager button{
  background:var(--bg3);border:1px solid var(--border2);color:var(--text);
  padding:7px 14px;border-radius:var(--radius);cursor:pointer;font-size:.83rem;
  transition:all .2s;
}
.pager button.active{background:var(--accent);border-color:var(--accent);}
.pager button:hover:not(.active){border-color:var(--accent2);}

/* ---- MODALS ---- */
.modal-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.85);z-index:1000;
  display:flex;align-items:center;justify-content:center;padding:20px;
  backdrop-filter:blur(4px);
}
.modal{
  background:var(--bg2);border:1px solid var(--border2);
  border-radius:16px;padding:28px 30px;width:100%;max-width:460px;
  position:relative;box-shadow:var(--shadow);
  max-height:90vh;overflow-y:auto;
}
.modal-lg{max-width:600px;}
.modal h2{margin-bottom:20px;font-size:1.2rem;font-weight:700;}
.modal input,.modal select,.modal textarea{
  width:100%;background:var(--bg3);border:1px solid var(--border2);
  color:var(--text);border-radius:var(--radius);padding:11px 14px;
  font-size:.9rem;outline:none;margin-bottom:12px;display:block;
  transition:border-color .2s;
}
.modal input:focus,.modal select:focus,.modal textarea:focus{border-color:var(--accent);}
.modal-close{
  position:absolute;top:16px;right:18px;
  background:none;border:none;color:var(--text2);font-size:1.1rem;cursor:pointer;
}
.modal-close:hover{color:var(--text);}
.progress-msg{color:var(--accent3);font-size:.83rem;margin-bottom:8px;}

/* ---- UPLOAD ---- */
.upload-tabs{display:flex;gap:8px;margin-bottom:14px;}
.tab-btn{
  background:var(--bg3);border:1px solid var(--border2);color:var(--text2);
  padding:7px 16px;border-radius:var(--radius);cursor:pointer;font-size:.83rem;transition:all .2s;
}
.tab-btn.active{background:var(--accent);border-color:var(--accent);color:#fff;}
.drop-zone{
  border:2px dashed var(--border2);border-radius:10px;
  padding:32px;text-align:center;cursor:pointer;color:var(--text2);
  transition:all .2s;margin-bottom:10px;
}
.drop-zone:hover,.drop-zone.drag-over{border-color:var(--accent);color:var(--text);background:rgba(214,25,59,.04);}
.drop-icon{font-size:2rem;margin-bottom:8px;}
.drop-zone p{font-size:.88rem;margin-bottom:4px;}
.drop-zone small{font-size:.76rem;}
.file-list-item{
  display:flex;align-items:center;gap:8px;padding:5px 0;
  font-size:.8rem;color:var(--text2);border-bottom:1px solid var(--border);
}
.file-list-item span:first-child{color:var(--text);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

/* ---- ADMIN ---- */
#adminPage{max-width:960px;margin:0 auto;padding:28px 20px;}
.admin-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;}
.admin-header h2{font-size:1.4rem;}
.admin-tabs{display:flex;gap:10px;margin-bottom:20px;}
.admin-table{width:100%;border-collapse:collapse;font-size:.86rem;}
.admin-table th,.admin-table td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--border);}
.admin-table th{color:var(--text2);font-weight:600;font-size:.78rem;text-transform:uppercase;letter-spacing:.4px;}
.stat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px;}
.stat-card{
  background:var(--bg2);border:1px solid var(--border);
  border-radius:var(--card-radius);padding:24px;text-align:center;
}
.stat-card .num{font-size:2.2rem;font-weight:800;color:var(--accent2);}
.stat-card .label{font-size:.78rem;color:var(--text2);margin-top:4px;text-transform:uppercase;letter-spacing:.4px;}

/* ---- LIGHTBOX ---- */
.lightbox{
  position:fixed;inset:0;background:rgba(0,0,0,.97);z-index:2000;
  display:flex;align-items:center;justify-content:center;
}
.lightbox-inner{
  position:relative;max-width:95vw;max-height:95vh;
  display:flex;flex-direction:column;align-items:center;
}
#lbContent{display:flex;align-items:center;justify-content:center;}
#lbContent img,#lbContent video{
  max-width:90vw;max-height:86vh;object-fit:contain;border-radius:var(--radius);
}
#lbCaption{color:var(--text2);font-size:.82rem;margin-top:12px;text-align:center;}
.lb-close{
  position:absolute;top:-44px;right:0;
  background:none;border:none;color:#fff;font-size:1.5rem;cursor:pointer;
}
.lb-nav{
  position:fixed;top:50%;transform:translateY(-50%);
  background:rgba(255,255,255,.07);border:none;color:#fff;
  font-size:1.8rem;padding:14px 18px;cursor:pointer;z-index:10;
  border-radius:var(--radius);transition:background .2s;
}
.lb-nav:hover{background:rgba(255,255,255,.16);}
.lb-prev{left:12px;}
.lb-next{right:12px;}

/* ---- MISC ---- */
.hidden{display:none !important;}

@media(max-width:640px){
  /* Auth */
  .auth-card{padding:28px 18px 24px;}
  .logo-x{font-size:2.6rem;}
  .logo-host{font-size:1.8rem;}

  /* Header — 2-row layout */
  #header{
    flex-wrap:wrap;
    padding:8px 12px;
    gap:8px;
  }
  #usernameDisplay{display:none;}
  .search-wrap{order:3;flex:1 1 100%;max-width:100%;}
  .cat-wrap{order:4;flex:1 1 100%;}
  .cat-wrap select{flex:1;min-width:0;}
  .header-actions{margin-left:auto;gap:6px;}
  .btn-primary,.btn-ghost{padding:8px 12px;font-size:.83rem;}

  /* Feed */
  main#feedPage{padding:10px 8px;}
  .feed-grid{
    grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
    gap:7px;
  }

  /* Folder hero */
  .folder-hero{
    flex-direction:column;
    padding:16px 14px;
    gap:14px;
  }
  .folder-hero>img{width:100%;height:200px;}
  .folder-info h1{font-size:1.35rem;}
  .folder-actions{gap:6px;}
  .folder-actions button{padding:8px 10px;font-size:.82rem;}

  /* Media & sub-folder grids */
  .media-grid{
    grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
    gap:7px;padding:10px;
  }
  .subfolders-grid{
    grid-template-columns:repeat(auto-fill,minmax(118px,1fr));
    gap:6px;padding:10px 12px 4px;
  }

  /* Modals — slide up from bottom like a sheet */
  .modal-overlay{padding:0;align-items:flex-end;}
  .modal{
    border-radius:20px 20px 0 0;
    padding:22px 18px 32px;
    max-height:92vh;
    width:100%;max-width:100%;
  }
  .modal-lg{max-width:100%;}
  .modal-close{
    width:36px;height:36px;
    display:flex;align-items:center;justify-content:center;
    top:12px;right:12px;
  }

  /* Comments — stack textarea + button */
  .comments-section{padding:20px 12px 48px;}
  #commentForm{flex-direction:column;}
  #commentInput{margin-bottom:6px;}

  /* Pager */
  .pager{padding:14px 6px;}
  .pager button{padding:7px 11px;font-size:.78rem;}

  /* Admin */
  #adminPage{padding:16px 12px;}
  .admin-tabs{flex-wrap:wrap;}
  .admin-table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .stat-grid{grid-template-columns:repeat(2,1fr);}

  /* Lightbox — full screen image, X overlaid on top-right */
  .lightbox{align-items:center;}
  .lightbox-inner{width:100%;max-width:100vw;max-height:100vh;}
  .lb-nav{padding:10px 12px;font-size:1.4rem;}
  .lb-prev{left:2px;}
  .lb-next{right:2px;}
  #lbContent img{
    width:100vw;max-width:100vw;max-height:92vh;
    border-radius:0;object-fit:contain;
  }
  #lbContent video{max-width:98vw;max-height:78vh;}
  .lb-close{
    position:fixed;top:12px;right:12px;
    width:36px;height:36px;
    display:flex;align-items:center;justify-content:center;
    background:rgba(0,0,0,.6);border-radius:50%;
    font-size:1rem;z-index:2100;
  }

  /* Upload bar */
  .upload-bar{padding:10px 12px;}
  .upload-bar-label{font-size:.78rem;}

  /* Touch targets — min 40px height for all interactive controls */
  .react-btn,.btn-ghost,.btn-primary,.btn-danger,
  .btn-fav,.tab-btn,.auth-tab{min-height:40px;}

  /* Prevent iOS from auto-zooming when inputs are focused (requires ≥16px) */
  input,select,textarea{
    font-size:16px !important;
  }
}

/* Medium screens 641–900px — tighten grids a little */
@media(min-width:641px) and (max-width:900px){
  .feed-grid{grid-template-columns:repeat(auto-fill,minmax(170px,1fr));}
  .media-grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));}
  .folder-hero{padding:20px 20px;}
}

/* ==================== UPLOAD PROGRESS BAR ==================== */
.upload-bar{
  position:fixed;bottom:0;left:0;right:0;
  background:var(--bg2);
  border-top:1px solid var(--border);
  padding:10px 20px;
  z-index:3000;
  box-shadow:0 -4px 24px rgba(0,0,0,.45);
  transition:opacity .3s ease, transform .3s ease;
}
.upload-bar.fading{opacity:0;transform:translateY(100%);}
.upload-bar-inner{
  display:flex;align-items:center;gap:14px;
  max-width:700px;margin:0 auto;
}
.upload-bar-icon{font-size:1.3rem;flex-shrink:0;}
.upload-bar-body{flex:1;min-width:0;}
.upload-bar-label{
  font-size:.85rem;color:var(--text);
  margin-bottom:5px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.upload-bar-track{height:4px;background:var(--bg3);border-radius:2px;overflow:hidden;}
.upload-bar-fill{
  height:100%;width:0;
  background:var(--accent);
  border-radius:2px;
  transition:width .5s ease;
}
.upload-bar-close{
  background:none;border:none;color:var(--text2);
  cursor:pointer;font-size:1rem;padding:4px 6px;flex-shrink:0;
}
.upload-bar-close:hover{color:var(--text);}