/* memories.css — upload dialog, profile gallery and lightbox (used by index.html + profile.html) */
:root{
  --mem-board:#0B3B2A; --mem-green:#00B875; --mem-green-d:#008F5A; --mem-danfo:#FFC72C;
  --mem-ink:#10261C; --mem-muted:#51645A; --mem-mint:#EAF7F0; --mem-line:rgba(11,59,42,.14);
}
html.mem-lock{ overflow:hidden; }

.mem-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em; padding:12px 22px;
  border-radius:999px; border:2px solid transparent; font:700 .98rem 'Figtree',system-ui,sans-serif;
  cursor:pointer; text-decoration:none; transition:transform .15s ease, background .2s ease, color .2s ease;
}
.mem-btn:hover{ transform:translateY(-1px); }
.mem-btn[disabled]{ opacity:.55; cursor:not-allowed; transform:none; }
.mem-btn-main{ background:var(--mem-green); color:#fff; }
.mem-btn-main:hover{ background:var(--mem-green-d); }
.mem-btn-ghost{ background:transparent; border-color:var(--mem-line); color:var(--mem-board); }
.mem-btn-ghost:hover{ background:var(--mem-mint); }
.mem-btn-danger{ background:#B3261E; color:#fff; }

/* ---------- upload dialog ---------- */
.mem-dialog{
  border:0; padding:0; border-radius:24px; width:min(640px, calc(100% - 24px));
  max-height:calc(100dvh - 24px); color:var(--mem-ink); background:#fff; overflow:hidden;
  box-shadow:0 40px 90px rgba(0,0,0,.45); font-family:'Figtree',system-ui,sans-serif;
}
.mem-dialog[open]{ display:flex; flex-direction:column; animation:memPop .28s cubic-bezier(.2,.9,.3,1.2); }
.mem-dialog::backdrop{ background:rgba(6,30,20,.72); backdrop-filter:blur(3px); }
@keyframes memPop{ from{ opacity:0; transform:translateY(16px) scale(.97); } }
.mem-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:20px 24px 8px; }
.mem-head h2{ margin:0; font:800 1.45rem/1.1 'Bricolage Grotesque','Figtree',sans-serif; color:var(--mem-board); }
.mem-x{ width:40px; height:40px; border-radius:50%; border:0; background:var(--mem-mint); color:var(--mem-board); font-size:1.5rem; line-height:1; cursor:pointer; }
.mem-body{ padding:8px 24px 16px; overflow:auto; flex:1; }
.mem-foot{ display:flex; flex-wrap:wrap; gap:10px; justify-content:flex-end; padding:14px 24px 20px; border-top:1px solid var(--mem-line); }
.mem-muted{ color:var(--mem-muted); margin:0 0 8px; }

.mem-drop{
  display:block; text-align:center; padding:28px 18px; border:2px dashed var(--mem-green); border-radius:18px;
  background:var(--mem-mint); cursor:pointer; transition:background .2s ease, transform .2s ease;
}
.mem-drop:hover, .mem-drop.is-over{ background:#d9f2e6; transform:scale(1.01); }
.mem-drop strong{ display:block; font:800 1.15rem 'Bricolage Grotesque','Figtree',sans-serif; color:var(--mem-board); margin-bottom:4px; }
.mem-drop span{ color:var(--mem-muted); font-size:.92rem; }
.mem-file{ position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }

.mem-list{ list-style:none; margin:14px 0 0; padding:0; display:grid; gap:10px; }
.mem-row{ display:grid; grid-template-columns:56px 1fr auto; gap:12px; align-items:center; padding:8px; border:1px solid var(--mem-line); border-radius:14px; }
.mem-row img{ width:56px; height:56px; object-fit:cover; border-radius:10px; background:var(--mem-mint); }
.mem-row input[type=text]{ width:100%; padding:9px 12px; border:1px solid var(--mem-line); border-radius:10px; font:inherit; font-size:.95rem; }
.mem-row .mem-status{ display:block; font-size:.82rem; margin-top:4px; color:var(--mem-muted); }
.mem-row.is-ok .mem-status{ color:var(--mem-green-d); font-weight:700; }
.mem-row.is-err .mem-status{ color:#B3261E; font-weight:600; }
.mem-bar{ height:4px; border-radius:2px; background:var(--mem-line); margin-top:6px; overflow:hidden; }
.mem-bar i{ display:block; height:100%; width:0; background:var(--mem-green); transition:width .15s linear; }
.mem-rm{ border:0; background:none; color:var(--mem-muted); font-size:1.3rem; cursor:pointer; padding:6px 10px; border-radius:8px; }
.mem-rm:hover{ background:var(--mem-mint); }

/* ---------- gallery ---------- */
.mem-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(150px,1fr)); gap:12px; }
.mem-tile{ position:relative; padding:0; border:0; border-radius:14px; overflow:hidden; cursor:pointer; background:var(--mem-mint); aspect-ratio:1; }
.mem-tile img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .35s ease; }
.mem-tile:hover img{ transform:scale(1.05); }
.mem-tile-cap{ position:absolute; left:0; right:0; bottom:0; padding:22px 10px 8px; text-align:left; color:#fff; font:600 .8rem/1.25 'Figtree',sans-serif; background:linear-gradient(transparent, rgba(0,0,0,.7)); }
.mem-tile.is-new{ animation:memNew .6s cubic-bezier(.2,.9,.3,1.3); }
@keyframes memNew{ from{ opacity:0; transform:scale(.7) rotate(-4deg); } }
.mem-empty{ text-align:center; padding:34px 16px; border:2px dashed var(--mem-line); border-radius:18px; color:var(--mem-muted); }
.mem-empty p{ margin:0 0 14px; }

/* ---------- lightbox ---------- */
.mem-light{ border:0; padding:0; background:transparent; width:min(900px, calc(100% - 16px)); max-height:calc(100dvh - 16px); color:#fff; overflow:visible; }
.mem-light::backdrop{ background:rgba(4,20,13,.9); }
.mem-light-in{ display:flex; flex-direction:column; align-items:center; gap:12px; }
.mem-light img{ max-width:100%; max-height:calc(100dvh - 190px); border-radius:12px; object-fit:contain; background:#000; }
.mem-light p{ margin:0; font:600 1.05rem/1.35 'Bricolage Grotesque','Figtree',sans-serif; text-align:center; max-width:60ch; }
.mem-light-bar{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }
.mem-light .mem-btn-ghost{ color:#fff; border-color:rgba(255,255,255,.4); }
.mem-light .mem-btn-ghost:hover{ background:rgba(255,255,255,.14); }

:focus-visible.mem-btn, .mem-tile:focus-visible, .mem-drop:focus-within{ outline:3px solid var(--mem-green); outline-offset:3px; }
@media (prefers-reduced-motion:reduce){ .mem-dialog[open], .mem-tile.is-new{ animation:none; } .mem-tile img{ transition:none; } }