/* =========================================================
   bluethemegallery.css — iOS Glass Gallery System (Blue/Black/White)
   + Added: overlays, login modal, post modal, social bar, image layouts (1/2/3/4/5+)
   ========================================================= */

/* =========================
   DESIGN TOKENS
========================= */
:root{
  --blue:#0b66ff;
  --blue2:#003893;
  --orange:#ff8a00;
  --red:#DC143C;
  --gold:#ffcc33;

  --bg:#f6f9ff;
  --text:#0f172a;
  --muted:#475569;

  --line: rgba(15,23,42,.10);
  --shadow: 0 18px 50px rgba(15,23,42,.12);
  --radius: 18px;

  --glass-bg: rgba(255,255,255,.58);
  --glass-bg-strong: rgba(255,255,255,.66);
  --glass-border: rgba(255,255,255,.40);
  --glass-highlight: rgba(255,255,255,.55);
  --glass-blur: 26px;

  --tile-bg: rgba(255,255,255,.46);
  --tile-border: rgba(255,255,255,.28);

  --overlay: rgba(0,0,0,.48);

  --active-outline: rgba(11,102,255,.30);
  --active-shadow: rgba(11,102,255,.18);

  --danger-outline: rgba(220,20,60,.30);
}

[data-theme="dark"]{
  --bg:#070a14;
  --text:#eef2ff;
  --muted: rgba(238,242,255,.75);

  --line: rgba(255,255,255,.12);
  --shadow: 0 22px 70px rgba(0,0,0,.45);

  --glass-bg: rgba(12,16,34,.50);
  --glass-bg-strong: rgba(12,16,34,.58);
  --glass-border: rgba(255,255,255,.14);
  --glass-highlight: rgba(255,255,255,.18);
  --glass-blur: 28px;

  --tile-bg: rgba(255,255,255,.05);
  --tile-border: rgba(255,255,255,.10);

  --overlay: rgba(0,0,0,.58);

  --active-outline: rgba(255,138,0,.26);
  --active-shadow: rgba(255,138,0,.18);

  --danger-outline: rgba(255,90,120,.28);
}

/* =========================
   BASE
========================= */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
  overflow-x:hidden;
  -webkit-tap-highlight-color: transparent;
}
a{color:inherit;text-decoration:none}
.container{width:min(980px,92vw);margin:0 auto;max-width:100%}
img{-webkit-touch-callout:none}

/* =========================
   BACKGROUND
========================= */
.bg-wrap{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;
  overflow:hidden;
}
.bg-grad{
  position:absolute;
  inset:-20%;
  background:
    radial-gradient(900px 600px at 14% 10%, rgba(11,102,255,.18), transparent 60%),
    radial-gradient(900px 600px at 86% 16%, rgba(0,56,147,.16), transparent 60%),
    radial-gradient(1100px 700px at 50% 90%, rgba(255,138,0,.12), transparent 65%),
    linear-gradient(180deg, rgba(255,255,255,.50), rgba(255,255,255,0));
  transform: translateY(var(--parY,0px));
  transition: transform .05s linear;
}
.flagMark{
  position:absolute;
  right:-120px;
  top:140px;
  width:520px;
  opacity:.14;
  transform: rotate(8deg) translateY(var(--parY2,0px));
  transition: transform .05s linear;
}
[data-theme="dark"] .flagMark{opacity:.18}

