/* ============================================================
   ResultCam — Design System (Framer-inspired, MatsuriCam edition)
   ============================================================ */

/* ── Tokens ─────────────────────────────────────────────────── */
:root {
  --rc-canvas:   #090909;
  --rc-surf-1:   #141414;
  --rc-surf-2:   #1c1c1c;
  --rc-hairline: #262626;

  --rc-ink:      #ffffff;
  --rc-ink-2:    #999999;

  --rc-accent:   #0099ff;
  --rc-violet:   #6a4cf5;
  --rc-magenta:  #d44df0;
  --rc-orange:   #ff7a3d;
  --rc-coral:    #ff5577;
  --rc-cyan:     #00f0ff;

  --rc-r-sm:  6px;
  --rc-r-md:  10px;
  --rc-r-lg:  15px;
  --rc-r-xl:  20px;
  --rc-r-xxl: 30px;
  --rc-r-pill:100px;

  --rc-font: 'Inter', system-ui, sans-serif;

  --rc-sp-xs: 8px;
  --rc-sp-sm: 12px;
  --rc-sp-md: 16px;
  --rc-sp-lg: 24px;
  --rc-sp-xl: 32px;
  --rc-sp-sec:64px;
}

/* ── Reset ──────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--rc-font);
  background:var(--rc-canvas);
  color:var(--rc-ink);
  min-height:100dvh;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%;height:auto}
button{cursor:pointer;border:none;background:none;font-family:inherit}
a{color:inherit;text-decoration:none}
input{font-family:inherit}

/* ── Gradient text util ─────────────────────────────────────── */
.gradient-text{
  background:linear-gradient(135deg,var(--rc-violet),var(--rc-magenta),var(--rc-coral));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}

/* ── Buttons ─────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;gap:6px;
  font-size:14px;font-weight:500;line-height:1;letter-spacing:-0.14px;
  padding:10px 18px;border-radius:var(--rc-r-pill);
  transition:all .2s ease;white-space:nowrap;
}
.btn--primary{
  background:var(--rc-ink);color:var(--rc-canvas);
}
.btn--primary:hover{background:#ddd;transform:translateY(-1px)}
.btn--primary:active{transform:translateY(0);background:#bbb}
.btn--ghost{
  background:var(--rc-surf-1);color:var(--rc-ink);
  border:1px solid var(--rc-hairline);
}
.btn--ghost:hover{background:var(--rc-surf-2);border-color:#444}
.btn--sm{padding:8px 14px;font-size:13px}
.btn--lg{padding:14px 28px;font-size:16px}
.btn__arrow{transition:transform .2s}
.btn:hover .btn__arrow{transform:translateX(3px)}

/* ============================================================
   HOME PAGE — Spotify Design System
   ============================================================ */

/* Spotify tokens (scoped to home) */
:root {
  --sp-bg:       #121212;
  --sp-surf:     #181818;
  --sp-surf-2:   #1f1f1f;
  --sp-green:    #1ed760;
  --sp-text:     #ffffff;
  --sp-muted:    #b3b3b3;
  --sp-border:   #4d4d4d;
  --sp-shadow-md: rgba(0,0,0,0.3) 0px 8px 8px;
  --sp-shadow-lg: rgba(0,0,0,0.5) 0px 8px 24px;
  --sp-inset:    rgb(124,124,124) 0px 0px 0px 1px inset;
}

/* Override body bg for home */
.sp-root {
  background: var(--sp-bg);
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  color: var(--sp-text);
  font-family: var(--rc-font);
}

/* ── Center stage ──────────────────────────────────────────── */
.sp-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  text-align: center;
  max-width: 420px;
  margin: 0 auto;
  width: 100%;
}

/* ── Logo ──────────────────────────────────────────────────── */
.sp-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 40px;
}
.sp-logo__icon {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}
.sp-logo__text {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.5px;
  color: var(--sp-text);
}

/* ── Headline ──────────────────────────────────────────────── */
.sp-headline {
  font-size: clamp(40px, 8vw, 64px);
  font-weight: 700;
  line-height: 1.0;
  letter-spacing: -2px;
  margin-bottom: 16px;
  color: var(--sp-text);
}

.sp-sub {
  font-size: 16px;
  font-weight: 400;
  color: var(--sp-muted);
  margin-bottom: 40px;
  line-height: 1.5;
}

/* ── Form ──────────────────────────────────────────────────── */
.sp-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 20px;
}

