/* === feed.css === */
/* FEED */
#feed-tab{max-width:980px;margin:0 auto;padding:2rem 1.5rem;}
/* FEED TOOLBAR */
@keyframes stoolbarIn{from{opacity:0;transform:translateY(-8px);}to{opacity:1;transform:none;}}
@keyframes upShimmer{0%,100%{box-shadow:0 2px 8px rgba(184,146,74,.3);}50%{box-shadow:0 4px 20px rgba(184,146,74,.55);}}
.ftoolbar{display:flex;align-items:center;gap:8px;margin-bottom:1.25rem;}
.fpill{
  display:flex;align-items:center;flex:1;
  background:var(--c2);border:1px solid var(--b);
  border-radius:100px;padding:5px 10px;gap:2px;
  transition:border-color .2s;
}
.fpill:focus-within{border-color:rgba(184,146,74,.4);}
.fpill-search{display:flex;align-items:center;gap:7px;flex:1;min-width:60px;}
.fpill-search svg{width:13px;height:13px;stroke:var(--ink3);fill:none;stroke-width:2;flex-shrink:0;transition:stroke .2s;}
.fpill:focus-within .fpill-search svg{stroke:var(--gold);}
.fpill-input{border:none;background:none;font-size:13px;color:var(--ink);outline:none;width:100%;transition:width .25s;}
.fpill-input::placeholder{color:var(--ink3);}
.fpill-sep{width:1px;height:18px;background:var(--b);margin:0 3px;flex-shrink:0;}
.fpill-btn{
  background:none;border:none;color:var(--ink3);
  display:flex;align-items:center;justify-content:center;
  width:32px;height:32px;border-radius:8px;
  transition:all .18s;position:relative;flex-shrink:0;cursor:pointer;
}
.fpill-btn:hover{color:var(--gold);background:rgba(184,146,74,.08);}
.fpill-btn svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;}
.fpill-btn.active{color:var(--gold);background:rgba(184,146,74,.1);}
.fpill-btn.active svg{filter:drop-shadow(0 0 3px rgba(184,146,74,.4));}
/* Select count badge */
.sel-badge{
  position:absolute;top:-2px;right:-2px;
  min-width:14px;height:14px;border-radius:100px;
  background:var(--gold);color:white;font-size:8px;font-weight:700;
  display:none;align-items:center;justify-content:center;padding:0 3px;
  border:1.5px solid var(--c);
}
.fpill-btn.active .sel-badge{display:flex;}
/* Sort dot indicator */
.sort-dot{
  position:absolute;bottom:3px;right:3px;
  width:5px;height:5px;border-radius:50%;
  background:var(--gold);display:none;
  box-shadow:0 0 4px rgba(184,146,74,.6);
}
.sort-dot.show{display:block;}
/* Grid size buttons */
.grid-slider-wrap{padding:10px 14px;display:flex;flex-direction:column;gap:6px;min-width:180px;}
.grid-slider-labels{display:flex;justify-content:space-between;font-size:10px;color:var(--ink3);}
.grid-slider-val{text-align:center;font-size:11px;font-weight:600;color:var(--gold);}
.gslider{
  width:100%;accent-color:var(--gold);
  height:4px;border-radius:2px;cursor:pointer;
  appearance:none;-webkit-appearance:none;
  background:linear-gradient(to right,var(--gold) 0%,var(--gold) 33%,var(--b) 33%,var(--b) 100%);
  outline:none;
}
.gslider::-webkit-slider-thumb{
  -webkit-appearance:none;width:18px;height:18px;border-radius:50%;
  background:var(--gold);border:2px solid white;
  box-shadow:0 1px 6px rgba(184,146,74,.4);cursor:pointer;
  transition:transform .15s;
}
.gslider::-webkit-slider-thumb:hover{transform:scale(1.15);}
/* Dropdowns */
.fdrop{
  position:absolute;top:calc(100% + 8px);right:0;
  background:var(--c);border:1px solid var(--b);border-radius:14px;
  padding:6px;min-width:160px;
  box-shadow:0 8px 28px rgba(0,0,0,.1);z-index:50;display:none;
  animation:stoolbarIn .15s ease both;
}
.fdrop.open{display:block;}
.fdrop-item{
  padding:8px 12px;border-radius:8px;font-size:13px;
  color:var(--ink2);cursor:pointer;transition:background .12s;
  display:flex;align-items:center;gap:8px;
}
.fdrop-item:hover{background:var(--c2);color:var(--ink);}
.fdrop-item.on{color:var(--gold);font-weight:500;}
.fdrop-item.on::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--gold);flex-shrink:0;}
/* Upload button */
.upbtn{
  display:flex;align-items:center;gap:6px;
  padding:9px 20px;border-radius:100px;
  font-size:11px;letter-spacing:1.5px;text-transform:uppercase;
  background:linear-gradient(135deg,var(--gold),var(--gold2));
  color:white;border:none;transition:all .2s;flex-shrink:0;
  box-shadow:0 2px 8px rgba(184,146,74,.3);
  animation:upShimmer 3s ease-in-out infinite;
}
.upbtn:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(184,146,74,.5);}
.upbtn:active{transform:scale(.97);}
.upbtn svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2.5;}
/* Photo count */
.fcount{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--ink3);margin-bottom:.875rem;}
/* Selection toolbar */
.stoolbar{
  display:flex;align-items:center;gap:7px;
  padding:.625rem .875rem;border-radius:12px;margin-bottom:.875rem;
  background:rgba(184,146,74,.07);border:1px solid rgba(184,146,74,.25);
  animation:stoolbarIn .2s cubic-bezier(.34,1.3,.64,1) both;
}
.scount{font-size:12px;font-weight:500;color:var(--gold);flex:1;}
.sbtn{
  padding:6px 13px;border-radius:100px;font-size:11px;
  border:1px solid var(--b);background:none;color:var(--ink2);
  transition:all .18s;cursor:pointer;
}
.sbtn:hover{border-color:var(--gold);color:var(--gold);background:rgba(184,146,74,.06);}
.sbtn.danger{border-color:transparent;color:var(--ink3);}
.sbtn.danger:hover{border-color:rgba(224,85,85,.3);color:#E05555;}
.dg{margin-bottom:1.75rem;}
.dlabel{font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--ink3);margin-bottom:.75rem;display:flex;align-items:center;gap:8px;}
.dlabel::after{content:'';flex:1;height:1px;background:var(--b);}
.photo-row{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin-bottom:0;}
.pi{overflow:hidden;background:var(--c2);cursor:pointer;position:relative;border-radius:10px;aspect-ratio:1;min-width:0;}
.pi.sel::after{content:'\2713';position:absolute;inset:0;background:rgba(184,146,74,.45);border-radius:10px;border:3px solid var(--gold);display:flex;align-items:center;justify-content:center;font-size:36px;color:white;font-weight:900;}
.pi img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease;}
.pi:hover img{transform:scale(1.04);}
.pi:hover img{transform:scale(1.04);}
.piov{position:absolute;inset:0;border-radius:10px;background:linear-gradient(transparent 45%,rgba(0,0,0,.7));opacity:0;transition:opacity .22s;display:flex;flex-direction:column;justify-content:flex-end;padding:10px;}
.pi:hover .piov{opacity:1;}
.piav{position:absolute;top:8px;left:8px;width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,var(--gold),var(--gold2));display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:700;color:white;overflow:hidden;border:1.5px solid rgba(255,255,255,.3);}
.piname{font-size:11px;color:white;font-weight:500;}
.pilikes{font-size:10px;color:rgba(255,255,255,.7);margin-top:2px;}
.fempty{text-align:center;padding:5rem 2rem;color:var(--ink3);}
.pbar{background:linear-gradient(135deg,var(--c2),var(--c3));border:1px solid var(--b);border-radius:10px;padding:.875rem 1.1rem;margin-bottom:1.25rem;display:flex;align-items:center;gap:10px;cursor:pointer;}
.pbar:hover{border-color:var(--gold);}
.stbtn{position:fixed;bottom:2rem;right:1.5rem;z-index:50;width:42px;height:42px;border-radius:50%;background:var(--ink);color:var(--c);border:none;font-size:17px;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(0,0,0,.18);transition:opacity .3s;opacity:0;pointer-events:none;}
.stbtn.show{opacity:1;pointer-events:auto;}

