/* ============================================================
   FAMILY ARCHIVE — HUD interface
   deep-space navy · cyan + amber dual accents · system CJK body
   ============================================================ */
@font-face{font-family:'Orbitron';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/orbitron-500.woff2') format('woff2')}
@font-face{font-family:'Orbitron';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/orbitron-700.woff2') format('woff2')}
@font-face{font-family:'Orbitron';font-style:normal;font-weight:900;font-display:swap;src:url('../fonts/orbitron-900.woff2') format('woff2')}
@font-face{font-family:'Share Tech Mono';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/share-tech-mono-400.woff2') format('woff2')}

:root{
  --bg0:#04070d;
  --bg1:#0a1220;
  --panel:rgba(13,24,38,.72);
  --line:rgba(94,234,255,.16);
  --line-strong:rgba(94,234,255,.42);
  --cyan:#5eeaff;
  --cyan-dim:#2ba8c4;
  --amber:#ffb454;
  --green:#57e39a;
  --red:#ff6b6b;
  --text:#e8f4ff;
  --muted:#8aa3b8;
  --font-disp:'Orbitron','PingFang SC','HarmonyOS Sans SC',sans-serif;
  --font-mono:'Share Tech Mono',ui-monospace,'SF Mono',Consolas,monospace;
  --font-body:-apple-system,BlinkMacSystemFont,'PingFang SC','HarmonyOS Sans SC','Noto Sans SC','Microsoft YaHei',sans-serif;
  --safe-b:env(safe-area-inset-bottom,0px);
  --safe-t:env(safe-area-inset-top,0px);
}

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{height:100%}
[hidden]{display:none!important}
img{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

body{
  min-height:100%;
  background:var(--bg0);
  color:var(--text);
  font-family:var(--font-body);
  font-size:15px;
  line-height:1.5;
  overflow-x:hidden;
  touch-action:manipulation;
}

.mono{font-family:var(--font-mono);letter-spacing:.08em}
.amber{color:var(--amber)}
.dim{color:var(--muted);font-size:.85em}

/* ---------- ambient background layers ---------- */
body::before{ /* blueprint grid, two scales */
  content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(94,234,255,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(94,234,255,.045) 1px,transparent 1px),
    linear-gradient(rgba(94,234,255,.07) 1px,transparent 1px),
    linear-gradient(90deg,rgba(94,234,255,.07) 1px,transparent 1px);
  background-size:44px 44px,44px 44px,220px 220px,220px 220px;
}
body::after{ /* nebula tint + vignette */
  content:'';position:fixed;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(120% 70% at 85% -10%,rgba(43,168,196,.16),transparent 55%),
    radial-gradient(90% 60% at -10% 100%,rgba(255,180,84,.07),transparent 55%),
    radial-gradient(140% 120% at 50% 50%,transparent 55%,rgba(2,4,8,.72) 100%);
}
#fx{position:fixed;inset:0;z-index:0;pointer-events:none}
.scanline{
  position:fixed;inset:0;z-index:40;pointer-events:none;opacity:.5;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.022) 0 1px,transparent 1px 3px);
}
.sweepline{
  position:fixed;left:0;right:0;top:-160px;height:140px;z-index:5;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(94,234,255,.055),transparent);
  animation:sweep 9s linear infinite;
}
@keyframes sweep{to{transform:translateY(calc(100vh + 320px))}}

/* ---------- boot sequence ---------- */
#boot{
  position:fixed;inset:0;z-index:200;background:var(--bg0);
  display:flex;align-items:center;justify-content:center;
  transition:opacity .5s ease,visibility .5s;
}
#boot.off{opacity:0;visibility:hidden}
.boot-inner{text-align:center;padding:0 32px}
.boot-logo{
  font-size:42px;color:var(--cyan);margin-bottom:22px;
  text-shadow:0 0 22px rgba(94,234,255,.8);
  animation:logospin 3.2s linear infinite;
}
@keyframes logospin{50%{transform:rotate(180deg)}100%{transform:rotate(360deg)}}
.bl{font-size:11px;color:var(--cyan-dim);text-align:left;display:inline-block;min-width:240px;
  opacity:0;animation:blin .28s ease forwards;animation-delay:calc(var(--i)*.24s + .15s)}