/* Input pill */
.sp-input-wrap {
  position: relative;
  width: 100%;
}
.sp-input-wrap__icon {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  pointer-events: none;
}
.sp-input {
  width: 100%;
  background: var(--sp-surf-2);
  color: var(--sp-text);
  border: none;
  outline: none;
  border-radius: 500px;
  padding: 16px 24px 16px 52px;
  font-size: 16px;
  font-weight: 400;
  font-family: var(--rc-font);
  box-shadow: var(--sp-inset);
  transition: box-shadow .15s;
}
.sp-input::placeholder { color: var(--sp-muted); }
.sp-input:focus {
  box-shadow: rgb(18,18,18) 0px 1px 0px, rgb(255,255,255) 0px 0px 0px 1px inset;
}

/* CTA button — Spotify Green pill */
.sp-btn {
  width: 100%;
  background: var(--sp-green);
  color: #000000;
  border: none;
  border-radius: 500px;
  padding: 16px 24px;
  font-size: 14px;
  font-weight: 700;
  font-family: var(--rc-font);
  letter-spacing: 1.4px;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: var(--sp-shadow-md);
  transition: background .15s, transform .1s, box-shadow .15s;
}
.sp-btn:hover {
  background: #1fdf64;
  transform: scale(1.02);
  box-shadow: var(--sp-shadow-lg);
}
.sp-btn:active {
  transform: scale(0.98);
}

/* Hint */
.sp-hint {
  font-size: 12px;
  color: var(--sp-muted);
  line-height: 1.6;
}
.sp-hint code {
  font-family: 'Courier New', monospace;
  color: var(--sp-text);
  background: var(--sp-surf-2);
  border-radius: 4px;
  padding: 1px 6px;
  font-size: 11px;
}

/* ── Footer ────────────────────────────────────────────────── */
.sp-footer {
  text-align: center;
  padding: 24px;
  font-size: 12px;
  color: var(--sp-muted);
  border-top: 1px solid #282828;
}
.sp-footer strong { color: var(--sp-text); }

/* ============================================================
   SESSION PAGE
   ============================================================ */
.session-page{padding-bottom:100px}

/* Dynamic ambient glow */
.session-glow{
  position:fixed;top:0;left:0;right:0;
  height:400px;pointer-events:none;z-index:0;
  opacity:.15;filter:blur(100px);
  background:var(--glow-color,var(--rc-violet));
  border-radius:50%;transform:translateX(-10%);
  width:120%;
}

/* Nav */
.session-nav{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:var(--rc-sp-sm) var(--rc-sp-md);
  background:rgba(9,9,9,.8);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid var(--rc-hairline);
}
.session-nav__back{
  display:flex;align-items:center;gap:6px;
  font-size:14px;color:var(--rc-ink-2);
  transition:color .2s;
}
.session-nav__back:hover{color:var(--rc-ink)}
.session-nav__brand{
  display:flex;align-items:center;gap:6px;
  font-size:14px;font-weight:600;
}
.session-nav__icon{font-size:18px}

/* Header */
.session-header{
  position:relative;z-index:1;
  padding:var(--rc-sp-xl) var(--rc-sp-lg) var(--rc-sp-lg);
  text-align:center;
}
.session-badge{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--rc-surf-1);border:1px solid var(--rc-hairline);
  border-radius:var(--rc-r-pill);padding:4px 12px;
  font-size:12px;font-weight:500;color:var(--rc-ink-2);
  margin-bottom:var(--rc-sp-md);
}
.session-badge__dot{
  width:6px;height:6px;border-radius:50%;
  background:#22c55e;
  box-shadow:0 0 8px #22c55e;
  animation:pulse 2s infinite;
}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}

.session-title{
  font-size:clamp(28px,6vw,48px);
  font-weight:700;letter-spacing:-2px;line-height:1.1;
  margin-bottom:var(--rc-sp-sm);
}
.session-meta{
  display:flex;align-items:center;justify-content:center;gap:var(--rc-sp-sm);
  font-size:14px;color:var(--rc-ink-2);
}
.session-meta__sep{opacity:.4}

/* Composite / final image */
.session-composite{
  position:relative;z-index:1;
  padding:0 var(--rc-sp-lg) var(--rc-sp-lg);
}
.composite-card{
  max-width:600px;margin:0 auto;
  background:var(--rc-surf-1);
  border:1px solid var(--rc-hairline);
  border-radius:var(--rc-r-xxl);overflow:hidden;
  box-shadow:0 0 60px rgba(106,76,245,.2);
}
.composite-label{
  padding:var(--rc-sp-sm) var(--rc-sp-lg);
  font-size:12px;font-weight:600;letter-spacing:.5px;
  text-transform:uppercase;color:var(--rc-ink-2);
  border-bottom:1px solid var(--rc-hairline);
}
.composite-img{
  width:100%;object-fit:cover;
  transition:transform .4s ease;
}
.composite-card:hover .composite-img{transform:scale(1.01)}