/* =========================
   GLASS UTILITY
========================= */
.nav, .pill, .chip, .tag, .postCard, .calPanel, .calHead, .calBtn, .dayCell, .sheetCard{
  backdrop-filter: blur(var(--glass-blur)) saturate(180%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(180%);
}

/* =========================
   NAV
========================= */
.nav{
  position:sticky;top:0;z-index:60;
  background: rgba(255,255,255,.62);
  border-bottom:1px solid var(--line);
}
[data-theme="dark"] .nav{ background: rgba(7,10,20,.55); }

.navInner{
  padding:14px 0;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.brandLink{display:flex;align-items:center;gap:12px;min-width:0}

.logo{
  width:44px;height:44px;border-radius:14px;
  background: linear-gradient(135deg, var(--blue), var(--orange));
  display:grid;place-items:center;color:#fff;
  box-shadow:var(--shadow);
  overflow:hidden;flex:0 0 auto;
}
[data-theme="dark"] .logo{ box-shadow: 0 24px 80px rgba(0,0,0,.45); }
.logo img{width:40px;height:40px;object-fit:contain;display:block}

.brandText{min-width:0}
.brandText b{
  display:block;font-size:16px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.brandText small{
  display:block;font-weight:800;color:var(--muted);
  margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

.navActions{
  display:flex;gap:10px;align-items:center;
  flex-wrap:wrap;justify-content:flex-end;
}

/* =========================
   PILLS / CHIPS / TAGS
========================= */
.pill, .chip, .tag{
  border-radius:999px;
  border:1px solid var(--glass-border);
  background: var(--glass-bg);
  box-shadow: inset 0 1px 0 var(--glass-highlight);
  font-weight:900;
  color:var(--text);
  user-select:none;
  display:inline-flex;
  gap:10px;
  align-items:center;
}

.pill{
  padding:10px 12px;
  cursor:pointer;
  transition:.2s;
}
.pill:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(15,23,42,.10)}
.pill.iconOnly{padding:10px 12px}
.pill.iconOnly span{display:none}

.chips{display:flex;gap:10px;flex-wrap:wrap;padding:14px 0}
.chip{
  padding:9px 12px;
  cursor:pointer;
  max-width:100%;
  transition: .18s ease;
}
.chip.active{
  outline:2px solid var(--active-outline);
  box-shadow: 0 10px 24px var(--active-shadow);
}
.chip i{opacity:.9}
.userChip{outline:2px solid rgba(255,138,0,.22)}

.tag{
  padding:8px 12px;
  max-width:100%;
}
.tag span{
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  max-width:64vw
}

/* =========================
   POST CARDS
========================= */
.postCard{
  background: var(--glass-bg);
  border:1px solid var(--glass-border);
  border-radius:var(--radius);
  box-shadow: var(--shadow);
  padding:14px;
  margin:14px 0;
  overflow:hidden;
  position:relative;
}
.postCard::before{
  content:"";
  position:absolute; inset:-2px;
  background:
    radial-gradient(900px 220px at 18% 0%, rgba(255,255,255,.40), transparent 62%),
    radial-gradient(700px 260px at 92% 12%, rgba(255,255,255,.22), transparent 58%),
    linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0));
  pointer-events:none;
}
[data-theme="dark"] .postCard::before{
  background:
    radial-gradient(900px 220px at 18% 0%, rgba(255,255,255,.14), transparent 62%),
    radial-gradient(700px 260px at 92% 12%, rgba(255,255,255,.08), transparent 58%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0));
}

.metaRow{display:flex;align-items:center;justify-content:space-between;gap:10px;position:relative;z-index:1}
.metaLeft{display:flex;gap:10px;align-items:center;flex-wrap:wrap;min-width:0;position:relative;z-index:1}
.rightNum{font-weight:950;color:var(--muted);position:relative;z-index:1}

.postTitle{
  margin:10px 0 8px;
  font-size:22px;
  letter-spacing:-.4px;
  line-height:1.25;
  word-break:break-word;
  position:relative;z-index:1;
}
.postBody{
  margin:0;
  color:var(--muted);
  font-weight:850;
  line-height:1.75;
  white-space:pre-wrap;
  word-break:break-word;
  position:relative;z-index:1;
}

.footerHint{
  text-align:center;
  color:var(--muted);
  font-weight:900;
  padding:22px 0 34px;
}

/* =========================
   NEW: Photo layouts (1/2/3/4/5+)
========================= */
.pgrid{
  margin-top:12px;
  display:grid;
  gap:10px;
  width:100%;
  position:relative;
  z-index:1;
}
.ptile{
  position:relative;
  border-radius:16px;
  overflow:hidden;
  border:1px solid var(--line);
  background: var(--tile-bg);
  cursor:pointer;
  user-select:none;
  -webkit-user-select:none;
  touch-action: manipulation;
  transform: translateZ(0);
  transition: transform .16s ease, box-shadow .16s ease;
}
.ptile:hover{transform: translateY(-1px);box-shadow: 0 16px 40px rgba(15,23,42,.10);}
[data-theme="dark"] .ptile:hover{box-shadow: 0 22px 60px rgba(0,0,0,.40);}

.ptile::before{content:"";display:block;padding-top:70%}
.ptile img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  pointer-events:none;
  user-drag:none;
  -webkit-user-drag:none;
}

/* layout rules */
.pgrid-1{grid-template-columns: 1fr;}
.pgrid-1 .ptile::before{padding-top:56%}

.pgrid-2{grid-template-columns: repeat(2, 1fr);}
.pgrid-2 .ptile::before{padding-top:80%}

