/* ============================================================
   Luma — Apple-flavoured glass UI on a swappable background layer
   ============================================================ */

* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
          "Segoe UI Variable Display", "Segoe UI", "PingFang SC",
          "Microsoft YaHei UI", "Microsoft YaHei", system-ui, sans-serif;
  --ease: cubic-bezier(.32, .72, 0, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

/* ---------------- themes ---------------- */
body.theme-light {
  --ink: #14151a;
  --ink-2: rgba(28, 30, 38, .62);
  --ink-3: rgba(28, 30, 38, .40);
  --glass: rgba(255, 255, 255, .58);
  --glass-2: rgba(255, 255, 255, .40);
  --glass-strong: rgba(255, 255, 255, .80);
  --hair: rgba(255, 255, 255, .62);
  --hair-2: rgba(20, 25, 40, .08);
  --shadow: 0 24px 60px -18px rgba(18, 30, 58, .30), 0 2px 8px rgba(18, 30, 58, .06);
  --shadow-sm: 0 10px 26px -12px rgba(18, 30, 58, .28);
  --accent: #0071e3;
  --accent-ink: #fff;
  --tint: radial-gradient(125% 95% at 50% -5%, rgba(255,255,255,.78), rgba(255,255,255,.34) 52%, rgba(240,244,255,.14) 100%);
  --scrim: linear-gradient(180deg, rgba(255,255,255,.02) 40%, rgba(250,248,255,.42) 100%);
  --chip: rgba(255, 255, 255, .55);
  --track: rgba(20, 25, 40, .10);
  /* glass controls */
  --glass-btn: rgba(255, 255, 255, .46);
  --glass-btn-hover: rgba(255, 255, 255, .66);
  --glass-btn-solid: rgba(247, 249, 253, .96);
  --hair-top: rgba(255, 255, 255, .85);
  --accent-top: #3a95ff;
  --accent-top-hover: #4ba0ff;
  --accent-bottom: #0071e3;
  --accent-rim: rgba(0, 90, 200, .55);
  --accent-shadow: rgba(0, 113, 227, .62);
}
body.theme-dark {
  --ink: #f4f5f8;
  --ink-2: rgba(236, 238, 246, .66);
  --ink-3: rgba(236, 238, 246, .42);
  --glass: rgba(26, 27, 34, .55);
  --glass-2: rgba(20, 21, 27, .36);
  --glass-strong: rgba(34, 35, 44, .78);
  --hair: rgba(255, 255, 255, .13);
  --hair-2: rgba(255, 255, 255, .07);
  --shadow: 0 30px 70px -22px rgba(0, 0, 0, .72), 0 2px 10px rgba(0, 0, 0, .35);
  --shadow-sm: 0 14px 30px -16px rgba(0, 0, 0, .7);
  --accent: #0a84ff;
  --accent-ink: #fff;
  --tint: radial-gradient(125% 95% at 50% -5%, rgba(12,16,30,.42), rgba(6,9,18,.56) 55%, rgba(3,5,11,.72) 100%);
  --scrim: linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(4,6,14,.55) 100%);
  --chip: rgba(255, 255, 255, .10);
  --track: rgba(255, 255, 255, .14);
  /* glass controls */
  --glass-btn: rgba(255, 255, 255, .09);
  --glass-btn-hover: rgba(255, 255, 255, .15);
  --glass-btn-solid: rgba(28, 30, 38, .96);
  --hair-top: rgba(255, 255, 255, .26);
  --accent-top: #3a9bff;
  --accent-top-hover: #4ea6ff;
  --accent-bottom: #0a84ff;
  --accent-rim: rgba(120, 190, 255, .45);
  --accent-shadow: rgba(10, 132, 255, .60);
}

html, body { height: 100%; }

body {
  font-family: var(--font);
  color: var(--ink);
  background: #0d0f14;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "cv05";
  overflow-x: hidden;
}

/* ---------------- background layer (admin-swappable) ---------------- */
.wallpaper {
  position: fixed; inset: 0;
  background-size: cover;
  background-position: center 42%;
  transform: scale(1.06);
  z-index: -3;
}
body.theme-light .wallpaper { background-image: url("assets/wall-light.jpg"); }
body.theme-dark  .wallpaper { background-image: url("assets/wall-dark.jpg"); }
.wall-tint {
  position: fixed; inset: 0; z-index: -2;
  background: var(--tint);
  backdrop-filter: blur(0px);
}
/* fine film grain so large glass surfaces read as material, not as flat fill */
.grain {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  opacity: .16;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/><feColorMatrix type='saturate' values='0'/></filter><rect width='160' height='160' filter='url(%23n)' opacity='.42'/></svg>");
  mix-blend-mode: overlay;
}