/* GIF */
.session-gif{
  position:relative;z-index:1;
  padding:0 var(--rc-sp-lg) var(--rc-sp-lg);
}
.gif-card{
  max-width:420px;margin:0 auto;
  background:var(--rc-surf-1);
  border:1px solid var(--rc-hairline);
  border-radius:var(--rc-r-xxl);overflow:hidden;
  box-shadow:0 0 40px rgba(212,77,240,.15);
}
.gif-label{
  padding:var(--rc-sp-sm) var(--rc-sp-lg);
  font-size:12px;font-weight:600;letter-spacing:.5px;
  text-transform:uppercase;color:var(--rc-ink-2);
  border-bottom:1px solid var(--rc-hairline);
}
.gif-img{width:100%;object-fit:cover}

/* Section title */
.section-title{
  font-size:20px;font-weight:700;letter-spacing:-0.8px;
  margin-bottom:var(--rc-sp-md);padding:0 var(--rc-sp-lg);
  position:relative;z-index:1;
}

/* Photo grid */
.session-photos{position:relative;z-index:1}
.photo-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:var(--rc-sp-sm);
  padding:0 var(--rc-sp-lg);
}
@media(min-width:600px){
  .photo-grid{grid-template-columns:repeat(3,1fr)}
}
@media(min-width:900px){
  .photo-grid{grid-template-columns:repeat(4,1fr)}
}

.photo-card{
  position:relative;aspect-ratio:3/4;overflow:hidden;
  border-radius:var(--rc-r-xl);
  background:var(--rc-surf-1);
  cursor:pointer;
  transition:transform .25s ease,box-shadow .25s ease;
}
.photo-card:hover{transform:scale(1.02);box-shadow:0 10px 40px rgba(0,0,0,.5)}
.photo-card__img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .35s ease;
}
.photo-card:hover .photo-card__img{transform:scale(1.05)}
.photo-card__overlay{
  position:absolute;inset:0;
  background:linear-gradient(to top,rgba(0,0,0,.8) 0%,transparent 50%);
  opacity:0;transition:opacity .25s;
  display:flex;flex-direction:column;
  justify-content:space-between;padding:var(--rc-sp-sm);
}
.photo-card:hover .photo-card__overlay{opacity:1}
.photo-card__num{
  align-self:flex-start;
  background:rgba(255,255,255,.1);backdrop-filter:blur(6px);
  border-radius:var(--rc-r-pill);padding:2px 8px;
  font-size:11px;font-weight:600;
}
.photo-card__actions{
  display:flex;gap:6px;justify-content:flex-end;align-self:flex-end;
}
.photo-action-btn{
  width:36px;height:36px;border-radius:50%;
  background:rgba(255,255,255,.15);backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.2);
  display:flex;align-items:center;justify-content:center;
  font-size:16px;cursor:pointer;color:#fff;
  transition:background .2s,transform .2s;
  text-decoration:none;
}
.photo-action-btn:hover{background:rgba(255,255,255,.3);transform:scale(1.1)}

/* Download bar */
.download-bar{
  position:fixed;bottom:0;left:0;right:0;z-index:40;
  padding:var(--rc-sp-sm) var(--rc-sp-md) max(var(--rc-sp-sm),env(safe-area-inset-bottom));
  background:rgba(20,20,20,.9);backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border-top:1px solid var(--rc-hairline);
}
.download-bar__inner{
  max-width:600px;margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;gap:var(--rc-sp-sm);
}
.download-bar__info{display:flex;flex-direction:column;gap:2px}
.download-bar__count{font-size:15px;font-weight:600}
.download-bar__frame{font-size:12px;color:var(--rc-ink-2)}
.download-bar__actions{display:flex;gap:8px}