.pgrid-3{grid-template-columns: repeat(2, 1fr); grid-template-rows: 1fr 1fr;}
.pgrid-3 .ptile:nth-child(1){grid-column: 1 / 2; grid-row: 1 / 3;}
.pgrid-3 .ptile:nth-child(1)::before{padding-top:160%}
.pgrid-3 .ptile:nth-child(2), .pgrid-3 .ptile:nth-child(3){grid-column: 2 / 3;}
.pgrid-3 .ptile:nth-child(2)::before,
.pgrid-3 .ptile:nth-child(3)::before{padding-top:80%}

.pgrid-4{grid-template-columns: repeat(2, 1fr);}
.pgrid-4 .ptile::before{padding-top:80%}

.pgrid-5{grid-template-columns: repeat(2, 1fr);}
.pgrid-5 .ptile::before{padding-top:80%}

/* +X overlay */
.moreOverlay{
  position:absolute; inset:0;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  background: rgba(0,0,0,.45);
  color:#fff;
  font-weight:950;
  font-size:28px;
  letter-spacing:.5px;
  text-shadow:0 10px 30px rgba(0,0,0,.6);
}
.moreOverlay small{font-size:12px;opacity:.9;margin-top:6px;font-weight:900}

/* =========================
   NEW: Social row
========================= */
.socialRow{
  margin-top:12px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  position:relative;
  z-index:1;
}
.sBtn{
  border-radius:999px;
  border:1px solid var(--glass-border);
  background: var(--glass-bg);
  box-shadow: inset 0 1px 0 var(--glass-highlight);
  padding:9px 12px;
  display:inline-flex;
  gap:10px;
  align-items:center;
  cursor:pointer;
  font-weight:950;
  color:var(--text);
  transition:.15s ease;
}
.sBtn:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(15,23,42,.10)}
.sBtn .num{opacity:.9}
.sBtn.on{
  outline:2px solid var(--active-outline);
  box-shadow: 0 10px 24px var(--active-shadow);
}
[data-theme="dark"] .sBtn.on{
  outline:2px solid rgba(255,138,0,.22);
  box-shadow: 0 10px 24px rgba(255,138,0,.14);
}

/* =========================
   NEW: Overlay sheets (fullscreen containers)
========================= */
.overlay{
  position:fixed; inset:0;
  background: var(--overlay);
  z-index:8500;
  display:none;
}
.overlay.show{display:block}

.sheet{
  position:fixed; left:0; right:0; bottom:0;
  z-index:8600;
  transform: translateY(110%);
  transition: transform .22s ease;
  padding: 10px 10px 16px;
}
.sheet.show{transform: translateY(0)}

.sheetCard{
  width:min(980px, 100%);
  margin:0 auto;
  background: var(--glass-bg);
  border:1px solid var(--glass-border);
  border-radius: 22px 22px 18px 18px;
  box-shadow: var(--shadow);
  overflow:hidden;
  position:relative;
  max-height: calc(100vh - 26px);
  overflow:auto;
}
.sheetCard::before{
  content:"";
  position:absolute; inset:-2px;
  background:
    radial-gradient(900px 220px at 20% 0%, rgba(255,255,255,.40), transparent 60%),
    radial-gradient(700px 260px at 90% 10%, rgba(255,255,255,.22), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0));
  pointer-events:none;
}
[data-theme="dark"] .sheetCard::before{
  background:
    radial-gradient(900px 220px at 20% 0%, rgba(255,255,255,.14), transparent 60%),
    radial-gradient(700px 260px at 90% 10%, rgba(255,255,255,.08), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0));
}

.sheetTop{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding: 12px 12px;
  border-bottom:1px solid rgba(0,0,0,.08);
  background: var(--glass-bg-strong);
  position:sticky; top:0; z-index:5;
}
[data-theme="dark"] .sheetTop{border-bottom-color: rgba(255,255,255,.10)}

