/* ═══════════════════════════════════════════════════════
   SCREEN SLIDES — shared viewer for portfolio prototypes
   Each project page sets --accent / --accent-soft / --page-bg
   and adds body.mode-phone or body.mode-web.
   ═══════════════════════════════════════════════════════ */
:root{
  --accent:#6FBFD0;
  --accent-soft:rgba(111,191,208,.14);
  --accent-line:rgba(111,191,208,.42);
  --page-bg:#12191d;
  --panel:rgba(255,255,255,.04);
  --panel-line:rgba(255,255,255,.09);
  --txt:#e6ecef;
  --txt-dim:#9fb0b8;
  --txt-mid:#c3d1d6;
  --f-display:Georgia,'Times New Roman',serif;
  --f-body:system-ui,-apple-system,'Segoe UI',sans-serif;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--page-bg);color:var(--txt);font-family:var(--f-body);
  line-height:1.55;-webkit-font-smoothing:antialiased;
  min-height:100vh;padding:2.5rem 1.5rem 4rem;
}
img{display:block;max-width:100%}

/* ── Header ── */
.pt-head{max-width:1240px;margin:0 auto 2.25rem}
.pt-kicker{font-size:.7rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);margin-bottom:.85rem}
.pt-title{font-family:var(--f-display);font-size:clamp(1.7rem,3.6vw,2.6rem);font-weight:600;line-height:1.12;color:#fff;margin-bottom:.8rem;letter-spacing:-.01em}
.pt-title em{color:var(--accent);font-style:italic}
.pt-sub{font-size:.95rem;color:var(--txt-dim);max-width:72ch}
.note-b{color:#dde6ea;font-weight:600}
.pt-back{
  display:inline-flex;align-items:center;gap:.45rem;margin-top:1.3rem;
  font-size:.78rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--accent);text-decoration:none;border-bottom:1px solid transparent;transition:border-color .3s;
}
.pt-back:hover{border-color:var(--accent)}

/* ── Layout ── */
.pt-shell{max-width:1240px;margin:0 auto;display:grid;gap:2.75rem;align-items:start}
body.mode-phone .pt-shell{grid-template-columns:390px minmax(0,1fr)}
body.mode-web   .pt-shell{grid-template-columns:minmax(0,1.65fr) minmax(290px,1fr)}
@media(max-width:960px){
  body.mode-phone .pt-shell,
  body.mode-web .pt-shell{grid-template-columns:1fr;justify-items:center;gap:2.25rem}
}

/* ── Stage ── */
.stage-wrap{position:sticky;top:2rem;width:100%;display:flex;flex-direction:column;align-items:center;min-width:0}
@media(max-width:960px){.stage-wrap{position:static}}
.stage{width:100%;display:flex;flex-direction:column;align-items:center;min-width:0}

/* Phone frame */
.frame-phone{
  width:390px;max-width:100%;aspect-ratio:1080/2340;position:relative;
  border-radius:42px;overflow:hidden;background:#000;
  border:11px solid #0d1417;
  box-shadow:0 40px 90px rgba(0,0,0,.62),0 0 0 1px rgba(255,255,255,.06),0 0 60px var(--accent-soft);
}
.frame-phone img{width:100%;height:100%;object-fit:cover}

/* Browser frame */
.frame-web{
  width:100%;border-radius:12px;overflow:hidden;background:#0b0f11;
  border:1px solid rgba(255,255,255,.11);
  box-shadow:0 34px 80px rgba(0,0,0,.6),0 0 50px var(--accent-soft);
}
.web-bar{display:flex;align-items:center;gap:.85rem;padding:.6rem .9rem;background:#141a1d;border-bottom:1px solid rgba(255,255,255,.08)}
.web-dots{display:flex;gap:6px;flex-shrink:0}
.web-dots i{width:10px;height:10px;border-radius:50%;display:block}
.web-dots i:nth-child(1){background:#ff5f57}.web-dots i:nth-child(2){background:#febc2e}.web-dots i:nth-child(3){background:#28c840}
.web-url{
  flex:1;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);
  border-radius:5px;padding:.28rem .7rem;font-size:.7rem;color:var(--txt-dim);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.frame-web .shot{width:100%;background:#fff}
.frame-web .shot img{width:100%;height:auto}

.slide-img{cursor:zoom-in;transition:opacity .28s ease}
.slide-img.fading{opacity:0}

/* ── Controls ── */
.controls{display:flex;align-items:center;gap:1rem;margin-top:1.15rem;width:100%;justify-content:center}
.nav-btn{
  width:42px;height:42px;flex-shrink:0;border-radius:50%;cursor:pointer;
  background:var(--panel);border:1px solid var(--panel-line);color:var(--txt-mid);
  display:flex;align-items:center;justify-content:center;transition:all .25s;
}
.nav-btn:hover{background:var(--accent-soft);border-color:var(--accent-line);color:#fff}
.nav-btn svg{width:19px;height:19px}
.counter{font-size:.8rem;font-weight:600;color:var(--txt-mid);font-variant-numeric:tabular-nums;min-width:66px;text-align:center}
.caption{
  margin-top:.85rem;text-align:center;font-size:.9rem;color:var(--txt-mid);
  font-weight:500;line-height:1.45;max-width:46ch;min-height:2.6em;
}
.caption b{color:#fff;font-weight:600}

/* Dots */
.dots{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:.9rem;max-width:340px}
.dots button{
  width:8px;height:8px;border-radius:50%;border:none;cursor:pointer;padding:0;
  background:rgba(255,255,255,.2);transition:background .25s,transform .25s;
}
.dots button:hover{background:rgba(255,255,255,.45)}
.dots button.on{background:var(--accent);transform:scale(1.35)}

/* ── Panel ── */
.pt-panel{display:flex;flex-direction:column;gap:1.75rem;width:100%;max-width:600px}
.pnl{background:var(--panel);border:1px solid var(--panel-line);border-radius:14px;padding:1.4rem}
.pnl-h{font-size:.7rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:1rem}
.flow-list{display:flex;flex-direction:column;gap:.3rem;max-height:none}
.flow-btn{
  display:flex;align-items:flex-start;gap:.8rem;width:100%;text-align:left;
  background:transparent;border:1px solid transparent;border-radius:8px;
  padding:.6rem .7rem;cursor:pointer;color:var(--txt-dim);font-family:inherit;
  transition:background .22s,border-color .22s,color .22s;
}
.flow-btn:hover{background:var(--accent-soft);color:#dde6ea}
.flow-btn.on{background:var(--accent-soft);border-color:var(--accent-line);color:#fff}
.flow-n{font-size:.64rem;font-weight:700;letter-spacing:.08em;color:var(--accent);flex-shrink:0;width:22px;padding-top:.2rem;font-variant-numeric:tabular-nums}
.flow-t{font-size:.85rem;font-weight:600;line-height:1.3;display:block}
.flow-d{font-size:.76rem;line-height:1.45;opacity:.8;display:block;margin-top:.1rem}
.pnl-note{font-size:.78rem;color:#93a3aa;line-height:1.55}
.pnl-note+.pnl-note{margin-top:.8rem}

/* Token chips */
.tok{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.85rem}
.tok span{font-size:.7rem;font-weight:500;padding:.28rem .55rem;border-radius:5px;border:1px solid rgba(255,255,255,.12);color:var(--txt-mid)}
.sw{width:11px;height:11px;border-radius:3px;display:inline-block;margin-right:.35rem;vertical-align:-1px}

/* ── Lightbox ── */
.lb{position:fixed;inset:0;background:rgba(4,8,10,.96);z-index:900;display:none;align-items:center;justify-content:center;padding:2rem;cursor:zoom-out}
.lb.open{display:flex}
.lb img{max-width:100%;max-height:92vh;width:auto;border-radius:8px;box-shadow:0 30px 90px rgba(0,0,0,.8)}
.lb-close{position:absolute;top:1.2rem;right:1.4rem;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.16);color:#fff;font-size:1.15rem;cursor:pointer;display:flex;align-items:center;justify-content:center}
.lb-close:hover{background:rgba(255,255,255,.18)}
.lb-arrow{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.16);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center}
.lb-arrow:hover{background:rgba(255,255,255,.18)}
.lb-prev{left:1.4rem}.lb-next{right:1.4rem}
.lb-arrow svg{width:22px;height:22px}
.lb-cap{position:absolute;bottom:1.4rem;left:0;right:0;text-align:center;font-size:.85rem;color:var(--txt-mid);padding:0 2rem}