/* ── Lightbox ─────────────────────────────────────────────── */
.lightbox{
  position:fixed;inset:0;z-index:100;
  display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity .3s;
}
.lightbox.is-open{opacity:1;pointer-events:all}
.lightbox__backdrop{
  position:absolute;inset:0;
  background:rgba(0,0,0,.92);backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.lightbox__content{
  position:relative;z-index:1;
  width:100%;max-width:700px;padding:var(--rc-sp-md);
  display:flex;flex-direction:column;gap:var(--rc-sp-md);
  max-height:100dvh;
}
.lightbox__close{
  position:absolute;top:var(--rc-sp-sm);right:var(--rc-sp-sm);
  width:40px;height:40px;border-radius:50%;
  background:var(--rc-surf-2);color:var(--rc-ink);
  font-size:18px;display:flex;align-items:center;justify-content:center;
  transition:background .2s,transform .2s;z-index:2;
}
.lightbox__close:hover{background:var(--rc-surf-1);transform:rotate(90deg)}
.lightbox__nav{
  position:absolute;top:50%;transform:translateY(-50%);
  width:44px;height:44px;border-radius:50%;
  background:var(--rc-surf-2);color:var(--rc-ink);
  font-size:24px;display:flex;align-items:center;justify-content:center;
  transition:background .2s,transform .2s;z-index:2;
}
.lightbox__nav:hover{background:rgba(255,255,255,.2)}
.lightbox__nav--prev{left:var(--rc-sp-sm)}
.lightbox__nav--next{right:var(--rc-sp-sm)}
.lightbox__img-wrap{
  flex:1;display:flex;align-items:center;justify-content:center;
  overflow:hidden;border-radius:var(--rc-r-xl);
  min-height:0;
}
.lightbox__img{
  max-height:75dvh;max-width:100%;object-fit:contain;
  border-radius:var(--rc-r-xl);
  transition:opacity .25s;
}
.lightbox__footer{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--rc-sp-sm);flex-shrink:0;
}
.lightbox__counter{font-size:13px;color:var(--rc-ink-2);font-weight:500}
.lightbox__footer-actions{display:flex;gap:8px}