.sheetTitle{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.miniTag{
  border-radius:999px;
  border:1px solid var(--glass-border);
  background: var(--glass-bg);
  box-shadow: inset 0 1px 0 var(--glass-highlight);
  padding:8px 12px;
  display:inline-flex; gap:10px; align-items:center;
  font-weight:950;
}

.xBtn{
  width:40px;height:40px;border-radius:999px;
  border:1px solid var(--glass-border);
  background: var(--glass-bg);
  box-shadow: inset 0 1px 0 var(--glass-highlight);
  cursor:pointer;
  display:grid; place-items:center;
}
.xBtn:active{transform:scale(.98)}

.mTitle{margin:12px 12px 6px;font-size:20px;font-weight:950;letter-spacing:-.3px;position:relative;z-index:1}
.mBody{margin:0 12px 10px;color:var(--muted);font-weight:850;line-height:1.75;white-space:pre-wrap;position:relative;z-index:1}

.hintSmall{margin:10px 12px 14px;color:var(--muted);font-weight:850;font-size:12px}

/* =========================
   NEW: Slider
========================= */
.sliderWrap{padding: 8px 12px 12px; position:relative; z-index:1}
.slider{
  width:100%;
  display:flex;
  transition: transform .22s ease;
  will-change: transform;
}
.slide{min-width:100%; border-radius:16px; overflow:hidden; border:1px solid var(--line); background: rgba(0,0,0,.15)}
.slide img{width:100%;height:320px;object-fit:contain;background:rgba(0,0,0,.6);display:block}
.sliderNav{
  margin-top:10px;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.vBadge{
  padding:9px 12px;border-radius:999px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.14);
  color:var(--text);
  font-weight:950;
  display:inline-flex; gap:10px; align-items:center;
}
[data-theme="dark"] .vBadge{color:#eef2ff;border-color: rgba(255,255,255,.18)}
.vBtn{
  width:38px;height:38px;border-radius:999px;
  border:1px solid var(--glass-border);
  background: var(--glass-bg);
  box-shadow: inset 0 1px 0 var(--glass-highlight);
  cursor:pointer; display:grid; place-items:center; font-weight:900;
}
.vBtn:active{transform:scale(.98)}

/* =========================
   NEW: Modal social
========================= */
.modalSocial{
  padding: 0 12px 12px;
  display:flex;gap:10px;flex-wrap:wrap;align-items:center;
}
.modalSocial .hintSmall{margin:0;padding:0}

/* =========================
   NEW: Login UI
========================= */
.loginBox{
  padding: 10px 12px 8px;
  display:flex; gap:10px; flex-wrap:wrap; align-items:center;
}
.loginBox input{
  flex:1 1 260px;
  border-radius:14px;
  border:1px solid var(--glass-border);
  background: var(--glass-bg);
  padding:12px 12px;
  font-weight:900;
  color:var(--text);
  outline:none;
}
.loginStatus{
  margin: 8px 12px 0;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  font-weight:900;
}
.loginStatus.ok{outline:2px solid rgba(22,163,74,.25)}
.loginStatus.bad{outline:2px solid rgba(239,68,68,.25)}

/* =========================
   NEW: Comments
========================= */
.commentsBox{padding: 0 12px 16px; position:relative; z-index:1}
.cHead{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding: 10px 0 8px;
}
.cHead b{font-weight:950}
.cCount{
  padding:6px 10px;border-radius:999px;
  border:1px solid var(--glass-border);
  background: var(--glass-bg);
  font-weight:950;
}

.cComposer{
  display:flex; gap:10px; align-items:center;
  margin: 6px 0 10px;
}
.cComposer input{
  flex:1;
  border-radius:14px;
  border:1px solid var(--glass-border);
  background: var(--glass-bg);
  padding:12px 12px;
  font-weight:900;
  color:var(--text);
  outline:none;
}
.cSend{
  width:46px;height:46px;border-radius:14px;
  border:1px solid var(--glass-border);
  background: var(--glass-bg-strong);
  box-shadow: inset 0 1px 0 var(--glass-highlight);
  cursor:pointer;
  display:grid; place-items:center;
}
.cSend:active{transform:scale(.98)}

.replyBar{
  margin: 0 0 10px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  font-weight:900;
}
.replyInfo{color:var(--muted)}
.replyInfo span{color:var(--text)}

.cList{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.cItem{
  border-radius: 16px;
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  box-shadow: inset 0 1px 0 var(--glass-highlight);
  padding: 10px 12px;
}
.cItem.reply{margin-left:22px; opacity:.98}
.cTop{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  font-weight:950;
}
.cTop span{color:var(--muted); font-weight:850; font-size:12px}
.cBody{
  margin-top:6px;
  color:var(--muted);
  font-weight:900;
  line-height:1.6;
  white-space:pre-wrap;
  word-break:break-word;
}
.cActions{margin-top:8px; display:flex; gap:10px; flex-wrap:wrap}
.tinyBtn{
  border-radius:999px;
  border:1px solid var(--glass-border);
  background: var(--glass-bg);
  padding:7px 10px;
  font-weight:950;
  cursor:pointer;
  display:inline-flex; gap:8px; align-items:center;
}
.tinyBtn:active{transform:scale(.985)}

.cMoreRow{margin-top:12px; display:flex; justify-content:center}

/* =========================
   CALENDAR (your original kept)
========================= */
.calSheetOverlay{
  position:fixed; inset:0;
  background: var(--overlay);
  z-index:8500;
  display:none;
}
.calSheetOverlay.show{display:block}

.calSheet{
  position:fixed; left:0; right:0; bottom:0;
  z-index:8600;
  transform: translateY(110%);
  transition: transform .22s ease;
  padding: 10px 10px 16px;
}
.calSheet.show{transform: translateY(0)}

.calPanel{
  width:min(980px, 100%);
  margin:0 auto;
  background: var(--glass-bg);
  border:1px solid var(--glass-border);
  border-radius: 22px 22px 18px 18px;
  box-shadow: var(--shadow);
  overflow:hidden;
  position:relative;
}
.calPanel::before{
  content:"";
  position:absolute; inset:-2px;
  background:
    radial-gradient(900px 220px at 20% 0%, rgba(255,255,255,.40), transparent 60%),
    radial-gradient(700px 260px at 90% 10%, rgba(255,255,255,.22), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0));
  pointer-events:none;
}
[data-theme="dark"] .calPanel::before{
  background:
    radial-gradient(900px 220px at 20% 0%, rgba(255,255,255,.14), transparent 60%),
    radial-gradient(700px 260px at 90% 10%, rgba(255,255,255,.08), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0));
}

.calHead{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding: 12px 12px;
  border-bottom:1px solid rgba(0,0,0,.08);
  background: var(--glass-bg-strong);
  position:relative;
  z-index:1;
}
[data-theme="dark"] .calHead{border-bottom-color: rgba(255,255,255,.10)}

.calHeadLeft{display:flex;align-items:center;gap:10px;min-width:0}
.calTitle{
  font-weight:950;
  letter-spacing:-.2px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:62vw
}

.calBtns{display:flex;align-items:center;gap:8px}
.calBtn{
  width:38px;height:38px;border-radius:999px;
  border:1px solid var(--glass-border);
  background: rgba(255,255,255,.50);
  box-shadow: inset 0 1px 0 var(--glass-highlight);
  cursor:pointer;
  display:grid;place-items:center;
  font-weight:900;
  transition: transform .12s ease, box-shadow .12s ease;
}
[data-theme="dark"] .calBtn{background: rgba(255,255,255,.06)}
.calBtn:active{transform: scale(.98)}

.calBody{padding:12px; position:relative; z-index:1}

.calGridHead{
  display:grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap:8px;
  margin-bottom:10px;
}
.dow{
  text-align:center;
  font-weight:950;
  color: var(--muted);
  font-size:12px;
  letter-spacing:.6px;
}

.calGrid{
  display:grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap:8px;
}

.dayCell{
  position:relative;
  height:46px;
  border-radius:14px;
  border:1px solid var(--tile-border);
  background: var(--tile-bg);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:950;
  overflow:hidden;
  transition: transform .12s ease, box-shadow .12s ease, outline-color .12s ease;
}
.dayCell:active{transform: scale(.985)}
.dayCell.muted{opacity:.35; cursor:default}
.dayCell.today{outline: 2px solid rgba(255,204,51,.38)}
.dayCell.selected{
  outline: 2px solid var(--active-outline);
  box-shadow: 0 10px 22px var(--active-shadow);
}

.badgeCount{
  position:absolute;
  top:6px; right:6px;
  min-width:18px;
  height:18px;
  padding:0 5px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:11px;
  font-weight:900;
  line-height:1;
  border-radius:999px;
  background: rgba(255,255,255,.85);
  color:#0f172a;
  border: 1px solid rgba(0,0,0,.08);
  backdrop-filter: blur(10px) saturate(160%);
  -webkit-backdrop-filter: blur(10px) saturate(160%);
  box-shadow:
    0 4px 12px rgba(0,0,0,.12),
    inset 0 1px 0 rgba(255,255,255,.9);
}
.dayCell.selected .badgeCount{
  background: rgba(11,102,255,.95);
  color:#fff;
  border-color: rgba(11,102,255,.95);
}
[data-theme="dark"] .dayCell.selected .badgeCount{
  background: rgba(255,138,0,.92);
  border-color: rgba(255,138,0,.92);
  color:#111;
}
.dayCell.today .badgeCount{
  background: rgba(255,204,51,.92);
  color:#111;
  border-color: rgba(255,204,51,.9);
}
[data-theme="dark"] .badgeCount{
  background: rgba(255,255,255,.12);
  color:#eef2ff;
  border-color: rgba(255,255,255,.18);
  box-shadow:
    0 4px 14px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.12);
}