@keyframes blin{to{opacity:1}}
.boot-bar{width:220px;height:2px;background:rgba(94,234,255,.14);margin:20px auto 12px;overflow:hidden}
.boot-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--cyan),var(--amber));
  animation:load 1.25s cubic-bezier(.3,.8,.4,1) forwards .35s}
@keyframes load{to{width:100%}}
.boot-hint{font-size:9px;color:var(--muted);letter-spacing:.3em}

/* ---------- header / HUD ---------- */
.hud{position:relative;z-index:10;padding:calc(10px + var(--safe-t)) 18px 0}
.statusbar{
  display:flex;align-items:center;gap:10px;
  font-size:10px;color:var(--muted);letter-spacing:.14em;
  padding-bottom:10px;border-bottom:1px solid var(--line);
}
.sb-left{display:flex;align-items:center;gap:7px;color:var(--green)}
.dot{width:7px;height:7px;border-radius:50%;background:var(--green);animation:pulse 1.8s ease infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(87,227,154,.55)}55%{box-shadow:0 0 0 7px rgba(87,227,154,0)}}
.sb-right{margin-left:auto;display:flex;gap:12px;align-items:baseline}
.sb-right b{color:var(--cyan);font-weight:400;font-size:12px}
#disk{color:var(--amber)}
#adminchip{
  display:none;font-size:9px;letter-spacing:.12em;color:var(--amber);
  border:1px solid rgba(255,180,84,.45);padding:3px 8px;border-radius:2px;
}
body.admin #adminchip{display:inline-block;animation:blin .3s ease}
#adminchip:active{background:rgba(255,180,84,.15)}

.titlewrap{padding:26px 0 20px;user-select:none;-webkit-user-select:none}
.kicker{font-size:10px;color:var(--cyan-dim);letter-spacing:.32em;margin-bottom:10px}
.cursor{animation:blink 1.1s steps(1) infinite;color:var(--cyan)}
@keyframes blink{50%{opacity:0}}
h1{
  font-size:clamp(28px,8.4vw,44px);font-weight:900;letter-spacing:.06em;line-height:1.15;
  text-shadow:0 0 26px rgba(94,234,255,.35);
  animation:rise .7s cubic-bezier(.2,.7,.3,1) both .1s;
}
.sub{
  margin-top:8px;font-family:var(--font-disp);font-weight:700;
  font-size:11px;letter-spacing:.42em;color:var(--cyan);
  text-shadow:1px 0 0 rgba(255,180,84,.55),-1px 0 0 rgba(94,234,255,.55);
}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

.databar{
  display:grid;grid-template-columns:repeat(3,1fr);
  border:1px solid var(--line);background:var(--panel);
  backdrop-filter:blur(6px);
}
.databar>div{padding:11px 6px 9px;text-align:center;position:relative}
.databar>div+div{border-left:1px solid var(--line)}
.databar b{display:block;font-family:var(--font-disp);font-weight:700;font-size:20px;line-height:1.1}
.databar>div:nth-child(1) b{color:var(--cyan)}
.databar>div:nth-child(2) b{color:var(--amber)}
.databar>div:nth-child(3) b{color:var(--green)}
.databar span{display:block;margin-top:3px;font-size:8.5px;letter-spacing:.18em;color:var(--muted)}