/* ── Share Modal ──────────────────────────────────────────── */
.share-modal{
  position:fixed;inset:0;z-index:200;
  display:flex;align-items:flex-end;
  opacity:0;pointer-events:none;transition:opacity .3s;
}
.share-modal.is-open{opacity:1;pointer-events:all}
.share-modal__backdrop{
  position:absolute;inset:0;
  background:rgba(0,0,0,.7);backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
}
.share-modal__sheet{
  position:relative;z-index:1;width:100%;
  background:var(--rc-surf-1);
  border-top-left-radius:var(--rc-r-xxl);
  border-top-right-radius:var(--rc-r-xxl);
  padding:var(--rc-sp-md) var(--rc-sp-lg) max(var(--rc-sp-xl),env(safe-area-inset-bottom));
  transform:translateY(100%);transition:transform .35s cubic-bezier(.32,.72,0,1);
}
.share-modal.is-open .share-modal__sheet{transform:translateY(0)}
.share-modal__handle{
  width:36px;height:4px;border-radius:var(--rc-r-pill);
  background:var(--rc-hairline);margin:0 auto var(--rc-sp-lg);
}
.share-modal__title{
  font-size:20px;font-weight:700;letter-spacing:-0.8px;
  margin-bottom:6px;text-align:center;
}
.share-modal__sub{
  font-size:14px;color:var(--rc-ink-2);text-align:center;
  margin-bottom:var(--rc-sp-xl);
}
.share-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:var(--rc-sp-sm);
  margin-bottom:var(--rc-sp-lg);
}
.share-btn{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  background:var(--rc-surf-2);border:1px solid var(--rc-hairline);
  border-radius:var(--rc-r-xl);padding:var(--rc-sp-md) var(--rc-sp-sm);
  cursor:pointer;color:var(--rc-ink);font-size:12px;font-weight:500;
  transition:background .2s,transform .15s;
}
.share-btn:hover{background:#2a2a2a;transform:scale(1.04)}
.share-btn:active{transform:scale(.97)}
.share-btn__icon{font-size:26px}
.share-modal__cancel{width:100%;justify-content:center}

/* ── Error page ───────────────────────────────────────────── */
.error-page{
  min-height:100dvh;display:flex;align-items:center;justify-content:center;
  position:relative;text-align:center;padding:var(--rc-sp-lg);
}
.error-glow{
  position:fixed;top:20%;left:50%;transform:translateX(-50%);
  width:400px;height:400px;border-radius:50%;
  background:var(--rc-coral);opacity:.1;filter:blur(100px);
  pointer-events:none;
}
.error-page__inner{position:relative;z-index:1;max-width:400px}
.error-icon{font-size:64px;margin-bottom:var(--rc-sp-lg)}
.error-title{
  font-size:48px;font-weight:800;letter-spacing:-3px;
  margin-bottom:var(--rc-sp-md);
}
.error-desc{
  font-size:16px;color:var(--rc-ink-2);line-height:1.6;
  margin-bottom:var(--rc-sp-xl);
}

/* ── Skeleton loading ─────────────────────────────────────── */
@keyframes shimmer{
  0%{background-position:200% 0}
  100%{background-position:-200% 0}
}
.skeleton{
  background:linear-gradient(90deg,var(--rc-surf-1) 25%,var(--rc-surf-2) 50%,var(--rc-surf-1) 75%);
  background-size:400% 100%;
  animation:shimmer 1.5s ease infinite;
  border-radius:var(--rc-r-md);
}

/* ── Entrance animations ──────────────────────────────────── */
@keyframes fadeUp{
  from{opacity:0;transform:translateY(20px)}
  to{opacity:1;transform:translateY(0)}
}
.session-header{animation:fadeUp .5s ease both}
.session-composite{animation:fadeUp .5s .1s ease both}
.session-gif{animation:fadeUp .5s .2s ease both}
.session-photos{animation:fadeUp .5s .3s ease both}
.download-bar{animation:fadeUp .4s .4s ease both}

/* photo card stagger via JS data-index */
.photo-card{
  opacity:0;animation:fadeUp .4s ease both;
}
/* stagger set in JS */

/* ── Toast notification ───────────────────────────────────── */
.toast{
  position:fixed;bottom:110px;left:50%;transform:translateX(-50%) translateY(20px);
  background:var(--rc-surf-2);border:1px solid var(--rc-hairline);
  border-radius:var(--rc-r-pill);padding:10px 20px;
  font-size:14px;font-weight:500;
  opacity:0;transition:opacity .3s,transform .3s;
  pointer-events:none;z-index:300;white-space:nowrap;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ============================================================
   RAYCAST DESIGN SYSTEM — 404 & Session Not Found
   canvas #07080a · surface ladder · hairline borders · NO shadows
   ============================================================ */

:root {
  --rc2-canvas:       #07080a;
  --rc2-surface:      #0d0d0d;
  --rc2-surf-el:      #101111;
  --rc2-surf-card:    #121212;
  --rc2-hairline:     #242728;
  --rc2-hairline-s:   rgba(255,255,255,0.08);
  --rc2-hairline-str: rgba(255,255,255,0.16);
  --rc2-ink:          #f4f4f6;
  --rc2-body:         #cdcdcd;
  --rc2-mute:         #9c9c9d;
  --rc2-ash:          #6a6b6c;
  --rc2-stripe-a:     #ff5757;
  --rc2-stripe-b:     #a1131a;
  --rc2-white:        #ffffff;
  --rc2-font-feat:    "calt", "kern", "liga", "ss03";
}

/* Root shell */
.rc-root {
  background: var(--rc2-canvas);
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  font-family: var(--rc-font);
  font-feature-settings: var(--rc2-font-feat);
  color: var(--rc2-ink);
  position: relative;
  overflow: hidden;
}

/* ── Diagonal red stripe — hero-only, one per page ─────────── */
.rc-stripe {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 180px;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.rc-stripe span {
  position: absolute;
  display: block;
  height: 3px;
  width: 200%;
  left: -50%;
  background: linear-gradient(90deg, transparent, var(--rc2-stripe-a), var(--rc2-stripe-b), transparent);
  opacity: 0.35;
  transform-origin: center;
}
.rc-stripe span:nth-child(1) { top: 28px;  transform: rotate(-4deg); opacity: 0.30; }
.rc-stripe span:nth-child(2) { top: 52px;  transform: rotate(-4deg); opacity: 0.20; }
.rc-stripe span:nth-child(3) { top: 76px;  transform: rotate(-4deg); opacity: 0.10; }

/* ── Stage — center everything ─────────────────────────────── */
.rc-stage {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  position: relative;
  z-index: 1;
}

/* ── Command Palette Card ───────────────────────────────────── */
.rc-palette {
  width: 100%;
  max-width: 560px;
  background: var(--rc2-surface);
  border: 1px solid var(--rc2-hairline);
  border-radius: 10px;
  overflow: hidden;
  /* No drop shadow — elevation from surface ladder only */
}

/* Palette header: traffic-light dots + search bar */
.rc-palette__header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--rc2-hairline);
  background: var(--rc2-surf-el);
}

.rc-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.rc-dot--red    { background: #ff5f57; }
.rc-dot--yellow { background: #febc2e; }
.rc-dot--green  { background: #28c840; }

.rc-palette__search {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--rc2-surf-card);
  border: 1px solid var(--rc2-hairline);
  border-radius: 8px;
  padding: 7px 12px;
}

.rc-palette__query {
  font-size: 14px;
  font-weight: 400;
  color: var(--rc2-body);
  font-feature-settings: var(--rc2-font-feat);
  font-family: 'Courier New', monospace;
  letter-spacing: 0;
}

/* Blinking cursor */
.rc-caret {
  display: inline-block;
  width: 1px; height: 14px;
  background: var(--rc2-ink);
  margin-left: 1px;
  vertical-align: middle;
  animation: blink 1.1s step-end infinite;
}
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }

/* Palette body */
.rc-palette__body {
  padding: 8px 0;
}

/* Empty state */
.rc-empty {
  padding: 32px 24px 24px;
  text-align: center;
}
.rc-empty__label {
  font-size: 12px;
  font-weight: 400;
  color: var(--rc2-ash);
  letter-spacing: 0.4px;
  text-transform: uppercase;
  margin-bottom: 12px;
  font-feature-settings: var(--rc2-font-feat);
}
.rc-empty__title {
  font-size: 22px;
  font-weight: 500;
  color: var(--rc2-ink);
  line-height: 1.15;
  letter-spacing: 0;
  margin-bottom: 10px;
  font-feature-settings: var(--rc2-font-feat);
}
.rc-empty__desc {
  font-size: 14px;
  font-weight: 400;
  color: var(--rc2-mute);
  line-height: 1.6;
  max-width: 340px;
  margin: 0 auto;
  font-feature-settings: var(--rc2-font-feat);
}

/* Divider */
.rc-divider {
  height: 1px;
  background: var(--rc2-hairline);
  margin: 8px 0;
}

/* Command palette rows */
.rc-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  margin: 2px 6px;
  border-radius: 6px;
  text-decoration: none;
  color: var(--rc2-ink);
  transition: background .1s;
  cursor: pointer;
}
.rc-row:first-of-type,
.rc-row:hover:not(.rc-row--muted) {
  background: var(--rc2-surf-card);
}
.rc-row--muted { opacity: 0.6; }
.rc-row--muted:hover { background: transparent; }

.rc-row__icon {
  width: 28px; height: 28px;
  background: var(--rc2-surf-el);
  border: 1px solid var(--rc2-hairline);
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.rc-row__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.rc-row__label {
  font-size: 14px;
  font-weight: 500;
  color: var(--rc2-ink);
  line-height: 1.4;
  font-feature-settings: var(--rc2-font-feat);
  letter-spacing: 0.2px;
}
.rc-row__label--muted { color: var(--rc2-mute); }
.rc-row__meta {
  font-size: 12px;
  font-weight: 400;
  color: var(--rc2-ash);
  letter-spacing: 0.1px;
  font-feature-settings: var(--rc2-font-feat);
}
.rc-row__shortcut {
  display: flex; gap: 3px; align-items: center; flex-shrink: 0;
}

/* Keycap glyphs — the Raycast signature */
.rc-key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--rc-font);
  font-size: 11px;
  font-weight: 500;
  color: var(--rc2-body);
  background: linear-gradient(180deg, var(--rc2-surf-card) 0%, var(--rc2-surface) 100%);
  border: 1px solid var(--rc2-hairline);
  border-bottom-width: 2px;
  border-radius: 4px;
  padding: 1px 6px;
  min-height: 20px;
  font-style: normal;
  font-feature-settings: var(--rc2-font-feat);
  letter-spacing: 0;
}

