/* album - styles. Tokens and measurements come from the design handoff (README.md). */

:root, [data-theme=light] {
  --bg:#f4f4f2; --side:#eeeeeb; --card:#ffffff; --chip:#ffffff; --stage:#f7f7f5; --tint:#e9e9e6; --hover:#ececea;
  --line:#e3e3df; --line2:#d6d6d2; --ink:#1a1a1a; --ink-hover:#333; --on-ink:#ffffff;
  --muted:#6f6f6b; --muted2:#8a8a86; --text2:#4a4a47; --grid:rgba(0,0,0,.035); --sel:rgba(26,26,26,.18);
  --tabbar:rgba(255,255,255,.92); --drop:rgba(255,255,255,.8);
  color-scheme: light;
}
[data-theme=dark] {
  --bg:#151517; --side:#0e0e10; --card:#1e1e21; --chip:#222226; --stage:#1a1a1d; --tint:#26262a; --hover:#2a2a2e;
  --line:#2c2c30; --line2:#3a3a3e; --ink:#f0f0ee; --ink-hover:#d8d8d4; --on-ink:#151517;
  --muted:#9a9a96; --muted2:#7a7a77; --text2:#c8c8c4; --grid:rgba(255,255,255,.05); --sel:rgba(240,240,238,.25);
  --tabbar:rgba(30,30,33,.92); --drop:rgba(21,21,23,.8);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--ink); }
body { font-family: Geist, system-ui, sans-serif; font-size: 14px; -webkit-font-smoothing: antialiased; }
button { font-family: inherit; color: inherit; }
input, textarea { font-family: inherit; color: var(--ink); }
a { color: var(--ink); }
a:hover { color: var(--muted); }
input[type=range] { accent-color: var(--ink); }
kbd { border: 1px solid var(--line); border-radius: 4px; padding: 1px 5px; font: inherit; }

.serif { font-family: 'Newsreader', Georgia, serif; }
.mono { font-family: ui-monospace, Menlo, Consolas, monospace; }
.row { display: flex; align-items: center; }
.col { display: flex; flex-direction: column; }
.between { justify-content: space-between; }
.wrap { flex-wrap: wrap; }
.g4 { gap: 4px; } .g6 { gap: 6px; } .g8 { gap: 8px; } .g10 { gap: 10px; } .g12 { gap: 12px; } .g16 { gap: 16px; }
.mt4 { margin-top: 4px; } .mt8 { margin-top: 8px; } .mt14 { margin-top: 14px; }
.t11 { font-size: 11px; } .t12 { font-size: 12px; } .t13 { font-size: 13px; } .t14 { font-size: 14px; } .t15 { font-size: 15px; } .t34 { font-size: 34px; }
.w500 { font-weight: 500; } .w600 { font-weight: 600; }
.muted { color: var(--muted); } .muted2 { color: var(--muted2); } .err { color: #b33; }
.center { text-align: center; }
.min0 { min-width: 0; }
.ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.you { font-size: 11px; color: var(--muted2); font-weight: 400; }
.label { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted2); padding: 0 12px; }
.label.nopad { padding: 0; }
.pad12 { padding: 0 12px; }

/* ---------------------------------------------------------------- shell */
.boot { min-height: 100vh; background: var(--bg); }
.app { display: grid; grid-template-columns: auto minmax(0, 1fr); min-height: 100vh; background: var(--bg); color: var(--ink); }

.side {
  width: 236px; background: var(--side); border-right: 1px solid var(--line); padding: 26px 18px 22px;
  display: flex; flex-direction: column; gap: 26px; position: sticky; top: 0; height: 100vh; overflow: hidden;
}
.side-scroll { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 26px; margin: 0 -6px; padding: 0 6px; }
.wordmark { font-family: 'Newsreader', serif; font-style: italic; font-size: 30px; font-weight: 400; letter-spacing: -0.02em; line-height: 1; }
.wordmark40 { font-family: 'Newsreader', serif; font-style: italic; font-size: 40px; font-weight: 400; letter-spacing: -0.02em; line-height: 1; }

.iconbtn {
  width: 32px; height: 32px; border: 1px solid var(--line); border-radius: 16px; background: var(--card); cursor: pointer;
  display: flex; align-items: center; justify-content: center; color: var(--ink); flex: none; padding: 0;
}
.iconbtn:hover { background: var(--hover); }
.iconbtn.t36 { width: 36px; height: 36px; border-radius: 18px; }

