/* ten — prototype gallery: coded phone-screen app mockups.
 *
 * Each template is its OWN design system — different type, color philosophy,
 * layout, and component treatment — so no two feel related. Design directions are
 * informed by (not copied from) distinct real-world systems catalogued on Refero
 * (void/violet, warm editorial, midnight precision, tactile playground, etc.).
 * Every screen is original work built to that aesthetic bar.
 *
 * Shared: only the phone shell (.pf) and the sizing system (cqw units so screens
 * stay crisp from thumbnail to full-screen). Everything inside is per-style.
 */

/* ---- the phone shell (the only shared chrome) ---- */
.pf {
  position: relative;
  width: 100%; aspect-ratio: 390 / 844;
  border-radius: 34px; padding: 7px;
  background: #08090B;
  box-shadow: 0 2px 3px rgba(17,18,19,0.06), 0 30px 60px -34px rgba(40,36,70,0.5), inset 0 0 0 1.5px rgba(255,255,255,0.05);
  overflow: hidden;
}
.pf-screen {
  position: relative; width: 100%; height: 100%;
  border-radius: 27px; overflow: hidden;
  display: flex; flex-direction: column;
  container-type: inline-size;
}
.pf-screen * { box-sizing: border-box; margin: 0; }

/* shared status bar (each style tints it via currentColor) */
.st { display: flex; align-items: center; justify-content: space-between; padding: 4.5cqw 6cqw 0; font-size: 3.4cqw; font-weight: 600; }
.st .d { display: flex; align-items: center; gap: 1.6cqw; }
.st .d svg { display: block; height: 3.2cqw; width: auto; }

/* shared body flex so screens fill the phone height */
.bd { flex: 1; display: flex; flex-direction: column; overflow: hidden; }

/* ============================================================ 1 · VOID
 * Dala-inspired: pure black, electric violet, no cards/borders — elements float
 * on the void. Ultra-light body, massive tight headlines. */