/* Palette footer — hint bar */
.rc-palette__footer {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 8px 16px;
  border-top: 1px solid var(--rc2-hairline);
  background: var(--rc2-surf-el);
}
.rc-hint {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 400;
  color: var(--rc2-ash);
  letter-spacing: 0.4px;
  font-feature-settings: var(--rc2-font-feat);
}

/* ============================================================
   RAYCAST GALLERY — Session page
   ============================================================ */

/* Gallery root — same dark canvas as rc-root */
.rg-root {
  background: var(--rc2-canvas);
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  color: var(--rc2-ink);
  font-family: var(--rc-font);
  font-feature-settings: var(--rc2-font-feat);
}

/* ── Nav ─────────────────────────────────────────────────── */
.rg-nav {
  display: flex;
  align-items: center;
  height: 56px;
  padding: 0 24px;
  border-bottom: 1px solid var(--rc2-hairline);
  background: var(--rc2-canvas);
  position: sticky;
  top: 0;
  z-index: 50;
}
.rg-nav__back {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--rc2-mute);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  letter-spacing: 0.2px;
  transition: color .1s;
}
.rg-nav__back:hover { color: var(--rc2-ink); }
.rg-nav__brand { flex: 1; display: flex; justify-content: center; }
.rg-nav__wordmark {
  font-size: 14px;
  font-weight: 500;
  color: var(--rc2-ink);
  letter-spacing: 0.2px;
}
.rg-nav__actions { display: flex; gap: 8px; }