/* ---------------- glass primitives ---------------- */
.glass {
  background: var(--glass);
  backdrop-filter: blur(34px) saturate(180%);
  -webkit-backdrop-filter: blur(34px) saturate(180%);
  border: 1px solid var(--hair);
  box-shadow: var(--shadow);
}
.glass-soft {
  background: var(--glass-2);
  backdrop-filter: blur(26px) saturate(150%);
  -webkit-backdrop-filter: blur(26px) saturate(150%);
  border: 1px solid var(--hair);
}

/* ---------------- top bar ---------------- */
.topbar {
  position: sticky; top: 18px; z-index: 40;
  margin: 18px 22px 0;
  height: 66px;
  border-radius: 22px;
  display: flex; align-items: center; gap: 18px;
  padding: 0 12px 0 16px;
  animation: drop-in .7s var(--ease-out) both;
}
@keyframes drop-in {
  from { opacity: 0; transform: translateY(-14px) scale(.985); }
  to   { opacity: 1; transform: none; }
}

.brand { display: flex; align-items: center; gap: 11px; padding-right: 4px; }
.brand-mark {
  width: 36px; height: 36px; border-radius: 11px;
  background: linear-gradient(150deg, #7ac7ff, #4f8cff 42%, #a06bff 100%);
  box-shadow: 0 6px 16px -6px rgba(60, 110, 255, .7), inset 0 1px 0 rgba(255,255,255,.55);
  display: grid; place-items: center;
}
.brand-mark svg { width: 20px; height: 20px; }
.brand h1 {
  font-size: 17px; font-weight: 650; letter-spacing: -.02em; line-height: 1.1;
}
.brand p { font-size: 10.5px; letter-spacing: .06em; color: var(--ink-3); margin-top: 3px; text-transform: uppercase; }

.cats { display: flex; align-items: center; gap: 6px; flex: 1; overflow: hidden; }
.pill {
  appearance: none; border: 1px solid transparent; background: transparent;
  color: var(--ink-2); font: inherit; font-size: 13px; font-weight: 520;
  height: 34px; padding: 0 14px; border-radius: 999px;
  display: inline-flex; align-items: center; gap: 7px;
  cursor: pointer; white-space: nowrap;
  transition: background .22s var(--ease), color .22s var(--ease), transform .12s var(--ease);
}
.pill:hover { background: var(--chip); color: var(--ink); }
.pill:active { transform: scale(.97); }
.pill.active {
  background: var(--accent); color: var(--accent-ink);
  box-shadow: 0 8px 20px -10px var(--accent);
}
.pill .n { font-size: 11px; opacity: .55; font-variant-numeric: tabular-nums; }
.pill.active .n { opacity: .78; }

.tools { display: flex; align-items: center; gap: 8px; }
.icon-btn {
  position: relative;
  width: 38px; height: 38px; border-radius: 12px;
  display: grid; place-items: center; cursor: pointer;
  background: var(--glass-btn); border: 1px solid var(--hair); color: var(--ink-2);
  backdrop-filter: blur(16px) saturate(190%);
  -webkit-backdrop-filter: blur(16px) saturate(190%);
  box-shadow: inset 0 1px 0 var(--hair-top), 0 6px 16px -12px rgba(10, 20, 45, .5);
  transition: transform .12s var(--ease), background .2s var(--ease),
              color .2s var(--ease), box-shadow .24s var(--ease);
}
.icon-btn:hover {
  color: var(--ink); background: var(--glass-btn-hover);
  box-shadow: inset 0 1px 0 var(--hair-top), 0 10px 22px -12px rgba(10, 20, 45, .55);
}
.icon-btn:active { transform: scale(.94); }
.icon-btn svg { width: 18px; height: 18px; }

/* sun / moon segmented switch */
.theme-toggle {
  position: relative; width: auto; display: inline-flex; align-items: center;
  gap: 2px; padding: 3px; border-radius: 12px;
}
.theme-toggle .knob { display: none; }
.theme-toggle .ic {
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 9px; opacity: .42; color: var(--ink);
  transition: background .28s var(--ease), opacity .28s var(--ease), box-shadow .28s var(--ease);
}
.theme-toggle .ic svg { width: 16px; height: 16px; }
.theme-toggle .ic.on {
  opacity: 1; background: var(--glass-strong);
  box-shadow: 0 2px 6px -2px rgba(10,20,40,.35), inset 0 0 0 1px var(--hair);
}

.btn-primary {
  position: relative;
  height: 38px; padding: 0 16px 0 13px; border-radius: 12px;
  border: 1px solid var(--accent-rim);
  background: linear-gradient(180deg, var(--accent-top), var(--accent-bottom));
  color: #fff; font: inherit; font-size: 13px; font-weight: 590;
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .34), 0 12px 26px -14px var(--accent-shadow);
  transition: transform .12s var(--ease), filter .2s var(--ease), box-shadow .24s var(--ease);
}
.btn-primary:hover {
  filter: brightness(1.05);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .42), 0 16px 30px -14px var(--accent-shadow);
}
.btn-primary:active { transform: scale(.965); }
.btn-primary svg { width: 16px; height: 16px; }

