/* ============================================================
   Kitsune AI — Creator OS showcase (stan.store-style)
   Three cohesive product screens inside the device frame:
   01 Storefront · 02 Agentic inbox · 03 Earnings
   Features a real creator. Scales via container-query units (cqw).
   ============================================================ */

.device__screens { container-type: size; }

.scr {
  position: absolute; inset: 0; display: grid; grid-template-columns: 4.4cqw 1fr;
  background: #0a0c11; color: #fff; overflow: hidden;
  font-family: var(--font-sans);
  font-size: clamp(7px, 1.5cqw, 14px);
  --pad: 1.6cqw;
}
.scr * { box-sizing: border-box; }

/* sidebar */
.scr-side { background: #0c0f16; border-right: 1px solid #1a1d27; display: flex; flex-direction: column; align-items: center; gap: 1.4cqw; padding: 1.8cqw 0; }
.scr-side .sp { width: 2.2cqw; height: 2.2cqw; color: var(--kit-fox-500); }
.scr-ico { width: 2.4cqw; height: 2.4cqw; border-radius: 0.7cqw; display: grid; place-items: center; color: var(--kit-slate-500); }
.scr-ico.on { background: rgba(238,77,31,.14); color: var(--kit-fox-300); }
.scr-ico svg { width: 1.5cqw; height: 1.5cqw; }
.scr-side .grow { flex: 1; }
.scr-av { width: 2.4cqw; height: 2.4cqw; border-radius: 50%; object-fit: cover; border: 1px solid #2a2e38; }

/* main column */
.scr-main { display: flex; flex-direction: column; min-width: 0; }
.scr-top { display: flex; align-items: center; gap: 1cqw; padding: 1.5cqw var(--pad); border-bottom: 1px solid #161922; }
.scr-crumb { font-family: var(--font-mono); font-size: 0.92em; color: var(--kit-slate-500); letter-spacing: .04em; }
.scr-crumb b { color: #fff; font-weight: 600; }
.scr-chip { display: inline-flex; align-items: center; gap: 0.5cqw; font-family: var(--font-mono); font-size: 0.86em; letter-spacing: .04em; text-transform: uppercase; padding: 0.5cqw 0.9cqw; border-radius: 999px; border: 1px solid #232734; color: var(--kit-slate-300); }
.scr-chip .ld { width: 0.7cqw; height: 0.7cqw; border-radius: 50%; background: #2f8f5d; box-shadow: 0 0 0 0 rgba(47,143,93,.6); animation: scrlive 2s var(--ease-out) infinite; }
.scr-chip--fox { color: var(--kit-fox-300); border-color: rgba(238,77,31,.3); background: rgba(238,77,31,.08); }
.scr-chip--fox .ld { background: var(--kit-fox-500); box-shadow: 0 0 0 0 rgba(238,77,31,.6); }
@keyframes scrlive { 0% { box-shadow: 0 0 0 0 rgba(47,143,93,.5); } 70%,100% { box-shadow: 0 0 0 1.2cqw rgba(47,143,93,0); } }
.scr-spacer { flex: 1; }
.scr-body { flex: 1; padding: var(--pad); min-height: 0; position: relative; }

/* ---------- SCREEN 01 — Storefront ---------- */
.cr-store { display: grid; grid-template-columns: 1.02fr 1.18fr; gap: 1.3cqw; height: 100%; }
.cr-hero { position: relative; border-radius: 1.6cqw; overflow: hidden; border: 1px solid #232734; min-height: 0; }
.cr-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.cr-hero__grad { position: absolute; inset: 0; background: linear-gradient(to top, rgba(8,10,15,.94) 10%, rgba(8,10,15,.1) 52%, rgba(8,10,15,.35) 100%); }
.cr-badge { position: absolute; top: 1.1cqw; left: 1.1cqw; display: inline-flex; align-items: center; gap: 0.55cqw; font-family: var(--font-mono); font-size: 0.76em; letter-spacing: .04em; text-transform: uppercase; color: #fff; background: rgba(10,12,17,.55); backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,.12); padding: 0.5cqw 0.85cqw; border-radius: 999px; }
.cr-badge .sp { width: 1.2cqw; height: 1.2cqw; color: var(--kit-fox-300); }
.cr-hero__meta { position: absolute; left: 1.3cqw; right: 1.3cqw; bottom: 1.2cqw; }
.cr-hero__name { font-size: 1.75em; font-weight: 700; letter-spacing: -0.01em; line-height: 1.05; }
.cr-hero__handle { font-family: var(--font-mono); font-size: 0.88em; color: var(--kit-fox-300); margin-top: 0.3cqw; }
.cr-hero__bio { font-size: 0.92em; color: var(--kit-slate-200); margin-top: 0.7cqw; line-height: 1.35; }
.cr-hero__stats { display: flex; gap: 1.4cqw; margin-top: 1cqw; }
.cr-hero__stats div b { font-family: var(--font-display); font-size: 1.25em; letter-spacing: -0.01em; }
.cr-hero__stats div span { display: block; font-family: var(--font-mono); font-size: 0.74em; color: var(--kit-slate-400); text-transform: uppercase; letter-spacing: .04em; margin-top: 0.1cqw; }

.cr-right { display: flex; flex-direction: column; min-width: 0; }
.cr-right__h { font-family: var(--font-mono); font-size: 0.8em; letter-spacing: .12em; text-transform: uppercase; color: var(--kit-slate-500); margin-bottom: 0.9cqw; }
.cr-prods { display: flex; flex-direction: column; gap: 0.85cqw; flex: 1; }
.cr-prod { display: grid; grid-template-columns: 4cqw 1fr auto; align-items: center; gap: 1cqw; background: #11141c; border: 1px solid #1c202b; border-radius: 1.1cqw; padding: 0.85cqw; transition: border-color .3s; }
.cr-prod__th { width: 4cqw; height: 4cqw; border-radius: 0.9cqw; overflow: hidden; background: #1c2230; }
.cr-prod__th img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cr-prod__t { font-size: 1.02em; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cr-prod__m { font-family: var(--font-mono); font-size: 0.8em; color: var(--kit-slate-500); margin-top: 0.15cqw; }
.cr-prod__p { font-family: var(--font-display); font-size: 1.1em; }
.cr-sub { margin-top: 0.95cqw; display: flex; align-items: center; justify-content: center; gap: 0.6cqw; font-family: var(--font-mono); font-size: 0.86em; letter-spacing: .04em; text-transform: uppercase; color: #fff; background: var(--kit-fox-500); border-radius: 999px; padding: 0.85cqw; }

/* ---------- Creator profile header (screens 02 & 03) ---------- */
.cr-profile { display: flex; align-items: center; gap: 1cqw; padding-bottom: 1.1cqw; margin-bottom: 1.2cqw; border-bottom: 1px solid #161922; }
.cr-profile img { width: 3.8cqw; height: 3.8cqw; border-radius: 50%; object-fit: cover; object-position: 50% 28%; border: 1px solid #2a2e38; flex: none; }
.cr-profile b { font-size: 1.06em; font-weight: 600; display: block; letter-spacing: -0.01em; }
.cr-profile p { font-family: var(--font-mono); font-size: 0.8em; color: var(--kit-slate-500); margin-top: 0.15cqw; }
.cr-profile .cr-prof-tag { margin-left: auto; }

/* ---------- SCREEN 03 — live terminal (fits the device frame) ---------- */
.scr-body--term { padding: 1.8cqw 2cqw; overflow: hidden; }
.lc-body--device { font-family: var(--font-mono); font-size: 1.05em; line-height: 1.95; min-height: 0; padding: 0; color: var(--kit-slate-300); }
.lc-body--device .lc-row { display: flex; gap: 0.85em; white-space: pre; }
.lc-body--device .lc-row__p { flex: none; width: 1.1em; text-align: center; }
.lc-body--device .lc-cursor { display: inline-block; width: 0.55em; height: 1.05em; transform: translateY(0.16em); background: var(--kit-fox-500); }

.cr-inbox { display: flex; flex-direction: column; height: 100%; }
.cr-inbox__h { display: flex; align-items: center; gap: 1cqw; margin-bottom: 1cqw; }
.cr-inbox__h h4 { font-size: 1.15em; font-weight: 600; }
.cr-deals { display: flex; flex-direction: column; gap: 0.7cqw; }
.cr-deal { display: grid; grid-template-columns: 3.2cqw 1fr auto; align-items: center; gap: 1cqw; background: #11141c; border: 1px solid #1c202b; border-radius: 1cqw; padding: 0.85cqw 1.1cqw; }
.cr-deal__logo { width: 3.2cqw; height: 3.2cqw; border-radius: 0.8cqw; overflow: hidden; background: #1c2230; flex: none; }
.cr-deal__logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cr-deal__t { font-size: 1em; font-weight: 600; }
.cr-deal__m { font-family: var(--font-mono); font-size: 0.8em; color: var(--kit-slate-500); margin-top: 0.15cqw; display: flex; align-items: center; gap: 0.5cqw; }
.cr-dot { width: 0.7cqw; height: 0.7cqw; border-radius: 50%; flex: none; }
.cr-dot--ok { background: #2f8f5d; } .cr-dot--run { background: var(--kit-electric-500); } .cr-dot--wait { background: var(--kit-fox-500); }
.cr-deal__amt { font-family: var(--font-display); font-size: 1.05em; text-align: right; }
.cr-deal__amt span { display: block; font-family: var(--font-mono); font-size: 0.7em; color: var(--kit-slate-500); text-transform: uppercase; }
.pill-appr { display: inline-flex; align-items: center; gap: 0.5cqw; font-family: var(--font-mono); font-size: 0.8em; letter-spacing: .03em; text-transform: uppercase; color: #fff; background: var(--kit-fox-500); padding: 0.6cqw 1cqw; border-radius: 999px; }
.cr-agentline { margin-top: 1cqw; display: flex; align-items: center; gap: 0.8cqw; background: linear-gradient(180deg, rgba(35,55,241,.1), rgba(17,20,28,.4)); border: 1px solid #232a3d; border-radius: 1cqw; padding: 0.9cqw 1.1cqw; font-size: 0.92em; color: var(--kit-slate-200); }
.cr-agentline .sp { width: 1.6cqw; height: 1.6cqw; color: var(--kit-fox-300); flex: none; }
.cr-agentline b { color: #fff; font-weight: 600; }

/* ---------- SCREEN 03 — Earnings ---------- */
.cr-earn-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.85cqw; }
.tile { background: #11141c; border: 1px solid #1c202b; border-radius: 1cqw; padding: 0.9cqw 1cqw; }
.tile__l { font-family: var(--font-mono); font-size: 0.8em; letter-spacing: .04em; text-transform: uppercase; color: var(--kit-slate-500); }
.tile__v { font-family: var(--font-display); font-size: 1.85em; line-height: 1; margin-top: 0.35cqw; letter-spacing: -0.02em; }
.tile__d { font-family: var(--font-mono); font-size: 0.78em; color: #5fc48b; margin-top: 0.3cqw; }
.panel-chart { margin-top: 0.85cqw; background: #11141c; border: 1px solid #1c202b; border-radius: 1cqw; padding: 0.95cqw 1.1cqw; }
.panel-chart .ph { display: flex; align-items: center; gap: 0.8cqw; margin-bottom: 0.6cqw; }
.panel-chart .ph b { font-size: 1.02em; font-weight: 600; }
.chart { position: relative; width: 100%; height: 5.6cqw; }
.chart svg { width: 100%; height: 100%; overflow: visible; }
.cr-payouts { margin-top: 0.85cqw; display: flex; flex-direction: column; gap: 0.55cqw; }
.cr-payout { display: flex; align-items: center; gap: 0.9cqw; font-size: 0.92em; }
.cr-payout .ic { position: relative; width: 2.8cqw; height: 2.8cqw; border-radius: 0.7cqw; overflow: hidden; background: #1c2230; flex: none; }
.cr-payout .ic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cr-payout .ic .chk { position: absolute; right: -0.2cqw; bottom: -0.2cqw; width: 1.5cqw; height: 1.5cqw; border-radius: 50%; background: #2f8f5d; color: #fff; display: grid; place-items: center; border: 1.5px solid #0a0c11; }
.cr-payout .ic .chk svg { width: 0.85cqw; height: 0.85cqw; }
.cr-payout b { font-weight: 600; }
.cr-payout__amt { margin-left: auto; font-family: var(--font-display); font-size: 1.02em; }
.cr-payout__m { font-family: var(--font-mono); font-size: 0.78em; color: var(--kit-slate-500); }

@media (prefers-reduced-motion: reduce) {
  .scr-chip .ld { animation: none; }
}