/* ── Buttons ─────────────────────────────────────────────── */
.rg-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.2px;
  border-radius: 8px;
  padding: 8px 14px;
  height: 36px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  font-family: var(--rc-font);
  font-feature-settings: var(--rc2-font-feat);
  transition: background .1s, color .1s;
  white-space: nowrap;
}
/* Primary — white pill (Raycast convention) */
.rg-btn--primary {
  background: var(--rc2-white);
  color: #000;
}
.rg-btn--primary:hover { background: #e8e8e8; }
/* Ghost — transparent with hairline */
.rg-btn--ghost {
  background: transparent;
  color: var(--rc2-body);
  border: 1px solid var(--rc2-hairline);
}
.rg-btn--ghost:hover { background: var(--rc2-surf-el); color: var(--rc2-ink); }
/* Sizes */
.rg-btn--sm { padding: 5px 10px; height: 30px; font-size: 13px; }
.rg-btn--full { width: 100%; justify-content: center; }

/* ── Body layout: sidebar + main ─────────────────────────── */
.rg-body {
  display: flex;
  flex: 1;
  gap: 0;
}

/* Sidebar */
.rg-sidebar {
  width: 260px;
  flex-shrink: 0;
  border-right: 1px solid var(--rc2-hairline);
  padding: 24px 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: sticky;
  top: 56px;
  height: calc(100dvh - 56px);
  overflow-y: auto;
}
.rg-sidebar__card {
  background: var(--rc2-surface);
  border: 1px solid var(--rc2-hairline);
  border-radius: 10px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Badge */
.rg-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 400;
  color: var(--rc2-mute);
  font-family: 'Courier New', monospace;
  letter-spacing: 0;
}
.rg-badge__dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #59d499;
  flex-shrink: 0;
}

.rg-sidebar__title {
  font-size: 18px;
  font-weight: 500;
  color: var(--rc2-ink);
  line-height: 1.3;
  letter-spacing: 0.2px;
}

/* Meta list */
.rg-meta-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--rc2-hairline);
  padding-top: 12px;
}
.rg-meta-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 5px 0;
  border-bottom: 1px solid var(--rc2-hairline-s);
}
.rg-meta-row__label {
  font-size: 12px;
  font-weight: 400;
  color: var(--rc2-ash);
  letter-spacing: 0.1px;
}
.rg-meta-row__value {
  font-size: 13px;
  font-weight: 500;
  color: var(--rc2-body);
  letter-spacing: 0.2px;
}
.rg-mono {
  font-family: 'Courier New', monospace;
  font-size: 11px;
  color: var(--rc2-mute);
  font-weight: 400;
}

/* Keyboard hints */
.rg-keyhints {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 4px 0;
}

/* Main */
.rg-main {
  flex: 1;
  padding: 32px 32px;
  display: flex;
  flex-direction: column;
  gap: 40px;
  min-width: 0;
}

/* Section */
.rg-section { display: flex; flex-direction: column; gap: 16px; }
.rg-section__header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--rc2-hairline);
}
.rg-section__label {
  font-size: 12px;
  font-weight: 500;
  color: var(--rc2-ash);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.rg-section__count {
  font-size: 12px;
  font-weight: 400;
  color: var(--rc2-ash);
  background: var(--rc2-surf-el);
  border: 1px solid var(--rc2-hairline);
  border-radius: 4px;
  padding: 0 6px;
  height: 18px;
  display: inline-flex;
  align-items: center;
}

/* Composite image */
.rg-composite-wrap {
  background: var(--rc2-surface);
  border: 1px solid var(--rc2-hairline);
  border-radius: 10px;
  overflow: hidden;
  display: inline-block;
  max-width: 480px;
}
.rg-composite-img {
  display: block;
  width: 100%;
  height: auto;
}

/* Photo grid */
.rg-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 8px;
}
.rg-photo-card {
  position: relative;
  background: var(--rc2-surface);
  border: 1px solid var(--rc2-hairline);
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  aspect-ratio: 4/3;
  transition: border-color .1s;
}
.rg-photo-card:hover { border-color: var(--rc2-hairline-str); }
.rg-photo-card:focus-visible { outline: 1px solid var(--rc2-white); outline-offset: 2px; }
.rg-photo-card__img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.rg-photo-card__overlay {
  position: absolute;
  inset: 0;
  background: rgba(7,8,10,0.55);
  opacity: 0;
  transition: opacity .15s;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 8px 10px;
}
.rg-photo-card:hover .rg-photo-card__overlay { opacity: 1; }
.rg-photo-card__num {
  font-size: 12px;
  font-weight: 500;
  color: var(--rc2-mute);
  letter-spacing: 0.4px;
}
.rg-photo-card__actions { display: flex; gap: 4px; }
.rg-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  background: var(--rc2-surf-el);
  border: 1px solid var(--rc2-hairline-str);
  border-radius: 6px;
  color: var(--rc2-body);
  cursor: pointer;
  text-decoration: none;
  transition: background .1s, color .1s;
}
.rg-icon-btn:hover { background: var(--rc2-surf-card); color: var(--rc2-ink); }