.avatar {
  width: 36px; height: 36px; border-radius: 50%; object-fit: cover;
  border: 1px solid var(--hair); box-shadow: var(--shadow-sm);
}

/* ---------------- page shell ---------------- */
.page { padding: 26px 22px 90px; max-width: 1520px; margin: 0 auto; }

.page-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; padding: 14px 6px 22px;
  animation: rise .8s .06s var(--ease-out) both;
}
@keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

.page-head h2 {
  font-size: 42px; line-height: 1.02; letter-spacing: -.035em; font-weight: 700;
  text-shadow: 0 1px 0 rgba(255,255,255,.12);
}
.page-head .sub {
  margin-top: 9px; font-size: 13px; color: var(--ink-2); letter-spacing: .004em;
  display: flex; align-items: center; gap: 9px;
}
.dot { width: 3px; height: 3px; border-radius: 50%; background: var(--ink-3); }

.seg {
  display: inline-flex; padding: 3px; gap: 2px; border-radius: 13px;
  background: var(--glass-btn); border: 1px solid var(--hair);
  backdrop-filter: blur(16px) saturate(190%);
  -webkit-backdrop-filter: blur(16px) saturate(190%);
  box-shadow: inset 0 1px 0 var(--hair-top);
}
.seg button {
  border: 0; background: transparent; color: var(--ink-2); font: inherit; font-size: 12.5px;
  font-weight: 540; height: 30px; padding: 0 13px; border-radius: 10px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  transition: background .2s var(--ease), color .2s var(--ease);
}
.seg button svg { width: 15px; height: 15px; }
.seg button.on {
  background: var(--glass-strong); color: var(--ink);
  box-shadow: var(--shadow-sm), inset 0 1px 0 var(--hair-top);
}

/* ---------------- masonry ---------------- */
.masonry {
  column-count: 4; column-gap: 18px;
  animation: rise .9s .12s var(--ease-out) both;
}
@media (max-width: 1280px) { .masonry { column-count: 3; } }

/* A card is the photo and nothing else: no caption bar, no badges, no buttons.
   The clip layer owns the rounding and the shadow so the glow ring can sit
   outside it (an overflow:hidden ancestor would swallow the ring). */
.card {
  break-inside: avoid; margin: 0 0 18px; position: relative;
  border-radius: 20px; cursor: pointer;
  transition: transform .38s var(--ease);
}
.card-clip {
  border-radius: 20px; overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .38s var(--ease);
}
.card img { display: block; width: 100%; height: auto; }

.card:hover { transform: translateY(-3px); }
.card:hover .card-clip { box-shadow: 0 26px 50px -22px rgba(10, 20, 45, .45); }

.card.hot {
  transform: translateY(-6px) scale(1.012);
}
.card.hot .card-clip {
  box-shadow: 0 34px 60px -20px rgba(10, 20, 45, .5), 0 0 0 1px rgba(255,255,255,.22);
}

/* ---------------- footer status ---------------- */
.statusbar {
  position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%);
  height: 40px; padding: 0 8px 0 14px; border-radius: 14px;
  display: flex; align-items: center; gap: 14px;
  font-size: 11.5px; color: var(--ink-2);
  z-index: 30;
  animation: rise .9s .3s var(--ease-out) both;
}
.statusbar .live { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); }
.statusbar .pulse {
  width: 6px; height: 6px; border-radius: 50%; background: #34c759;
  box-shadow: 0 0 0 4px rgba(52, 199, 89, .18);
}
.statusbar b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.statusbar .sep { width: 1px; height: 16px; background: var(--hair-2); }
.statusbar .mini {
  border: 0; background: var(--chip); color: var(--ink-2); font: inherit; font-size: 11px;
  height: 26px; padding: 0 10px; border-radius: 8px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 5px; font-weight: 540;
}
.statusbar .mini svg { width: 12px; height: 12px; }