/* ---------- toolbar ---------- */
.toolbar{
  position:sticky;top:0;z-index:30;
  background:rgba(5,10,17,.85);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
  padding:10px 18px 9px;
}
.seg{display:flex;gap:22px;font-size:11px;letter-spacing:.16em}
.seg button{color:var(--muted);padding:2px 0 7px;position:relative;transition:color .2s}
.seg button::after{content:'';position:absolute;left:0;right:100%;bottom:0;height:2px;background:var(--cyan);transition:right .25s ease}
.seg button.on{color:var(--cyan)}
.seg button.on::after{right:0;box-shadow:0 0 8px var(--cyan)}
.chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin-top:10px;padding-bottom:2px}
.chips::-webkit-scrollbar{display:none}
.chip{
  flex:0 0 auto;font-size:10px;letter-spacing:.1em;color:var(--muted);
  border:1px solid var(--line);padding:5px 13px;border-radius:2px;
  transition:all .2s;
}
.chip:active{transform:scale(.94)}
.chip.on{background:var(--cyan);border-color:var(--cyan);color:#04121a;font-weight:700;box-shadow:0 0 14px rgba(94,234,255,.4)}

/* ---------- main ---------- */
main{position:relative;z-index:10;padding:16px 14px 30px;min-height:52vh}

/* grid view */
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
@media (min-width:640px){.grid{grid-template-columns:repeat(3,1fr)}}
@media (min-width:960px){.grid{grid-template-columns:repeat(4,1fr);max-width:980px;margin:0 auto}}

.card{
  position:relative;overflow:hidden;aspect-ratio:var(--ar,1);
  background:linear-gradient(135deg,#0c1826,#0a1420);
  border:1px solid var(--line);
  opacity:0;
  transition:transform .18s ease,border-color .25s ease,box-shadow .25s ease;
}
.card.in{animation:cardin .55s cubic-bezier(.2,.7,.3,1) var(--d,0ms) both}
.card.set{animation:none;opacity:1;transform:none}
@keyframes cardin{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:none}}
.card::before{ /* shimmer until loaded */
  content:'';position:absolute;inset:0;z-index:1;
  background:linear-gradient(110deg,transparent 30%,rgba(94,234,255,.09) 50%,transparent 70%);
  background-size:220% 100%;animation:shimmer 1.4s linear infinite;
}
.card.ld::before{display:none}
@keyframes shimmer{from{background-position:180% 0}to{background-position:-80% 0}}
.card::after{ /* HUD corner brackets */
  content:'';position:absolute;inset:5px;z-index:3;pointer-events:none;opacity:.9;
  background:
    linear-gradient(var(--cyan),var(--cyan)) left top/11px 1px,
    linear-gradient(var(--cyan),var(--cyan)) left top/1px 11px,
    linear-gradient(var(--cyan),var(--cyan)) right top/11px 1px,
    linear-gradient(var(--cyan),var(--cyan)) right top/1px 11px,
    linear-gradient(var(--cyan),var(--cyan)) left bottom/11px 1px,
    linear-gradient(var(--cyan),var(--cyan)) left bottom/1px 11px,
    linear-gradient(var(--cyan),var(--cyan)) right bottom/11px 1px,
    linear-gradient(var(--cyan),var(--cyan)) right bottom/1px 11px;
  background-repeat:no-repeat;
  transition:opacity .25s;
}
.card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .5s ease,transform .4s ease}
.card.ld img{opacity:1}
.card .idx{
  position:absolute;top:7px;left:9px;z-index:3;
  font-size:9px;color:var(--cyan);letter-spacing:.18em;
  text-shadow:0 1px 4px rgba(0,0,0,.9);
}
.card figcaption{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  font-size:9px;letter-spacing:.14em;color:#cfe9f5;
  padding:16px 9px 7px;
  background:linear-gradient(180deg,transparent,rgba(3,7,12,.82));
}
.card:active{transform:scale(.965);border-color:var(--line-strong)}
@media (hover:hover){
  .card:hover{transform:translateY(-4px);border-color:var(--line-strong);box-shadow:0 10px 26px rgba(0,0,0,.5),0 0 16px rgba(94,234,255,.14)}
  .card:hover img{transform:scale(1.06)}
  .card:hover::after{opacity:1}
}