/* ── Lightbox ─────────────────────────────────────────────── */
.rg-lightbox {
  position: fixed; inset: 0; z-index: 200;
  display: none; align-items: center; justify-content: center;
}
.rg-lightbox[aria-hidden="false"] { display: flex; }
.rg-lightbox__backdrop {
  position: absolute; inset: 0;
  background: rgba(7,8,10,0.92);
}
.rg-lightbox__content {
  position: relative; z-index: 1;
  width: 90vw; max-width: 900px;
  display: flex; flex-direction: column; gap: 12px;
  align-items: center;
}
.rg-lightbox__close {
  position: absolute; top: -44px; right: 0;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  background: var(--rc2-surf-el);
  border: 1px solid var(--rc2-hairline);
  border-radius: 8px;
  color: var(--rc2-body);
  cursor: pointer;
  transition: background .1s;
}
.rg-lightbox__close:hover { background: var(--rc2-surf-card); color: var(--rc2-ink); }
.rg-lightbox__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  background: var(--rc2-surf-el);
  border: 1px solid var(--rc2-hairline);
  border-radius: 8px;
  color: var(--rc2-body);
  cursor: pointer;
  transition: background .1s;
  z-index: 2;
}
.rg-lightbox__nav:hover { background: var(--rc2-surf-card); color: var(--rc2-ink); }
.rg-lightbox__nav--prev { left: -48px; }
.rg-lightbox__nav--next { right: -48px; }
.rg-lightbox__img-wrap {
  background: var(--rc2-surface);
  border: 1px solid var(--rc2-hairline);
  border-radius: 10px;
  overflow: hidden;
  width: 100%;
}
.rg-lightbox__img { width: 100%; height: auto; display: block; max-height: 70vh; object-fit: contain; }
.rg-lightbox__bar {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%;
  padding: 0 4px;
}
.rg-lightbox__counter {
  font-size: 12px; font-weight: 400;
  color: var(--rc2-mute); letter-spacing: 0.4px;
}
.rg-lightbox__bar-actions { display: flex; gap: 6px; }

/* ── Share sheet ─────────────────────────────────────────── */
.rg-share {
  position: fixed; inset: 0; z-index: 300;
  display: none; align-items: flex-end; justify-content: center;
}
.rg-share[aria-hidden="false"] { display: flex; }
.rg-share__backdrop {
  position: absolute; inset: 0;
  background: rgba(7,8,10,0.7);
}
.rg-share__sheet {
  position: relative; z-index: 1;
  background: var(--rc2-surface);
  border: 1px solid var(--rc2-hairline);
  border-bottom: none;
  border-radius: 10px 10px 0 0;
  padding: 16px;
  width: 100%; max-width: 420px;
  display: flex; flex-direction: column; gap: 8px;
}
.rg-share__handle {
  width: 32px; height: 3px;
  background: var(--rc2-hairline-str);
  border-radius: 2px;
  margin: 0 auto 8px;
}
.rg-share__label {
  font-size: 12px; font-weight: 500;
  color: var(--rc2-ash);
  text-transform: uppercase; letter-spacing: 0.4px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--rc2-hairline);
}
.rg-share__grid { display: flex; flex-direction: column; gap: 2px; }
.rg-share-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 10px;
  margin: 0 -2px;
  border-radius: 6px;
  background: transparent;
  border: none;
  color: var(--rc2-body);
  font-size: 14px; font-weight: 500;
  font-family: var(--rc-font);
  letter-spacing: 0.2px;
  cursor: pointer;
  text-align: left;
  transition: background .1s;
  justify-content: flex-start;
}
.rg-share-row:hover { background: var(--rc2-surf-el); color: var(--rc2-ink); }
.rg-share-row .rc-key { margin-left: auto; }
.rg-share-row__icon {
  width: 28px; height: 28px;
  background: var(--rc2-surf-el);
  border: 1px solid var(--rc2-hairline);
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  color: var(--rc2-body);
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 768px) {
  .rg-body { flex-direction: column; }
  .rg-sidebar {
    width: 100%; height: auto;
    position: static;
    border-right: none;
    border-bottom: 1px solid var(--rc2-hairline);
    padding: 16px;
  }
  .rg-main { padding: 20px 16px; gap: 28px; }
  .rg-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .rg-lightbox__nav--prev { left: 8px; }
  .rg-lightbox__nav--next { right: 8px; }
  .rg-keyhints { display: none; }
}