/* CLASS */
#class-tab{max-width:1080px;margin:0 auto;padding:2rem 1.5rem;}
.csearch-wrap{display:flex;justify-content:center;margin-bottom:2rem;}
.csearch-pill{display:flex;align-items:center;gap:8px;background:var(--c2);border:1px solid var(--b);border-radius:100px;padding:9px 18px;width:52px;transition:width .4s cubic-bezier(.16,1,.3,1),border-color .2s;overflow:hidden;cursor:pointer;}
.csearch-pill.open{width:300px;border-color:var(--gold);cursor:default;}
.csearch-pill svg{width:15px;height:15px;stroke:var(--ink3);fill:none;stroke-width:2;flex-shrink:0;}
.csearch-pill input{border:none;background:none;font-size:13px;color:var(--ink);outline:none;width:0;opacity:0;transition:all .3s;}
.csearch-pill.open input{width:220px;opacity:1;}
.cgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:16px;}
.bcard{display:flex;flex-direction:column;align-items:center;gap:8px;cursor:pointer;padding:12px;border-radius:14px;transition:background .2s;}
.bcard:hover{background:var(--c2);}
.bavwrap{position:relative;width:96px;height:96px;}
.bcirc{width:96px;height:96px;border-radius:50%;background:var(--c2);border:2.5px solid var(--gold);display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:500;color:var(--gold);overflow:hidden;transition:all .35s;box-shadow:0 0 0 0 rgba(184,146,74,0);}
.bcirc img{width:100%;height:100%;object-fit:cover;}
.bcard:hover .bcirc{transform:scale(1.1);box-shadow:0 12px 32px rgba(184,146,74,.35),0 0 0 5px rgba(184,146,74,.18);border-color:var(--gold2);}
/* Online ring: replaces the gold border with green and adds a soft pulse */
.bcirc.online{
  border-color:#4CAF50;
  box-shadow:0 0 0 3px rgba(76,175,80,.22),0 4px 12px rgba(76,175,80,.18);
  animation:bcircOnlinePulse 2.4s ease-in-out infinite;
}
.bcard:hover .bcirc.online{box-shadow:0 12px 32px rgba(76,175,80,.35),0 0 0 5px rgba(76,175,80,.22);border-color:#66BB6A;}
@keyframes bcircOnlinePulse{
  0%,100%{box-shadow:0 0 0 3px rgba(76,175,80,.22),0 4px 12px rgba(76,175,80,.18);}
  50%{box-shadow:0 0 0 5px rgba(76,175,80,.32),0 6px 16px rgba(76,175,80,.28);}
}
.bnewdot{position:absolute;top:5px;right:5px;width:14px;height:14px;border-radius:50%;background:var(--gold);border:2.5px solid var(--c);display:none;}
.bname{font-size:12px;font-weight:500;color:var(--ink);text-align:center;line-height:1.3;}
.bcnt{font-size:11px;color:var(--ink3);}

/* PROFILE */
#profile-page{min-height:100vh;background:var(--c);padding-top:2rem;}
.pback-btn{position:fixed;top:18px;left:18px;z-index:50;display:flex;align-items:center;gap:6px;padding:8px 16px;border-radius:100px;background:var(--c);border:1px solid var(--b);color:var(--ink2);font-size:13px;box-shadow:0 2px 12px rgba(0,0,0,.1);cursor:pointer;transition:all .2s;}
.pback-btn:hover{border-color:var(--gold);color:var(--gold);}
.pbody{max-width:700px;margin:0 auto;padding:0 1.5rem 2rem;text-align:center;}
.pav-center{width:110px;height:110px;border-radius:50%;border:3px solid var(--c);background:var(--c2);display:flex;align-items:center;justify-content:center;font-size:28px;font-weight:500;color:var(--gold);overflow:hidden;box-shadow:0 4px 20px rgba(0,0,0,.12),0 0 0 5px rgba(184,146,74,.15);margin:0 auto 1rem;}
.pav-center img{width:100%;height:100%;object-fit:cover;}
.pname{font-family:'Playfair Display',serif;font-size:26px;color:var(--ink);margin-bottom:.375rem;}
.pbio{font-size:13px;color:var(--ink3);margin-bottom:1.25rem;line-height:1.7;}
.pbioedit{width:100%;padding:8px 11px;border-radius:8px;background:var(--c2);border:1px solid var(--b);font-size:13px;color:var(--ink);outline:none;resize:none;margin-bottom:.375rem;}
.pbioedit:focus{border-color:var(--gold);}
.pstats{display:flex;justify-content:center;gap:2.5rem;margin-bottom:1.5rem;}
.pstat{text-align:center;}
.psnum{font-family:'Playfair Display',serif;font-size:22px;color:var(--gold);}
.pslbl{font-size:10px;letter-spacing:1px;color:var(--ink3);text-transform:uppercase;}
.pacts{display:flex;justify-content:center;gap:8px;margin-bottom:1.75rem;flex-wrap:wrap;}
.pmsg{padding:7px 18px;border-radius:100px;background:var(--gold);color:white;font-size:12px;border:none;cursor:pointer;}
.pgridp{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:5px;}
.pphoto{aspect-ratio:1;overflow:hidden;border-radius:7px;cursor:pointer;}
.pphoto img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s;}
.pphoto:hover img{transform:scale(1.05);}
.pempty{text-align:center;padding:3rem;color:var(--ink3);font-size:13px;}