/* timeline view */
.timeline{max-width:680px;margin:0 auto}
.tl-group{margin-bottom:26px}
.tl-group h3{
  font-size:12px;letter-spacing:.34em;color:var(--amber);
  display:flex;align-items:center;gap:12px;margin-bottom:12px;
}
.tl-group h3::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,rgba(255,180,84,.5),transparent)}
.tl-row{
  display:flex;align-items:center;gap:12px;padding:9px 10px;margin-bottom:8px;
  border:1px solid transparent;border-left:2px solid var(--line);
  position:relative;transition:all .2s;
  animation:cardin .45s ease both;
}
.tl-row::before{
  content:'';position:absolute;left:-5px;top:50%;width:7px;height:7px;margin-top:-4px;
  background:var(--bg0);border:1px solid var(--cyan);transform:rotate(45deg);
}
.tl-row img{width:54px;height:54px;object-fit:cover;border:1px solid var(--line);flex:0 0 auto}
.tl-meta{flex:1;min-width:0}
.tl-name{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tl-sub{font-size:9.5px;color:var(--muted);margin-top:2px;letter-spacing:.12em}
.tl-idx{font-size:10px;color:var(--cyan-dim);letter-spacing:.16em}
.tl-row:active{background:var(--panel);border-color:var(--line);border-left-color:var(--cyan)}
@media (hover:hover){
  .tl-row:hover{background:var(--panel);border-color:var(--line);border-left-color:var(--cyan);transform:translateX(4px)}
}

/* ---------- empty state ---------- */
.empty{text-align:center;padding:64px 24px 40px}
.radar{
  width:150px;aspect-ratio:1;border-radius:50%;margin:0 auto 28px;position:relative;
  border:1px solid rgba(94,234,255,.4);
  background:
    radial-gradient(circle,rgba(94,234,255,.09),transparent 72%),
    repeating-radial-gradient(circle at center,rgba(94,234,255,.13) 0 1px,transparent 1px 25px);
  box-shadow:0 0 34px rgba(94,234,255,.12),inset 0 0 26px rgba(94,234,255,.06);
}
.radar::before{
  content:'';position:absolute;inset:0;
  background:
    linear-gradient(rgba(94,234,255,.22),rgba(94,234,255,.22)) center/1px 100%,
    linear-gradient(rgba(94,234,255,.22),rgba(94,234,255,.22)) center/100% 1px;
  background-repeat:no-repeat;
}
.radar .sweep{
  position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from 0deg,rgba(94,234,255,.55),rgba(94,234,255,.12) 55deg,transparent 75deg);
  animation:spin 2.6s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.radar .core{
  position:absolute;left:50%;top:50%;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;
  background:var(--cyan);box-shadow:0 0 14px var(--cyan);animation:pulse 1.6s ease infinite;
}
.empty-sig{font-size:11px;letter-spacing:.55em;color:var(--cyan);margin-bottom:12px}
.empty h2{font-size:21px;font-weight:800;letter-spacing:.1em;margin-bottom:10px}
.empty-sub{font-size:12.5px;color:var(--muted);line-height:1.9}
.empty-sub b{color:var(--cyan);font-size:15px}
.empty-admin{display:none}
body.admin .empty-admin{display:block}
body.admin .empty-guest{display:none}

footer{
  position:relative;z-index:10;text-align:center;
  font-size:9px;letter-spacing:.22em;color:var(--muted);
  padding:8px 20px calc(26px + var(--safe-b));
  border-top:1px solid var(--line);
}

/* ---------- FAB + upload sheet ---------- */
#fab{
  position:fixed;right:18px;bottom:calc(22px + var(--safe-b));z-index:60;
  width:56px;height:56px;border-radius:50%;
  display:none;align-items:center;justify-content:center;
  color:var(--cyan);font-size:27px;line-height:1;
  border:1px solid rgba(94,234,255,.55);
  background:radial-gradient(circle at 32% 28%,#133449,#0a1a2a);
  box-shadow:0 0 20px rgba(94,234,255,.35),inset 0 0 14px rgba(94,234,255,.16);
  transition:transform .18s;
}
body.admin #fab{display:flex;animation:fabIn .4s cubic-bezier(.2,.9,.3,1.3) both}
@keyframes fabIn{from{transform:scale(0)}to{transform:scale(1)}}
#fab::after{content:'';position:absolute;inset:-1px;border-radius:50%;border:1px solid rgba(94,234,255,.5);animation:ring 2.2s ease infinite}
@keyframes ring{from{transform:scale(1);opacity:.8}to{transform:scale(1.55);opacity:0}}
#fab:active{transform:scale(.9)}

#sheet{position:fixed;inset:0;z-index:90;background:rgba(2,5,9,.66);display:flex;align-items:flex-end}
.sheet-panel{
  width:100%;max-height:62vh;overflow-y:auto;
  background:#0a1420;border-top:1px solid var(--line-strong);
  padding:16px 18px calc(20px + var(--safe-b));
  animation:sheetup .3s cubic-bezier(.2,.8,.3,1);
}
@keyframes sheetup{from{transform:translateY(40%);opacity:0}}
.sheet-title{font-size:11px;letter-spacing:.24em;color:var(--cyan);margin-bottom:14px}
.up-row{display:grid;grid-template-columns:1fr 90px 38px;gap:10px;align-items:center;padding:8px 0;border-bottom:1px dashed rgba(94,234,255,.12)}
.up-name{font-size:10.5px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.up-bar{height:3px;background:rgba(94,234,255,.14);overflow:hidden}
.up-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--cyan),var(--amber));transition:width .15s linear}
.up-pct{font-size:10px;color:var(--muted);text-align:right}
.up-row.ok .up-pct{color:var(--green)}
.up-row.err .up-pct{color:var(--red)}
.up-row.err .up-name{color:var(--red)}