.nav { display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.navbtn {
  display: flex; justify-content: space-between; align-items: center; padding: 9px 12px; border-radius: 8px; border: 0;
  text-align: left; cursor: pointer; font-size: 14px; background: transparent; color: var(--ink); font-weight: 400;
}
.navbtn:hover { background: var(--hover); }
.navbtn.on { background: var(--tint); font-weight: 600; }
.navbtn .count { font-size: 11px; color: var(--muted2); font-weight: 400; }

.albumbtn {
  display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 10px; align-items: center; padding: 6px 12px; border: 0;
  border-radius: 8px; text-align: left; cursor: pointer; background: transparent; width: 100%;
}
.albumbtn:hover, .albumbtn.on { background: var(--hover); }
.albumbtn.on { background: var(--tint); }
.albumbtn img, .albumbtn .cover { width: 36px; height: 36px; object-fit: cover; border-radius: 6px; background: var(--hover); display: block; }
.albumbtn .name { font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.albumbtn .n { font-size: 11px; color: var(--muted2); }

.chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 12px; }
.chip { padding: 5px 10px; border-radius: 14px; border: 1px solid transparent; font-size: 12px; cursor: pointer; background: var(--chip); color: var(--ink); }
.chip:hover { border-color: var(--muted2); }
.chip.on { background: var(--ink); color: var(--on-ink); }

.acct-wrap { position: relative; }
.menu {
  position: absolute; left: 0; right: 0; bottom: calc(100% + 8px); background: var(--card); border: 1px solid var(--line);
  border-radius: 12px; padding: 6px; display: flex; flex-direction: column; box-shadow: 0 10px 30px rgba(0,0,0,.08); font-size: 13px;
}
.menu button { text-align: left; padding: 8px 10px; border: 0; background: none; border-radius: 8px; cursor: pointer; font-size: 13px; color: var(--ink); }
.menu button:hover { background: var(--bg); }
.menu button.muted { color: var(--muted); }
.menu-div { height: 1px; background: var(--line); margin: 4px 6px; }
.acct {
  width: 100%; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 10px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--chip); cursor: pointer; text-align: left;
}
.acct:hover { background: var(--hover); }
.avatar { border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 600; color: #fff; flex: none; }

.main { padding: 22px 36px 60px; display: flex; flex-direction: column; gap: 26px; min-width: 0; }
.page { display: flex; flex-direction: column; gap: 22px; }
.title { margin: 0; font-family: 'Newsreader', serif; font-style: italic; font-weight: 400; font-size: clamp(44px, 5.5vw, 68px); letter-spacing: -0.02em; line-height: 1; }
.sub { margin-top: 8px; font-size: 14px; color: var(--muted); }
.h2 { margin: 0; font-family: 'Newsreader', serif; font-weight: 400; font-size: 26px; letter-spacing: -0.01em; }

/* ---------------------------------------------------------------- toolbar + buttons */
.toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.search { flex: 1; min-width: 180px; max-width: 440px; height: 40px; border: 1px solid var(--line); border-radius: 20px; padding: 0 18px; font: inherit; font-size: 14px; outline: none; background: var(--card); color: var(--ink); }
.tools { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.pillgroup { display: flex; border: 1px solid var(--line); border-radius: 18px; padding: 2px; }
.pillgroup button { width: 32px; height: 30px; border: 0; border-radius: 15px; cursor: pointer; background: transparent; color: var(--ink); display: flex; align-items: center; justify-content: center; padding: 0; }
.pillgroup button.on { background: var(--hover); }

.btn { height: 36px; padding: 0 14px; border: 1px solid var(--line); border-radius: 18px; font-size: 13px; cursor: pointer; background: var(--card); color: var(--ink); white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.btn:hover { background: var(--hover); }
.btn.tint { background: var(--tint); }
.btn.tint:hover { background: var(--hover); }
.btn.inkfill { background: var(--ink); color: var(--card); border-color: var(--ink); }
.btn.primary { border: 0; background: var(--ink); color: var(--on-ink); font-weight: 600; padding: 0 16px; }
.btn.primary:hover { background: var(--ink-hover); }
.btn.primary:disabled { opacity: .6; cursor: default; }
.btn.small { height: 30px; padding: 0 12px; font-size: 12px; border-radius: 15px; }
.btn.danger { color: #b33; }
.btn.h42 { height: 42px; border-radius: 21px; font-size: 14px; }
.btn.h38 { height: 38px; border-radius: 19px; }
.btn.r10 { border-radius: 10px; height: 38px; }
.btn.h34 { height: 34px; border-radius: 17px; }

input.in42, input.in40, input.in38 { border: 1px solid var(--line); border-radius: 10px; padding: 0 12px; font: inherit; outline: none; background: var(--card); color: var(--ink); width: 100%; }
input.in42 { height: 42px; padding: 0 14px; font-size: 14px; }
input.in40 { height: 40px; font-size: 14px; }
input.in38 { height: 38px; font-size: 13px; }
input.ro { background: var(--bg); color: var(--muted); }
input:focus { border-color: var(--muted2); }

.seg { display: flex; gap: 4px; padding: 3px; border: 1px solid var(--line); border-radius: 16px; font-size: 12px; }
.seg button { flex: 1; height: 26px; border: 0; border-radius: 13px; cursor: pointer; font-size: 12px; background: transparent; color: var(--ink); }
.seg button.on { background: var(--ink); color: var(--card); }
.seg button:disabled { cursor: default; }
.seg.fit { width: fit-content; border-radius: 18px; }
.seg.fit button { flex: none; height: 30px; padding: 0 16px; border-radius: 15px; font-size: 13px; }

/* ---------------------------------------------------------------- library */
.empty { padding: 80px 0; text-align: center; color: var(--muted2); font-size: 14px; }
.empty .t34 { color: var(--ink); font-style: italic; }

/* ---------------------------------------------------------------- family + account */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.card { display: flex; flex-direction: column; gap: 14px; padding: 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); }
.card.dashed { gap: 12px; border: 1.5px dashed var(--line2); background: transparent; justify-content: center; }
.field { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--muted); }
.account { max-width: 520px; }
.dots { display: flex; gap: 8px; flex-wrap: wrap; }
.dot { width: 22px; height: 22px; border-radius: 11px; border: 2px solid transparent; cursor: pointer; padding: 0; box-shadow: 0 0 0 1px var(--line); }
.dot.on { border-color: var(--card); box-shadow: 0 0 0 2px var(--ink); }
.note { padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--tint); font-size: 13px; }

/* ---------------------------------------------------------------- sign-in */
.login-wrap {
  position: fixed; inset: 0; z-index: 100; background-color: var(--bg);
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 24px 24px; display: flex; align-items: center; justify-content: center; padding: 24px;
}
.login-wrap > .iconbtn { position: absolute; top: 20px; right: 20px; }
.login-card {
  width: 100%; max-width: 400px; background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 36px 32px;
  display: flex; flex-direction: column; gap: 24px; box-shadow: 0 30px 80px rgba(0,0,0,.06);
}
.who { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.who-btn { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 4px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); cursor: pointer; color: var(--ink); }
.who-btn:hover { background: var(--bg); }
.who-btn.on { border-color: var(--ink); background: var(--bg); }

/* ---------------------------------------------------------------- overlays */
.toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); padding: 10px 18px; border-radius: 20px; background: var(--ink); color: var(--on-ink); font-size: 13px; z-index: 90; box-shadow: 0 8px 30px rgba(0,0,0,.15); white-space: nowrap; }
.tabbar { display: none; position: fixed; left: 0; right: 0; bottom: 0; background: var(--tabbar); backdrop-filter: blur(10px); border-top: 1px solid var(--line); padding: 8px 6px 14px; justify-content: space-around; z-index: 20; }
.tabbar button { border: 0; background: none; font-size: 11px; padding: 6px 8px; cursor: pointer; color: var(--ink); font-weight: 400; }
.tabbar button.on { font-weight: 600; }