.calFooter{
  padding:12px;
  border-top:1px solid rgba(255,255,255,.18);
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:center;
  position:relative;
  z-index:1;
}
[data-theme="dark"] .calFooter{border-top-color: rgba(255,255,255,.10)}
.calHint{color: var(--muted); font-weight:900; font-size:12px}
.calQuick{display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end}

/* =========================
   RESPONSIVE
========================= */
@media (max-width: 520px){
  .navActions{gap:8px}
  .pill{padding:10px 11px}
  .postTitle{font-size:20px}
  .slide img{height:260px}
}

@media (max-width: 380px){
  .brandText small{display:none}
  .ptile::before{padding-top:78%}
}
/* ✅ Slider: allow vertical scroll of sheet, but we handle horizontal swipe */
#sliderWrap, #slider{
  touch-action: pan-y;              /* don't let browser do horizontal gestures here */
  -webkit-user-select: none;
  user-select: none;
}

 /* ✅ stop image “drag ghost” */
#slider img{
  -webkit-user-drag: none;
  user-drag: none;
  pointer-events: none;             /* avoids dragging the image itself */
}

/* ============================
   PHOTO FULLSCREEN LIGHTBOX
   ============================ */
.lb{position:fixed; inset:0; z-index:999999; display:none; align-items:center; justify-content:center;
  background: rgba(0,0,0,.92); padding: 14px;}