/* inline icon default: an SVG without explicit size falls back to 300x150 */
svg { width: 18px; height: 18px; flex: none; }
img { max-width: 100%; }

/* shared small text */
.mono { font-family: "SF Mono", ui-monospace, "Cascadia Mono", Consolas, monospace; }

/* ---------------- shared panel rows (upload + admin) ---------------- */
.ptitle { font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 620; }
.frow { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 0; border-bottom: 1px solid var(--hair-2); font-size: 12px; }
.frow:last-child { border-bottom: 0; }
.frow .lab { color: var(--ink-2); }
.frow .val { font-size: 11.5px; color: var(--ink); font-weight: 550; }
.sw2 { width: 38px; height: 22px; border-radius: 999px; background: var(--track); position: relative; flex: none; }
.sw2::after { content: ""; position: absolute; width: 16px; height: 16px; border-radius: 50%;
  top: 3px; left: 3px; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.28); }
.sw2.on { background: #34c759; }
.sw2.on::after { transform: translateX(16px); }
.pathbox {
  margin-top: 9px; font-size: 11px; padding: 9px 10px; border-radius: 9px;
  background: var(--glass-2); border: 1px solid var(--hair); color: var(--ink-2);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.pathbox .mono { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pathbox svg { width: 13px; height: 13px; flex: none; }
.tagline { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 9px; }
.tagline .t { font-size: 10.5px; padding: 3px 8px; border-radius: 7px;
  background: var(--chip); border: 1px solid var(--hair); color: var(--ink-2);
  display: inline-flex; align-items: center; gap: 4px; }
.tagline .t svg { width: 11px; height: 11px; }

/* ---------------- glass buttons ----------------
   Apple-ish translucent controls: a bright top edge (inset highlight),
   a real backdrop blur so the wallpaper refracts through, and an
   optional cursor-tracking glow ring (see glow.css / glow.js).
   All of it is backdrop-filter on a handful of elements, not a blur
   layer per button — see the perf note in the README.
----------------------------------------------- */
.btn-glass {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 38px; padding: 0 15px; border-radius: 12px;
  font: inherit; font-size: 13px; font-weight: 560; letter-spacing: -.005em;
  color: var(--ink); cursor: pointer;
  background: var(--glass-btn);
  border: 1px solid var(--hair);
  backdrop-filter: blur(18px) saturate(190%);
  -webkit-backdrop-filter: blur(18px) saturate(190%);
  box-shadow: inset 0 1px 0 var(--hair-top), 0 8px 20px -14px rgba(10, 20, 45, .5);
  transition: transform .12s var(--ease), background .22s var(--ease),
              box-shadow .28s var(--ease), color .22s var(--ease);
}
.btn-glass:hover {
  background: var(--glass-btn-hover);
  box-shadow: inset 0 1px 0 var(--hair-top), 0 12px 26px -14px rgba(10, 20, 45, .55);
}
.btn-glass:active { transform: scale(.965); }
.btn-glass svg { width: 16px; height: 16px; flex: none; }
.btn-glass.icon-only { width: 38px; padding: 0; border-radius: 12px; }
.btn-glass.icon-only svg { width: 18px; height: 18px; }

/* the hero button keeps its accent fill, but wears the same glass rim */
.btn-glass.accent {
  background: linear-gradient(180deg, var(--accent-top), var(--accent-bottom));
  border-color: var(--accent-rim);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .34),
              0 12px 26px -14px var(--accent-shadow);
}
.btn-glass.accent:hover {
  background: linear-gradient(180deg, var(--accent-top-hover), var(--accent-bottom));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .40),
              0 16px 30px -14px var(--accent-shadow);
}

/* the glow ring sits 1px outside the button so the rim reads as light,
   not as a border — width stays small so the whole ring is a 1px win */
.btn-glass > .glow-ring { --glow-w: 1.5px; border-radius: inherit; }
.btn-glass[data-glow] { --glow-spread: 62; }

@media (prefers-reduced-transparency: reduce) {
  .btn-glass {
    backdrop-filter: none; -webkit-backdrop-filter: none;
    background: var(--glass-btn-solid);
  }
}