:root{
  --bg: #fffdf9;
  --card: #ffffff;
  --ink: #1f2937;
  --muted: #6b7280;
  --primary: #ff7ac3;  /* hồng tươi */
  --primary-2: #ffd166; /* vàng tươi */
  --accent: #6ee7b7;    /* xanh bạc hà */
  --ring: rgba(255, 122, 195, .35);
  --shadow: 0 8px 30px rgba(31,41,55,.08);
  --radius: 16px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  color:var(--ink);
  background:
    radial-gradient(1200px 800px at -10% -10%, var(--primary-2) 0%, transparent 60%),
    radial-gradient(1200px 800px at 110% 10%, var(--accent) 0%, transparent 60%),
    var(--bg);
}

/* Lock screen */
.lock{
  position:fixed; inset:0;
  display:grid; place-items:center;
  background: linear-gradient(135deg, rgba(255,122,195,.15), rgba(110,231,183,.12));
  padding:24px;
}
.lock-card{
  width:min(520px, 100%);
  background:var(--card);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:24px;
  border: 1px solid rgba(31,41,55,.06);
}
.brand{
  display:flex; align-items:center; gap:10px;
  font-weight:800; letter-spacing:.2px;
  font-size:1.1rem;
}
.muted{color:var(--muted); margin:8px 0 16px}
.field{
  display:flex; gap:8px; align-items:center;
  background:#fafafa; border:1px solid rgba(31,41,55,.08);
  border-radius:12px; padding:6px 8px;
}
.field input{flex:1; border:none; background:transparent; padding:10px 8px; font-size:1rem; outline:none}
button{
  border:none; border-radius:12px; padding:10px 14px; cursor:pointer; font-weight:600;
}
button.primary{
  background: linear-gradient(90deg, var(--primary), #ff93cf);
  color:white; margin-top:10px; width:100%;
  box-shadow:0 8px 20px rgba(255,122,195,.3);
}
button.primary:active{transform:translateY(1px)}
button.ghost{background:transparent; color:var(--muted)}
.error{color:#dc2626; min-height:1.2em}
.hint{margin-top:10px}

/* App chrome */
.topbar{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:12px 16px;
  backdrop-filter:saturate(140%) blur(4px);
  background:linear-gradient(90deg, rgba(255,122,195,.15), rgba(110,231,183,.15)) , rgba(255,255,255,.75);
  border-bottom:1px solid rgba(31,41,55,.08);
}
.controls{display:flex; align-items:center; gap:10px}
.search input{
  padding:10px 12px; width: min(50vw, 420px);
  border:1px solid rgba(31,41,55,.12); border-radius:12px; outline: none;
  background:white;
}
.search input:focus{box-shadow:0 0 0 6px var(--ring); border-color:transparent}
.file{
  position:relative; display:inline-flex; align-items:center; gap:8px;
  background: linear-gradient(90deg, var(--primary-2), #ffe08d);
  border-radius:12px; padding:10px 12px; color:#7a5600; font-weight:700;
  box-shadow:0 8px 16px rgba(255,209,102,.25);
}
.file input{
  position:absolute; inset:0; opacity:0; cursor:pointer;
}

.container{padding:16px; margin-inline:auto; max-width:1200px}
.filters{display:flex; flex-wrap:wrap; gap:8px; margin:8px 2px 14px}
.filters button{
  background:#fff; border:1px solid rgba(31,41,55,.1); color:#374151;
  padding:8px 12px; border-radius:999px;
}
.filters button.active{
  background: linear-gradient(90deg, var(--accent), #a7f3d0);
  border-color:transparent; color:#064e3b;
}

.gallery{
  list-style:none; margin:0; padding:0;
  display:grid; gap:12px;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}
.card{
  background:#fff; border-radius:14px; overflow:hidden; border:1px solid rgba(31,41,55,.06);
  box-shadow:var(--shadow); display:flex; flex-direction:column;
}
.thumb{
  aspect-ratio: 4 / 3; width:100%; object-fit:cover; display:block; background: #f8fafc;
}
.meta{padding:8px 10px}
.meta .title{font-weight:700; font-size:.95rem}
.meta .desc{color:var(--muted); font-size:.85rem}
.tags{display:flex; gap:6px; flex-wrap:wrap; margin-top:8px}
.tag{font-size:.75rem; padding:4px 8px; border-radius:999px; background:#f5f5f5; color:#374151}

/* Lightbox */
.lightbox{
  position: fixed; inset: 0; background: rgba(0,0,0,.75);
  display:none; align-items:center; justify-content:center; gap:8px; padding:16px;
}
.lightbox.show{display:flex}
.lb-figure{max-width:min(92vw, 1200px); max-height:88vh; margin:0; text-align:center}
.lb-figure img{max-height:80vh; max-width:100%; border-radius:12px; display:block; margin-inline:auto}
.lb-figure figcaption{color:#f1f5f9; margin-top:8px}
.lb-close,.lb-prev,.lb-next{
  position:absolute; top:16px; height:40px; width:40px; border-radius:50%; background:rgba(255,255,255,.15); color:white; display:grid; place-items:center
}
.lb-close{right:16px}
.lb-prev{left:16px; top:50%; translate:0 -50%}
.lb-next{right:16px; top:50%; translate:0 -50%}
.lb-prev,.lb-next{font-size:26px}

.footer{margin:28px 6px 40px; text-align:center; color:var(--muted)}

/* Utilities */
.app-hidden{display:none}