.lb.show{display:flex;}
.lbImg{max-width: 100%; max-height: 100%; width:auto; height:auto; object-fit:contain; border-radius: 16px;}
.lbTop{position:fixed; top:10px; left:10px; right:10px; display:flex; justify-content:space-between; align-items:center; z-index:1000000;}
.lbBtn{border:0; background: rgba(255,255,255,.10); color:#fff; border:1px solid rgba(255,255,255,.18);
  border-radius: 14px; padding:10px 12px; font-weight:700; backdrop-filter: blur(12px);}
.lbBtn:active{transform: translateY(1px);}
.lbCount{color:#fff; opacity:.85; font-weight:700; font-size:14px; padding:10px 12px;
  background: rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.18); border-radius:14px; backdrop-filter: blur(12px);}
  /* Social row labels + share text */
.socialRow .sBtn{display:inline-flex; align-items:center; gap:8px;}
.socialRow .lbl{font-size:12px; font-weight:800; opacity:.85;}
.socialRow .num{font-weight:900;}
.socialRow .shareText{
  margin-left:auto;
  font-size:12px;
  font-weight:800;
  opacity:.75;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width: 46%;
}
@media (max-width:560px){
  .socialRow .lbl{display:none;}          /* mobile: icons + numbers only */
  .socialRow .shareText{max-width: 55%;}
}
/* ============================
   Login / Logout Buttons
   ============================ */

.authBtn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 16px;
  font-weight:800;
  font-size:14px;
  border-radius:16px;
  transition:all .2s ease;
}

.authBtn i{
  font-size:15px;
}

/* Login style */
#loginBtn{
  background:linear-gradient(135deg,#0b66ff,#0044cc);
  color:#fff;
  border:0px solid rgba(255,255,255,.15);
}

/* Logout style */
#logoutBtn{
  background:linear-gradient(135deg,#ef4444,#b91c1c);
  color:#fff;
  border:1px solid rgba(255,255,255,.15);
}

.authBtn:hover{
  transform:translateY(-2px);
  box-shadow:0 6px 18px rgba(0,0,0,.25);
}

.authBtn:active{
  transform:translateY(0);
}
/* ============================
   Clean Modal Scroll System
   ============================ */

/* Modal container scrolls */
#postSheet .sheetCard{
  max-height: 92vh;
  overflow-y: auto;
  display: block;
  padding-bottom: 20px;
}

/* Keep top bar visible */
#postSheet .sheetTop{
  position: sticky;
  top: 0;
  z-index: 50;
  background: inherit;
  backdrop-filter: blur(14px);
}