/* ---------- lightbox ---------- */
#lb{
  position:fixed;inset:0;z-index:80;display:flex;flex-direction:column;
  background:rgba(3,7,12,.96);
  opacity:0;transition:opacity .25s ease;
}
#lb.on{opacity:1}
.lb-top,.lb-bot{
  display:flex;align-items:center;gap:14px;
  padding:10px 16px;font-size:10.5px;letter-spacing:.14em;color:var(--muted);
  transition:transform .3s ease,opacity .3s;
}
.lb-top{padding-top:calc(10px + var(--safe-t));border-bottom:1px solid var(--line)}
.lb-top #lb-idx{color:var(--cyan)}
.lb-name{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text)}
#lb-close{font-size:15px;color:var(--muted);padding:4px 6px;transition:color .2s,transform .2s}
#lb-close:active{transform:scale(.85);color:var(--cyan)}
#lb-stage{flex:1;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;touch-action:none}
#lb-img{
  max-width:100%;max-height:100%;object-fit:contain;
  transform-origin:center center;will-change:transform;
  opacity:0;transition:opacity .3s;
  user-select:none;-webkit-user-drag:none;
}
#lb-img.ready{opacity:1}
#lb-img.anim{transition:transform .28s cubic-bezier(.2,.8,.3,1),opacity .3s}
#lb-img.slide-out-l{transform:translateX(-46px)!important;opacity:0!important;transition:all .13s ease}
#lb-img.slide-out-r{transform:translateX(46px)!important;opacity:0!important;transition:all .13s ease}
#lb-img.slide-in-r{animation:sirl .24s ease}
#lb-img.slide-in-l{animation:sirr .24s ease}
@keyframes sirl{from{transform:translateX(46px);opacity:0}to{transform:none;opacity:1}}
@keyframes sirr{from{transform:translateX(-46px);opacity:0}to{transform:none;opacity:1}}
.lb-bot{border-top:1px solid var(--line);padding-bottom:calc(10px + var(--safe-b))}
.lb-meta{flex:1;display:flex;gap:14px;font-size:10px}
.lb-meta #lb-date{color:var(--amber)}
.lb-acts{display:flex;gap:8px}
.lb-btn{
  font-size:10px;letter-spacing:.16em;color:var(--cyan);text-decoration:none;
  border:1px solid rgba(94,234,255,.4);padding:7px 15px;border-radius:2px;
  transition:all .18s;
}
.lb-btn:active{transform:scale(.93);background:rgba(94,234,255,.12)}
.lb-btn.danger{color:var(--red);border-color:rgba(255,107,107,.4);display:none}
body.admin .lb-btn.danger{display:inline-block}
.lb-btn.danger:active{background:rgba(255,107,107,.12)}
#lb.bars-off .lb-top{transform:translateY(-110%);opacity:0}
#lb.bars-off .lb-bot{transform:translateY(110%);opacity:0}

/* ---------- toast ---------- */
#toast{
  position:fixed;left:50%;bottom:calc(92px + var(--safe-b));z-index:120;
  transform:translate(-50%,10px);
  background:#0c1a28;border:1px solid var(--line-strong);color:var(--cyan);
  font-size:11px;letter-spacing:.12em;padding:9px 18px;border-radius:2px;
  box-shadow:0 6px 24px rgba(0,0,0,.5),0 0 14px rgba(94,234,255,.15);
  opacity:0;pointer-events:none;transition:all .3s ease;white-space:nowrap;max-width:88vw;overflow:hidden;text-overflow:ellipsis;
}
#toast.on{opacity:1;transform:translate(-50%,0)}

/* reduced motion */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .sweepline{display:none}
}