.s-void { background: #050506; color: #fff; font-family: 'Inter', sans-serif; }
.s-void .st { color: #7c7c86; }
.s-void .vpad { padding: 6cqw 7cqw; display: flex; flex-direction: column; flex: 1; gap: 6cqw; }
.s-void .vk { font-size: 3cqw; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: #6a6a76; }
.s-void .vbig { font-size: 20cqw; font-weight: 300; letter-spacing: -0.05em; line-height: 0.92; }
.s-void .vbig b { font-weight: 400; }
.s-void .vsub { font-size: 4cqw; font-weight: 200; color: #a8a8b0; line-height: 1.4; letter-spacing: -0.01em; }
.s-void .vrow { display: flex; justify-content: space-between; align-items: baseline; padding: 4cqw 0; border-bottom: 1px solid #17171b; }
.s-void .vrow .l { font-size: 4cqw; font-weight: 200; color: #c8c8d0; }
.s-void .vrow .r { font-size: 4.6cqw; font-weight: 400; }
.s-void .vpill { align-self: flex-start; padding: 3cqw 6cqw; border-radius: 999px; background: #8052ff; color: #fff; font-size: 3.6cqw; font-weight: 500; box-shadow: 0 0 12cqw -2cqw rgba(128,82,255,0.7); }
.s-void .vbig b { color: #8052ff; }  /* the .2 in the accent so the number itself carries the one color */
.s-void .vdot { color: #8052ff; }    /* one accent only — violet, not a second amber */

/* ============================================================ 2 · EGGSHELL
 * ElevenLabs-inspired: warm eggshell, black ink, whisper-light serif-ish display,
 * accent only inside the "product" panel. Editorial, calm, lots of air. */
.s-egg { background: #fdfcfc; color: #000; font-family: 'Inter', sans-serif; }
.s-egg .st { color: #a59f97; }
.s-egg .epad { padding: 6cqw 7cqw; display: flex; flex-direction: column; flex: 1; gap: 5cqw; }
.s-egg .ek { font-size: 3cqw; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: #a59f97; }
.s-egg .ebig { font-family: Charter, Georgia, serif; font-weight: 400; font-size: 9cqw; letter-spacing: -0.02em; line-height: 1.02; color: #000; }
.s-egg .ebody { font-size: 3.7cqw; color: #777169; line-height: 1.5; }
.s-egg .epanel { margin-top: auto; border-radius: 5cqw; overflow: hidden; background: #f5f3f1; padding: 5cqw; }
.s-egg .estat { font-family: Charter, Georgia, serif; font-size: 11cqw; font-weight: 400; letter-spacing: -0.03em; color: #0447ff; line-height: 1; }
.s-egg .ewave { display: flex; align-items: flex-end; gap: 2.2cqw; height: 19cqw; margin-top: 3cqw; }
.s-egg .ewave i { flex: 1; min-height: 14%; border-radius: 999px; background: linear-gradient(180deg, #0447ff 0%, #6a4bff 55%, #ff4704 100%); }
.s-egg .ehair { height: 1px; background: #ebe8e4; }
.s-egg .erow { display: flex; justify-content: space-between; align-items: center; padding: 3cqw 0; }
.s-egg .erow .l { font-size: 3.7cqw; color: #44403b; }
.s-egg .erow .r { font-size: 3.7cqw; font-weight: 600; }
.s-egg .epill { align-self: flex-start; padding: 3cqw 6cqw; border-radius: 999px; background: #000; color: #fff; font-size: 3.4cqw; font-weight: 500; }

/* ============================================================ 3 · MIDNIGHT
 * Linear-inspired: near-black carbon cards, hairline borders (no shadows), acid
 * accent, Inter medium max weight, tight 8px grid. Precision instrument. */
.s-mid { background: #08090a; color: #fff; font-family: 'Inter', sans-serif; }
.s-mid .st { color: #8a8f98; }
.s-mid .mpad { padding: 5cqw 5.5cqw; display: flex; flex-direction: column; flex: 1; gap: 3.5cqw; }
.s-mid .mtop { display: flex; align-items: center; gap: 2.6cqw; }
.s-mid .mmark { width: 8cqw; height: 8cqw; border-radius: 2.4cqw; background: #e4f222; }
.s-mid .mname { font-size: 4cqw; font-weight: 590; letter-spacing: -0.02em; }
.s-mid .mtag { margin-left: auto; font-size: 2.9cqw; font-weight: 510; color: #08090a; background: #e4f222; padding: 1.4cqw 3cqw; border-radius: 999px; }
.s-mid .mcard { background: #0f1011; border-radius: 3cqw; box-shadow: inset 0 0 0 1px #23252a; padding: 4cqw; }
.s-mid .mk { font-size: 2.9cqw; font-weight: 510; letter-spacing: 0.06em; text-transform: uppercase; color: #8a8f98; }
.s-mid .mv { font-size: 8cqw; font-weight: 510; letter-spacing: -0.03em; margin-top: 1.4cqw; }
.s-mid .mmeta { font-family: ui-monospace, monospace; font-size: 3cqw; color: #d0d6e0; }
.s-mid .mrow { display: flex; align-items: center; gap: 3cqw; padding: 2.6cqw 0; }
.s-mid .mrow + .mrow { border-top: 1px solid #1a1c1f; }
.s-mid .mrow .l { font-size: 3.5cqw; color: #d0d6e0; flex: 1; }
.s-mid .mrow .r { font-family: ui-monospace, monospace; font-size: 3.4cqw; color: #e4f222; }
.s-mid .mbar { height: 2cqw; border-radius: 999px; background: #1a1c1f; overflow: hidden; }
.s-mid .mbar > i { display: block; height: 100%; background: #e4f222; border-radius: 999px; }

/* ============================================================ 4 · PLAYGROUND
 * Duolingo-inspired: white paper, saturated green, thick 2px borders, tactile 3D
 * buttons (solid bottom shadow), rounded plump shapes, calm gray body. */
.s-play { background: #fff; color: #4b4b4b; font-family: 'Inter', sans-serif; }
.s-play .st { color: #afafaf; }
.s-play .ppad { padding: 5cqw 6cqw; display: flex; flex-direction: column; flex: 1; gap: 4cqw; }
.s-play .phi { font-size: 4.4cqw; font-weight: 800; color: #4b4b4b; }
.s-play .pbig { display: flex; flex-direction: column; align-items: center; gap: 2cqw; padding: 3cqw 0; }
/* honest conic-gradient progress ring (shows real % via --p), white inner mask */
.s-play .pring { width: 34cqw; height: 34cqw; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(#58cc02 var(--p, 68%), #e5e5e5 0); }
.s-play .pring::before { content: ""; grid-area: 1/1; width: 76%; height: 76%; border-radius: 50%; background: #fff; }
.s-play .pring b { grid-area: 1/1; z-index: 1; font-size: 9cqw; font-weight: 800; color: #58cc02; }
.s-play .pcard { border: 2px solid #e5e5e5; border-radius: 4cqw; padding: 4cqw; }
.s-play .prow { display: flex; align-items: center; gap: 3cqw; }
.s-play .pico { width: 11cqw; height: 11cqw; border-radius: 3cqw; display: grid; place-items: center; font-size: 5.5cqw; background: #ddf4c9; }
.s-play .prt { font-size: 3.9cqw; font-weight: 800; color: #4b4b4b; }
.s-play .prs { font-size: 3.2cqw; font-weight: 600; color: #afafaf; margin-top: 0.4cqw; }
.s-play .pbtn { text-align: center; padding: 3.6cqw; border-radius: 4cqw; font-size: 3.6cqw; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: #fff; background: #58cc02; box-shadow: 0 4cqw 0 #46a302; }
.s-play .pbtn2 { color: #1cb0f6; background: #fff; border: 2px solid #e5e5e5; box-shadow: 0 4cqw 0 #e5e5e5; }
.s-play .pgreen { color: #58cc02; }

/* ============================================================ 5 · PAPER
 * Warm serif-analytics (Steep/Notion-inspired): cream paper, charcoal serif
 * headings, understated data, thin rules. Quiet analyst's desk. */
.s-paper { background: #f7f4ee; color: #2e2a24; font-family: Charter, Georgia, serif; }
.s-paper .st { color: #a8a196; font-family: 'Inter', sans-serif; }
.s-paper .rpad { padding: 6cqw 6.5cqw; display: flex; flex-direction: column; flex: 1; gap: 4cqw; }
.s-paper .rk { font-family: 'Inter', sans-serif; font-size: 2.9cqw; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: #a8968a; }
.s-paper .rbig { font-size: 8cqw; font-weight: 500; letter-spacing: -0.01em; line-height: 1.05; }
.s-paper .rbig i { font-style: italic; }
.s-paper .rstat { font-size: 13cqw; font-weight: 500; letter-spacing: -0.03em; line-height: 1; }
.s-paper .rsub { font-family: 'Inter', sans-serif; font-size: 3.4cqw; color: #8a7d6f; line-height: 1.4; }
.s-paper .rrule { height: 1px; background: #ddd3c5; }
.s-paper .rrow { display: flex; justify-content: space-between; align-items: baseline; padding: 2.4cqw 0; }
.s-paper .rrow .l { font-size: 4cqw; color: #5c5449; }
.s-paper .rrow .r { font-size: 4.2cqw; font-weight: 500; }
.s-paper .rchart { display: flex; align-items: flex-end; gap: 1.8cqw; height: 20cqw; }
.s-paper .rchart i { flex: 1; background: #d9b8a4; border-radius: 1cqw 1cqw 0 0; }
.s-paper .rchart i:last-child { background: #c96f4c; }  /* current week in full terracotta, rest muted */
.s-paper .rtab { display: flex; gap: 5cqw; padding: 4cqw 6.5cqw calc(4cqw + env(safe-area-inset-bottom,0px)); border-top: 1px solid #ddd3c5; font-family: 'Inter', sans-serif; font-size: 3cqw; font-weight: 600; color: #a8968a; }
.s-paper .rtab .on { color: #2e2a24; }

/* ============================================================ 6 · BLUEPRINT
 * Brutalist/engineering (Visitors/Ui-inspired): stark white, mono type, thin
 * black rules, grid coordinates, everything labeled. Technical, deliberate. */
.s-blue { background: #fbfbf9; color: #111; font-family: ui-monospace, 'SF Mono', monospace; }
.s-blue .st { color: #999; }
.s-blue .bpad { padding: 5.5cqw 6cqw; display: flex; flex-direction: column; flex: 1; gap: 4cqw; }
.s-blue .bhead { display: flex; justify-content: space-between; font-size: 2.9cqw; letter-spacing: 0.04em; color: #666; text-transform: uppercase; padding-bottom: 3cqw; border-bottom: 1.5px solid #111; }
.s-blue .bbig { font-size: 11cqw; font-weight: 500; letter-spacing: -0.04em; line-height: 0.95; font-family: 'Inter', sans-serif; }
.s-blue .bunit { font-size: 3.4cqw; color: #666; }
.s-blue .bgrid { border: 1.5px solid #111; }
.s-blue .bcell { display: flex; justify-content: space-between; padding: 3.4cqw; font-size: 3.4cqw; }
.s-blue .bcell + .bcell { border-top: 1px solid #d8d8d2; }
.s-blue .bcell .k { color: #666; }
.s-blue .bcell .v { font-weight: 600; }
.s-blue .bplot { height: 22cqw; position: relative; border: 1.5px solid #111; }
.s-blue .bplot svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.s-blue .btag { display: inline-block; font-size: 2.8cqw; letter-spacing: 0.08em; text-transform: uppercase; color: #fbfbf9; background: #111; padding: 1.2cqw 3cqw; }

/* ============================================================ 7 · DUSK
 * Warm gradient wellness (soft, human): peach-to-lavender wash, rounded soft
 * cards, gentle sans, friendly. The opposite of the technical ones. */
.s-dusk { background: linear-gradient(170deg, #FBE9E1 0%, #F3E4F1 55%, #E8E7FA 100%); color: #4a3f52; font-family: 'Inter', sans-serif; }
.s-dusk .st { color: #a596a8; }
.s-dusk .dpad { padding: 6cqw 6cqw; display: flex; flex-direction: column; flex: 1; gap: 4cqw; }
.s-dusk .dgreet { font-size: 3.6cqw; color: #9a8a9e; }
.s-dusk .dbig { font-size: 7.4cqw; font-weight: 700; letter-spacing: -0.03em; line-height: 1.08; color: #3d3348; }
.s-dusk .dcard { background: rgba(255,255,255,0.62); backdrop-filter: blur(8px); border-radius: 6cqw; padding: 5cqw; box-shadow: 0 12cqw 30cqw -18cqw rgba(120,90,140,0.4); }
.s-dusk .dstat { font-size: 12cqw; font-weight: 700; letter-spacing: -0.03em; line-height: 1; background: linear-gradient(120deg, #E88A9E, #A98BE0); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.s-dusk .dk { font-size: 3cqw; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #a596a8; }
.s-dusk .drow { display: flex; align-items: center; gap: 3cqw; padding: 2.6cqw 0; }
.s-dusk .dico { width: 10cqw; height: 10cqw; border-radius: 50%; display: grid; place-items: center; font-size: 4.6cqw; background: linear-gradient(140deg, #F4C4C0, #D9B4EC); }
.s-dusk .drt { font-size: 3.7cqw; font-weight: 700; color: #4a3f52; }
.s-dusk .drs { font-size: 3.1cqw; color: #9a8a9e; }
.s-dusk .dbtn { text-align: center; padding: 4cqw; border-radius: 999px; font-size: 3.7cqw; font-weight: 600; color: #fff; background: linear-gradient(120deg, #E88A9E, #A98BE0); }

/* ============================================================ 8 · NEON
 * Server-room-after-dark (Neon/ORYZO-inspired): deep charcoal, electric cyan +
 * magenta glow, mono metadata, glowing accents. Techy, energetic dark. */
.s-neon { background: #0a0d12; color: #e6f0f5; font-family: 'Inter', sans-serif; }
.s-neon .st { color: #5f7484; }
.s-neon .npad { padding: 5.5cqw 6cqw; display: flex; flex-direction: column; flex: 1; gap: 4cqw; }
.s-neon .ntop { display: flex; align-items: center; gap: 2.6cqw; font-size: 3cqw; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: #4ee0d0; }
.s-neon .ntop i { width: 2.2cqw; height: 2.2cqw; border-radius: 50%; background: #4ee0d0; box-shadow: 0 0 3cqw #4ee0d0; }
.s-neon .nbig { font-size: 16cqw; font-weight: 700; letter-spacing: -0.04em; line-height: 0.95; text-shadow: 0 0 8cqw rgba(78,224,208,0.4); }
.s-neon .nbig .u { font-size: 5cqw; color: #5f7484; }
.s-neon .nsub { font-size: 3.5cqw; color: #8ba0ad; }
.s-neon .ncard { background: rgba(255,255,255,0.03); border: 1px solid rgba(78,224,208,0.2); border-radius: 3.4cqw; padding: 4cqw; }
.s-neon .nmeta { font-family: ui-monospace, monospace; font-size: 2.9cqw; color: #5f7484; letter-spacing: 0.04em; }
.s-neon .ntrace { width: 100%; height: 16cqw; display: block; filter: drop-shadow(0 0 1.6cqw rgba(78,224,208,0.6)); }
.s-neon .nrow { display: flex; align-items: center; justify-content: space-between; padding: 2.4cqw 0; }
.s-neon .nrow + .nrow { border-top: 1px solid rgba(95,116,132,0.2); }
.s-neon .nrow .l { font-size: 3.4cqw; color: #b8c8d0; }
.s-neon .nrow .r { font-family: ui-monospace, monospace; font-size: 3.3cqw; color: #f050a0; }

/* ============================================================ 9 · SOFT LIGHT
 * Apple-España-inspired: cathedral of white space, big light SF-style type,
 * one product image area, minimal chrome, generous. Premium, airy. */
.s-soft { background: #fff; color: #1d1d1f; font-family: 'Inter', sans-serif; }
.s-soft .st { color: #b0b0b5; }
.s-soft .fpad { padding: 7cqw 7cqw; display: flex; flex-direction: column; flex: 1; gap: 5cqw; }
.s-soft .fk { font-size: 3.2cqw; font-weight: 600; color: #f5623d; letter-spacing: 0.01em; }
.s-soft .fbig { font-size: 9cqw; font-weight: 600; letter-spacing: -0.035em; line-height: 1.04; color: #1d1d1f; }
.s-soft .fbody { font-size: 3.7cqw; color: #6e6e73; line-height: 1.45; }
.s-soft .fhero { margin-top: auto; border-radius: 6cqw; background: linear-gradient(160deg, #f2f2f5, #e6e6ea); box-shadow: inset 0 0 0 1px rgba(0,0,0,0.05); padding: 6cqw; display: flex; flex-direction: column; align-items: center; gap: 2cqw; }
.s-soft .fnum { font-size: 15cqw; font-weight: 600; letter-spacing: -0.04em; color: #f5623d; line-height: 1; }
.s-soft .fcap { font-size: 3.2cqw; color: #86868b; }
.s-soft .frow { display: flex; justify-content: space-between; align-items: center; padding: 3cqw 0; border-top: 1px solid #f0f0f2; }
.s-soft .frow .l { font-size: 3.6cqw; color: #1d1d1f; }
.s-soft .frow .r { font-size: 3.4cqw; color: #86868b; }
.s-soft .fpill { align-self: center; padding: 3cqw 7cqw; border-radius: 999px; background: #1d1d1f; color: #fff; font-size: 3.6cqw; font-weight: 500; }

/* =================================================== gallery presentation ==== */
/* horizontal-scroll rail of template cards */
.tpl-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.tpl-filter {
  appearance: none; cursor: pointer;
  font-family: var(--font-display); font-weight: 500; font-size: 0.84rem; color: var(--mute);
  padding: 8px 15px; border-radius: 999px; background: #FFFFFF; border: 1px solid var(--rule);
  transition: color 140ms var(--ease), background 140ms var(--ease), border-color 140ms var(--ease);
}
.tpl-filter:hover { border-color: #CFC9DE; color: var(--ink); }
.tpl-filter.is-on { color: #FFFFFF; background: var(--accent); border-color: var(--accent); }

/* the scroller */
.tpl-rail-wrap { position: relative; margin: 0 calc(-1 * clamp(24px, 4vw, 40px)); }
.tpl-rail {
  display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 6px clamp(24px, 4vw, 40px) 20px;
  -webkit-overflow-scrolling: touch; scrollbar-width: thin;
}
.tpl-rail::-webkit-scrollbar { height: 8px; }
.tpl-rail::-webkit-scrollbar-thumb { background: #D8D2EC; border-radius: 999px; }
.tpl-rail::-webkit-scrollbar-track { background: transparent; }
.tpl-hint { font-family: var(--font-display); font-size: 0.82rem; color: var(--mute); margin: 0 0 14px; display: inline-flex; align-items: center; gap: 8px; }
.tpl-hint .arw { color: var(--accent); }

.tpl-card {
  position: relative; cursor: pointer; flex: 0 0 auto; width: 220px; scroll-snap-align: start;
  border-radius: 20px; padding: 12px;
  background: #FFFFFF; border: 1.5px solid var(--rule);
  transition: transform 180ms var(--ease), box-shadow 180ms var(--ease), border-color 180ms var(--ease);
}
@media (max-width: 560px) { .tpl-card { width: 200px; } }
.tpl-card:hover { transform: translateY(-4px); box-shadow: 0 26px 46px -30px rgba(70,58,160,0.4); border-color: #E0DAF0; }
.tpl-card.is-picked { border-color: var(--accent); box-shadow: 0 22px 42px -26px rgba(106,83,206,0.5); }
.tpl-card .pf { pointer-events: none; }
.tpl-check {
  position: absolute; top: 18px; right: 18px; z-index: 3;
  width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent); color: #FFFFFF; opacity: 0; transform: scale(0.6);
  transition: opacity 160ms var(--ease), transform 160ms var(--ease);
  box-shadow: 0 4px 10px -3px rgba(106,83,206,0.6);
}
.tpl-check svg { width: 14px; height: 14px; }
.tpl-card.is-picked .tpl-check { opacity: 1; transform: scale(1); }
.tpl-meta { padding: 12px 6px 4px; }
.tpl-name { font-family: var(--font-display); font-weight: 600; font-size: 0.92rem; color: var(--ink); }
.tpl-blurb { font-family: var(--font-body); font-size: 0.82rem; line-height: 1.4; color: var(--mute); margin: 4px 0 0; }
.tpl-picked-count { font-family: var(--font-display); font-size: 0.86rem; color: var(--accent); font-weight: 500; margin: 18px 0 0; min-height: 1.2em; }

/* full-screen preview modal */
.tpl-modal { position: fixed; inset: 0; z-index: 90; display: none; }
.tpl-modal.is-open { display: block; }
.tpl-modal-back { position: absolute; inset: 0; background: rgba(20,18,30,0.72); backdrop-filter: blur(6px); }
.tpl-modal-panel { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(340px, 86vw); }
.tpl-modal-panel .pf { box-shadow: 0 40px 90px -30px rgba(0,0,0,0.6); }
.tpl-modal-cap { text-align: center; color: #FFFFFF; margin-top: 18px; }
.tpl-modal-cap .n { font-family: var(--font-serif); font-size: 1.2rem; }
.tpl-modal-cap .b { font-family: var(--font-body); font-size: 0.9rem; color: rgba(255,255,255,0.7); margin-top: 4px; }
.tpl-modal-pick { margin-top: 18px; display: flex; gap: 10px; justify-content: center; }
.tpl-modal-close { position: absolute; top: max(20px, env(safe-area-inset-top)); right: 22px; z-index: 3; appearance: none; background: rgba(255,255,255,0.14); border: 0; color: #fff; width: 40px; height: 40px; border-radius: 50%; font-size: 1.4rem; cursor: pointer; }