/* Limit comment list height */
#postSheet #cList{
  max-height: 360px;       /* roughly 10 comments visible */
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 6px;
}

/* Prevent page scroll bounce */
body{
  overscroll-behavior: none;
}

/* Optional smooth scroll */
#postSheet #cList{
  -webkit-overflow-scrolling: touch;
} 
/* ============================
   Reply Button Dark Mode Fix
   ============================ */

/* Default reply button */
.replyBtn{
  font-weight:700;
  font-size:13px;
  padding:6px 10px;
  border-radius:12px;
  transition:all .2s ease;
}

/* Dark theme override */
[data-theme="dark"] .replyBtn{
  color:#ffffff !important;
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.18);
}

/* Hover effect */
[data-theme="dark"] .replyBtn:hover{
  background:rgba(255,255,255,0.18);
  transform:translateY(-1px);
}

/* Light theme (optional improvement) */
[data-theme="light"] .replyBtn{
  color:#111;
  background:rgba(0,0,0,0.05);
  border:1px solid rgba(0,0,0,0.08);
}

[data-theme="light"] .replyBtn:hover{
  background:rgba(0,0,0,0.1);
} 
/* ============================
   Slider Buttons Day/Night
   ============================ */

/* COMMON STYLE */
#sPrev,
#sNext,
#postClose{
  font-weight:800;
  transition:all .2s ease;
}

#sCount{
  font-weight:800;
  letter-spacing:.5px;
}

/* ============================
   LIGHT MODE
   ============================ */
[data-theme="light"] #sPrev,
[data-theme="light"] #sNext,
[data-theme="light"] #postClose{
  background:rgba(255,255,255,0.85);
  color:#111;
  border:1px solid rgba(0,0,0,0.1);
}

[data-theme="light"] #sCount{
  background:rgba(255,255,255,0.85);
  color:#111;
  border:1px solid rgba(0,0,0,0.1);
}

/* Hover (light) */
[data-theme="light"] #sPrev:hover,
[data-theme="light"] #sNext:hover,
[data-theme="light"] #postClose:hover{
  background:#ffffff;
  box-shadow:0 4px 12px rgba(0,0,0,0.15);
}

/* ============================
   DARK MODE
   ============================ */
[data-theme="dark"] #sPrev,
[data-theme="dark"] #sNext,
[data-theme="dark"] #postClose{
  background:rgba(0,0,0,0.65);
  color:#ffffff;
  border:1px solid rgba(255,255,255,0.2);
}

[data-theme="dark"] #sCount{
  background:rgba(0,0,0,0.65);
  color:#ffffff;
  border:1px solid rgba(255,255,255,0.2);
}

/* Hover (dark) */
[data-theme="dark"] #sPrev:hover,
[data-theme="dark"] #sNext:hover,
[data-theme="dark"] #postClose:hover{
  background:rgba(0,0,0,0.9);
}

/* =========================================================
   HARD LOCK: All sheets & overlays hidden unless .show
   CSS-only fix (no JS change, no HTML change)
   ========================================================= */