@media (max-width: 820px) {
  .side { display: none; }
  .main { padding: 14px 14px 90px; }
  .tabbar { display: flex; }
  .tools { margin-left: 0; flex-wrap: wrap; }
}

/* ---------------------------------------------------------------- grid */
.group { display: flex; flex-direction: column; gap: 12px; }
.base { align-items: baseline; }
.grid { display: flex; flex-wrap: wrap; gap: 6px; }
.grid .spacer { flex: 10 1 0; height: 0; }
.tile { min-width: 110px; border-radius: 10px; overflow: hidden; background: var(--hover); position: relative; cursor: pointer; padding: 0; transition: padding .15s, transform .2s, box-shadow .2s; }
.tile:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,.10); }
.tile.sel { padding: 10px; }
.tile img, .tile-blank { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 7px; background: var(--tint); }
.badge { position: absolute; right: 8px; bottom: 8px; display: flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 10px; background: rgba(0,0,0,.55); color: #fff; font-size: 11px; font-weight: 500; pointer-events: none; }
.tile .uploading { position: absolute; inset: 0; background: rgba(255,255,255,.55); display: flex; align-items: flex-end; padding: 10px; pointer-events: none; }
.tile .uploading .bar { width: 100%; height: 3px; background: rgba(0,0,0,.1); border-radius: 2px; }
.tile .uploading .bar div { height: 100%; background: var(--ink); border-radius: 2px; transition: width .2s; }
.tile .ov { position: absolute; inset: 0; opacity: 0; transition: opacity .15s; display: flex; justify-content: space-between; align-items: flex-start; padding: 8px; }
.tile:hover .ov, .tile.show .ov { opacity: 1; }
.tile .check { width: 22px; height: 22px; border-radius: 11px; border: 1.5px solid #fff; cursor: pointer; background: rgba(0,0,0,.25); color: #fff; display: flex; align-items: center; justify-content: center; padding: 0; }
.tile .check.on { background: var(--ink); color: var(--on-ink); }
.tile .heart { width: 22px; height: 22px; border: 0; background: none; cursor: pointer; color: #fff; padding: 0; display: flex; align-items: center; justify-content: center; filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); }

.selbar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 14px; background: var(--tint); border: 1px solid var(--line); font-size: 13px; flex-wrap: wrap; }
.selbar button { border: 0; background: none; cursor: pointer; font-size: 13px; padding: 4px 6px; color: var(--ink); }
.selbar button.danger { color: #b33; }
.selbar button.muted { color: var(--muted); }
.upcard { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 12px; font-size: 13px; }
.spinner { width: 28px; height: 28px; border-radius: 14px; border: 2px solid var(--tint); border-top-color: var(--ink); animation: spin 1s linear infinite; flex: none; }
@keyframes spin { to { transform: rotate(360deg); } }
.upcard .bar { height: 3px; background: var(--line); border-radius: 2px; margin-top: 6px; overflow: hidden; }
.upcard .bar div { height: 100%; background: var(--ink); border-radius: 2px; transition: width .2s; }
.drop { position: fixed; inset: 12px; border: 2px dashed var(--ink); border-radius: 16px; background: var(--drop); z-index: 80; display: flex; align-items: center; justify-content: center; font-family: 'Newsreader', serif; font-size: 32px; pointer-events: none; }

/* ---------------------------------------------------------------- lightbox */
.lb { position: fixed; inset: 0; background: var(--bg); z-index: 50; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.lb-top { display: flex; align-items: center; gap: 10px; padding: 14px 20px; }
.lb-top .meta { font-size: 13px; color: var(--muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-top .right { margin-left: auto; display: flex; gap: 4px; align-items: center; }
.lb-body { display: grid; grid-template-columns: minmax(0, 1fr) auto; min-height: 0; }
.stage { position: relative; display: flex; align-items: center; justify-content: center; padding: 0 60px; min-height: 0; min-width: 0; overflow: hidden; background-color: var(--stage); background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size: 24px 24px; transition: background-color .6s; margin: 0 20px; border: 1px solid var(--line); border-radius: 14px; }
.stage.show { background-color: #0b0b0c; background-image: none; }
.stage img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 6px; box-shadow: 0 20px 60px rgba(0,0,0,.08); }
.stage video { max-width: 100%; max-height: 100%; border-radius: 6px; }
.navbtn2 { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 20px; border: 1px solid var(--line); background: rgba(255,255,255,.9); cursor: pointer; display: flex; align-items: center; justify-content: center; color: #1a1a1a; padding: 0; z-index: 1; }
.navbtn2.prev { left: 14px; }
.navbtn2.next { right: 14px; }
.ghost { height: 36px; padding: 0 12px; border: 0; background: none; cursor: pointer; font-size: 13px; display: flex; align-items: center; gap: 8px; color: var(--ink); }
.ghost.sq { width: 36px; padding: 0; justify-content: center; }
.ghost.muted { color: var(--muted); }
.lb-panel { width: 300px; border-left: 1px solid var(--line); padding: 24px 22px; display: flex; flex-direction: column; gap: 22px; overflow: auto; font-size: 13px; }
.lb-panel .rows { display: flex; flex-direction: column; gap: 8px; color: var(--text2); }
.lb-panel .rows div { display: flex; justify-content: space-between; gap: 12px; }
.lb-panel .rows span:last-child { color: var(--ink); text-align: right; word-break: break-all; }
.lb-panel code { font-size: 11px; color: var(--text2); word-break: break-all; background: var(--card); padding: 8px; border-radius: 6px; display: block; font-family: ui-monospace, Menlo, Consolas, monospace; }
.t22 { font-size: 22px; }
.tagchip { padding: 4px 10px; border-radius: 12px; background: var(--tint); font-size: 12px; display: flex; gap: 6px; align-items: center; }
.strip { display: flex; gap: 4px; justify-content: safe center; padding: 12px 20px; overflow-x: auto; }
.strip img { height: 48px; object-fit: cover; border-radius: 4px; cursor: pointer; flex: none; opacity: .5; outline-offset: 2px; transition: opacity .15s; background: var(--hover); }
.strip img.on { opacity: 1; outline: 2px solid var(--ink); }

@media (max-width: 820px) {
  .lb-panel { display: none; }
  .stage { padding: 0 50px; margin: 0 12px; }
  .lb-top { padding: 10px 12px; flex-wrap: wrap; }
  .lb-top .meta { display: none; }
}

/* ---------------------------------------------------------------- albums */
.albums { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 18px; }
.albumcard { border: 0; background: none; padding: 0; text-align: left; cursor: pointer; display: flex; flex-direction: column; gap: 10px; color: var(--ink); font-family: inherit; }
.albumcard .cover { position: relative; aspect-ratio: 1; border-radius: 18px; overflow: hidden; background: var(--hover); }
.albumcard .cover img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s; }
.albumcard:hover .cover img { transform: scale(1.03); }
.albumcard .cover.dashed { border: 1.5px dashed var(--line2); background: transparent; display: flex; align-items: center; justify-content: center; }
.pop-wrap { position: relative; display: inline-block; }
.popover { position: absolute; left: 0; top: calc(100% + 6px); min-width: 230px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 6px; display: flex; flex-direction: column; box-shadow: 0 10px 30px rgba(0,0,0,.08); font-size: 13px; z-index: 30; }
.popover > button { text-align: left; padding: 8px 10px; border: 0; background: none; border-radius: 8px; cursor: pointer; font-size: 13px; color: var(--ink); white-space: nowrap; }
.popover > button:hover { background: var(--bg); }
.pad6 { padding: 6px; }
.linkbtn { border: 0; background: none; padding: 0; cursor: pointer; font-size: inherit; color: var(--muted); }
.linkbtn:hover { color: var(--ink); }
.linkbtn.danger { color: #b33; }

/* ---------------------------------------------------------------- info panel */
.editable { cursor: text; border-bottom: 1px dashed transparent; }
.editable:hover { border-bottom-color: var(--line2); }
input.in32 { height: 32px; border: 1px solid var(--line); border-radius: 8px; padding: 0 10px; font: inherit; font-size: 12px; outline: none; background: var(--card); color: var(--ink); width: 100%; }
.tagchip button { border: 0; background: none; padding: 0; cursor: pointer; color: var(--muted); font-size: 13px; line-height: 1; }
.switch { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.switch .knob { width: 34px; height: 20px; border-radius: 10px; background: var(--line2); position: relative; border: 0; cursor: pointer; padding: 0; transition: background .15s; flex: none; }
.switch .knob::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 8px; background: #fff; transition: left .15s; }
.switch .knob.on { background: var(--ink); }
.switch .knob.on::after { left: 16px; background: var(--on-ink); }
.switch .knob:disabled { cursor: default; opacity: .6; }
.comment { display: flex; gap: 8px; align-items: flex-start; }
.comment .who { font-size: 12px; font-weight: 500; }
.comment .when { font-size: 11px; color: var(--muted2); margin-left: 6px; }
.comment .text { font-size: 13px; color: var(--text2); white-space: pre-wrap; word-break: break-word; margin-top: 2px; }
.comment .x { border: 0; background: none; cursor: pointer; color: var(--muted2); padding: 0 2px; font-size: 14px; line-height: 1; }
.comment .x:hover { color: #b33; }