/* ALBUMS */
#albums-tab{max-width:1080px;margin:0 auto;padding:2rem 1.5rem;}
.albhdr{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem;}
.albgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px;}
.albc{border-radius:14px;overflow:hidden;cursor:pointer;position:relative;aspect-ratio:16/9;transition:transform .3s,box-shadow .3s;}
.albc:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(0,0,0,.15);}
.albcov{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.55);}
.albnocov{position:absolute;inset:0;background:linear-gradient(135deg,#2C241C,#1A1410);}
.albinfo{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:18px;}
.albname{font-family:'Playfair Display',serif;font-size:20px;color:white;text-shadow:0 1px 8px rgba(0,0,0,.4);}
.albgold{width:28px;height:1px;background:var(--gold);margin:6px 0;}
.albcnt{font-size:11px;color:rgba(255,255,255,.65);letter-spacing:2px;text-transform:uppercase;}
.albadmbtns{position:absolute;top:10px;right:10px;display:flex;gap:5px;opacity:0;transition:opacity .2s;}
.albc:hover .albadmbtns{opacity:1;}
.albadmbtn{width:28px;height:28px;border-radius:50%;background:rgba(0,0,0,.6);border:none;color:white;font-size:11px;display:flex;align-items:center;justify-content:center;}
.albadmbtn:hover{background:rgba(0,0,0,.9);}
.nalbtn{display:flex;align-items:center;gap:5px;padding:8px 16px;border-radius:100px;background:var(--ink);color:var(--c);font-size:11px;letter-spacing:1.5px;text-transform:uppercase;border:none;transition:background .2s;}
.nalbtn:hover{background:#2C241C;}

/* ALBUM DETAIL */
#alb-detail{min-height:100vh;background:var(--c);}
.adhdr{padding:1.25rem;display:flex;align-items:center;gap:.875rem;border-bottom:1px solid var(--b);}
.adbk{padding:6px 14px;border-radius:100px;border:1px solid var(--b);background:none;color:var(--ink2);font-size:12px;transition:all .2s;}
.adbk:hover{border-color:var(--ink);color:var(--ink);}
.adtitle{font-family:'Playfair Display',serif;font-size:20px;color:var(--ink);flex:1;}
.adgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:7px;padding:1.25rem;max-width:1080px;margin:0 auto;}

/* ══ SLIDESHOW — FULL REBUILD ══════════════════════════ */
#ss-tab audio{display:none !important;}
#ss-tab ::-webkit-media-controls{display:none !important;}
#ss-tab{position:fixed !important;inset:0 !important;height:100vh !important;width:100vw !important;background:#060402 !important;z-index:200 !important;overflow:hidden !important;display:flex !important;align-items:stretch !important;}
#ss-tab.hidden{display:none !important;}