/* 1️⃣ Overlays (dark background) */
.overlay,
#loginOverlay,
#postOverlay,
#calOverlay,
.calSheetOverlay{
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* When JS adds .show */
.overlay.show,
#loginOverlay.show,
#postOverlay.show,
#calOverlay.show,
.calSheetOverlay.show{
  display: block !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* 2️⃣ Sheets (containers) */
.sheet,
#loginSheet,
#postSheet,
#calSheet,
.calSheet{
  transform: translateY(120%) !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* When JS adds .show */
.sheet.show,
#loginSheet.show,
#postSheet.show,
#calSheet.show,
.calSheet.show{
  transform: translateY(0) !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* 3️⃣ Extra safety if aria-hidden is true */
.sheet[aria-hidden="true"],
#loginSheet[aria-hidden="true"],
#postSheet[aria-hidden="true"],
#calSheet[aria-hidden="true"]{
  transform: translateY(120%) !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
/* =========================================================
   MODAL LOCK (CSS-only)
   Hide all overlays/sheets unless .show exists
   Works with: .overlay/.sheet + calSheetOverlay/calSheet
   Also works with ids ending in Overlay/Sheet
   ========================================================= */

/* --- OVERLAYS: hidden by default --- */
.overlay,
.calSheetOverlay,
[id$="Overlay"]{
  display:none;
  opacity:0;
  pointer-events:none;
}

/* overlays visible only when .show */
.overlay.show,
.calSheetOverlay.show,
[id$="Overlay"].show{
  display:block;
  opacity:1;
  pointer-events:auto;
}

/* --- SHEETS: off-screen by default --- */
.sheet,
.calSheet,
[id$="Sheet"]{
  transform: translateY(120%);
  opacity:0;
  pointer-events:none;
}

/* sheets visible only when .show */
.sheet.show,
.calSheet.show,
[id$="Sheet"].show{
  transform: translateY(0);
  opacity:1;
  pointer-events:auto;
}

/* extra safety: aria-hidden=true must stay hidden */
.sheet[aria-hidden="true"],
.calSheet[aria-hidden="true"],
[id$="Sheet"][aria-hidden="true"]{
  transform: translateY(120%);
  opacity:0;
  pointer-events:none;
}

/* =========================================================
   ✅ ADD-ON OVERRIDES (NO REMOVALS)
   Center modals + stronger blur overlay + no background scroll
   (Must be at END so it wins)
   ========================================================= */

/* Theme-safe form colors inside modals */
input, button, textarea, select{ color: var(--text); }
[data-theme="dark"] input,
[data-theme="dark"] button,
[data-theme="dark"] textarea,
[data-theme="dark"] select{ color: var(--text); }

::placeholder{ color: rgba(71,85,105,.72); }
[data-theme="dark"] ::placeholder{ color: rgba(238,242,255,.55); }

/* Stronger overlay + blur (was too transparent) */
.overlay.show,
#loginOverlay.show,
#postOverlay.show,
#calOverlay.show,
.calSheetOverlay.show{
  background: rgba(0,0,0,.78) !important;
  backdrop-filter: blur(14px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(140%) !important;
}

/* =========================
   CENTER EVERYTHING (LOGIN/POST/CALENDAR)
   Override your bottom-sheet translate system ONLY when .show
========================= */

/* Make the sheet cover full screen and center content */
.sheet.show,
#loginSheet.show,
#postSheet.show,
#calSheet.show,
.calSheet.show{
  position: fixed !important;
  inset: 0 !important;
  display: grid !important;
  place-items: center !important;
  padding: 14px !important;
  transform: none !important;     /* kill translateY */
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* Also keep hidden state intact */
.sheet,
#loginSheet,
#postSheet,
#calSheet,
.calSheet{
  left: 0; right: 0; top: 0; bottom: 0; /* safe */
}

/* Centered modal card sizing */
#loginSheet .sheetCard,
#postSheet .sheetCard,
#calSheet .calPanel,
.calSheet .calPanel{
  width: min(980px, 94vw) !important;
  max-height: min(86vh, 820px) !important;
  border-radius: 22px !important;
  overflow: auto !important;
}

/* Sticky topbar stays visible */
#loginSheet .sheetTop,
#postSheet .sheetTop{
  position: sticky !important;
  top: 0 !important;
  z-index: 50 !important;
  backdrop-filter: blur(18px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(160%) !important;
}

/* Prevent full page scroll when any modal overlay is open (CSS-only) */
html:has(.overlay.show),
body:has(.overlay.show),
html:has(.calSheetOverlay.show),
body:has(.calSheetOverlay.show){
  overflow: hidden !important;
  overscroll-behavior: none !important;
}

/* Limit comment list internal scroll only */
#postSheet #cList{
  max-height: min(40vh, 360px) !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
}

/* =========================
   LIGHTBOX: center glass frame (CSS-only, no wrapper)
========================= */
.lb.show{
  backdrop-filter: blur(14px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(140%) !important;
}

/* Create a centered glass frame behind the image */
.lb.show::before{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%,-50%);
  width: min(980px, 94vw);
  height: min(78vh, 720px);
  border-radius: 22px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 34px 120px rgba(0,0,0,.55);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  pointer-events:none;
}

/* Ensure image stays above frame */
#lbImg, .lbImg{
  position: relative;
  z-index: 2;
  max-width: min(980px, 94vw);
  max-height: min(78vh, 720px);
  border-radius: 16px;
}

/* Lightbox top buttons always above */
.lbTop{ z-index: 1000000 !important; }

/* Mobile: give more height */
@media (max-width:520px){
  #loginSheet .sheetCard,
  #postSheet .sheetCard,
  #calSheet .calPanel{
    max-height: 88vh !important;
  }
  .lb.show::before{
    height: min(80vh, 640px);
  }
}