/* ============================================================
   RJ App Faces Gallery — shared styles
   Twenty apps. Each one has its own FRONT screen and its own
   set of INSIDE screens, built from components that belong to
   that app — a map canvas for Maps, a viewfinder for Camera,
   a vinyl for Podcast, a month grid for Calendar, and so on.
   Nothing is shared between apps but the bezel and status bar.
   Loaded after ../css/site.css (soft-UI tokens + nav + footer).
   ============================================================ */

/* ============================================================
   DEVICE — bezel, screen, status bar, home bar
   ============================================================ */
.app{margin:0;--bz1:#eef2f7;--bz2:#c9d1de;cursor:pointer}
.app[data-dark] .device,.device[data-dark]{--bz1:#3b4353;--bz2:#1a1f28}
.device{position:relative;width:100%;aspect-ratio:9/19.2;border-radius:40px;padding:10px;
  background:linear-gradient(150deg,var(--bz1),var(--bz2));
  box-shadow:0 24px 42px -20px rgba(42,52,68,.5),0 3px 8px -3px rgba(42,52,68,.3);
  transition:transform .3s var(--ease)}
.app:hover .device,.app:focus-visible .device{transform:translateY(-8px)}
.app:focus-visible{outline:2px solid var(--mint-ink);outline-offset:6px;border-radius:40px}
.device::before,.device::after{content:"";position:absolute;left:-2.5px;width:3px;border-radius:3px;background:rgba(0,0,0,.2)}
.device::before{top:15%;height:7%;box-shadow:0 9px 0 rgba(0,0,0,.16)}
.device::after{top:27%;height:13%;left:auto;right:-2.5px}
.scr{position:relative;height:100%;border-radius:31px;overflow:hidden;display:flex;flex-direction:column;
  background:var(--bg,#fff);color:var(--fg,#111);font-family:var(--ff,var(--font-body))}
.scr svg{width:13px;height:13px;flex:none}
.notch{position:absolute;top:8px;left:50%;transform:translateX(-50%);width:54px;height:14px;border-radius:999px;background:#0e1219;z-index:9}
.st{flex:none;position:relative;z-index:8;display:flex;justify-content:space-between;align-items:center;padding:13px 15px 3px;font-size:8.5px;font-weight:700;letter-spacing:.05em;opacity:.9}
.st .r{display:inline-flex;gap:5px;align-items:center}
.st .sig{display:inline-flex;align-items:flex-end;gap:2.5px}
.st .sig i{display:block;width:3px;border-radius:1px;background:currentColor;opacity:.9}
.st .sig i:nth-child(1){height:3.5px}.st .sig i:nth-child(2){height:5.5px}.st .sig i:nth-child(3){height:7.5px}
.st .bat{position:relative;width:13px;height:7.5px;border-radius:2.5px;box-shadow:inset 0 0 0 1.2px currentColor;opacity:.9}
.st .bat::after{content:"";position:absolute;inset:1.2px 3.8px 1.2px 1.2px;border-radius:1px;background:currentColor}
.bd{flex:1;min-height:0;overflow:hidden;display:flex;flex-direction:column;gap:8px;padding:8px 14px}
.hb{flex:none;width:34%;height:4px;border-radius:999px;background:currentColor;opacity:.3;margin:5px auto 7px}
.sp{flex:1;min-height:0}

/* ---------- shared atoms (restyled per app by the tokens) ---------- */
.ttl{font-family:var(--hf,var(--font-display));font-size:15px;font-weight:800;letter-spacing:-.02em;line-height:1.15}
.sub{font-size:7px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--mut)}
.hd{display:flex;align-items:center;justify-content:space-between;gap:8px}
.hd .ttl{display:block}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:5px;font-size:8.5px;font-weight:800;
  letter-spacing:.04em;padding:8px 14px;border-radius:var(--rad,12px);border:1px solid transparent;white-space:nowrap}
.btn svg{width:12px;height:12px}
.btn.p{background:linear-gradient(145deg,var(--ac),var(--ac2));color:var(--onac);border:var(--bbord,1px solid transparent);box-shadow:var(--bsh,none)}
.btn.o{background:transparent;color:var(--fg);border:1px solid var(--line)}
.btns{display:flex;gap:7px;flex-wrap:wrap;flex:none}
.av{flex:none;width:24px;height:24px;border-radius:50%;background:linear-gradient(145deg,var(--ac),var(--ac2))}
.tnav{flex:none;display:flex;justify-content:space-around;align-items:center;padding:8px 7px 6px;border-top:1px solid var(--line)}
.tni{flex:1;min-width:0;text-align:center;font-size:6.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--mut);padding:5px 4px;border-radius:var(--rad,8px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tni.on{color:var(--onac);background:linear-gradient(145deg,var(--ac),var(--ac2))}
.live .tni{cursor:pointer}
.live .tni:hover{color:var(--fg)}

/* ---------- caption ---------- */
.app .cap{display:flex;align-items:center;gap:10px;margin-top:15px;padding:0 3px}
.app .cap .n{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  font-family:var(--font-display);font-size:11px;font-weight:800;color:#fff;background:linear-gradient(145deg,#59637a,#2c3444)}
.app .cap b{display:block;font-family:var(--font-display);font-size:13.5px;letter-spacing:-.01em}
.app .cap small{display:block;font-size:10.5px;font-weight:600;color:var(--muted)}

/* ============================================================
   per-app themes
   ============================================================ */
[data-app="wallet"]{--bg:radial-gradient(120% 62% at 88% 0%,#1d7f68 0%,rgba(29,127,104,0) 56%),linear-gradient(168deg,#0d1522,#131d2e 58%,#0a111c);--fg:#e9effb;--mut:#8fa0bb;--ac:#48e0a8;--ac2:#12a37a;--onac:#04160f;--line:rgba(255,255,255,.14);--rad:14px}
[data-app="music"]{--bg:linear-gradient(170deg,#1d0b33,#2b1050 52%,#120622);--fg:#f3e9ff;--mut:#b98cf0;--ac:#ff4fd8;--ac2:#22d3ee;--onac:#1a0a30;--line:rgba(255,255,255,.16);--rad:12px;--bsh:0 0 16px rgba(255,79,216,.5)}
[data-app="fitness"]{--bg:linear-gradient(160deg,#f4f2ec,#eceae2);--fg:#0d0d0d;--mut:#6f6b60;--ac:#ff5a1f;--ac2:#ff7a3d;--onac:#fff;--line:#0d0d0d;--rad:0px;--bbord:2px solid #0d0d0d;--bsh:3px 3px 0 #0d0d0d;--ff:ui-monospace,"SF Mono",Menlo,monospace;--hf:ui-monospace,"SF Mono",Menlo,monospace}
[data-app="food"]{--bg:linear-gradient(170deg,#fff8f0,#ffeede);--fg:#3d2416;--mut:#a97a52;--ac:#ff7a1a;--ac2:#ffb35c;--onac:#fff;--line:#ffe0c6;--rad:14px;--bsh:0 8px 16px -9px rgba(255,122,26,.9)}
[data-app="messages"]{--bg:linear-gradient(165deg,#f2f7fd,#e6edf8);--fg:#0f172a;--mut:#8b95a7;--ac:#0b84ff;--ac2:#4aa3ff;--onac:#fff;--line:#dde5f0;--rad:14px;--bsh:0 6px 14px -8px rgba(11,132,255,.9)}
[data-app="weather"]{--bg:linear-gradient(178deg,#2f9bff 0%,#63bdff 40%,#ffd48c 76%,#ff9a63 100%);--fg:#fff;--mut:rgba(255,255,255,.85);--ac:rgba(255,255,255,.94);--ac2:rgba(255,255,255,.62);--onac:#1b4f7c;--line:rgba(255,255,255,.4);--rad:15px}
[data-app="travel"]{--bg:#fbfaf6;--fg:#191919;--mut:#8c8578;--ac:#191919;--ac2:#3f3b33;--onac:#fbfaf6;--line:#e4e0d6;--rad:0px;--ff:Georgia,"Times New Roman",serif;--hf:Georgia,"Times New Roman",serif}
[data-app="shop"]{--bg:#fff;--fg:#0a0a0a;--mut:#8a8a8a;--ac:#0a0a0a;--ac2:#333;--onac:#fff;--line:#ededed;--rad:2px}
[data-app="crypto"]{--bg:#070d09;--fg:#7ff0a8;--mut:#3f7f5c;--ac:#4ade80;--ac2:#16a34a;--onac:#04150b;--line:#1d4a33;--rad:4px;--ff:ui-monospace,"SF Mono",Menlo,monospace;--hf:ui-monospace,"SF Mono",Menlo,monospace}
[data-app="meditation"]{--bg:linear-gradient(165deg,#f3e8ff 0%,#e9f0ff 48%,#ffe9f1 100%);--fg:#3b3355;--mut:#8b83a8;--ac:#8b5cf6;--ac2:#b79cff;--onac:#fff;--line:rgba(120,90,200,.24);--rad:999px;--bsh:0 10px 20px -12px rgba(139,92,246,.95)}
[data-app="podcast"]{--bg:linear-gradient(170deg,#2a1113,#3a1a18 60%,#200c0e);--fg:#f7e8d6;--mut:#c98f5a;--ac:#e8a33d;--ac2:#c9761f;--onac:#2a1113;--line:rgba(247,232,214,.22);--rad:8px;--hf:Georgia,"Times New Roman",serif}
[data-app="maps"]{--bg:#eef1e9;--fg:#232a23;--mut:#6d746e;--ac:#1a73e8;--ac2:#4a9bff;--onac:#fff;--line:#d3dbd0;--rad:12px;--bsh:0 10px 20px -12px rgba(26,115,232,.95)}
[data-app="calendar"]{--bg:#fdfcf7;--fg:#1b222c;--mut:#9a9384;--ac:#d64533;--ac2:#e2685a;--onac:#fff;--line:#e7e2d6;--rad:6px;--hf:Georgia,"Times New Roman",serif}
[data-app="camera"]{--bg:#05070a;--fg:#fff;--mut:rgba(255,255,255,.62);--ac:#ffd60a;--ac2:#ffb800;--onac:#1a1400;--line:rgba(255,255,255,.24);--rad:2px;--ff:ui-monospace,"SF Mono",Menlo,monospace;--hf:ui-monospace,"SF Mono",Menlo,monospace}
[data-app="health"]{--bg:linear-gradient(170deg,#f7fafd,#eef4fa);--fg:#0f172a;--mut:#7b8b9e;--ac:#0ea5a0;--ac2:#38bdb8;--onac:#fff;--line:#e1e9f2;--rad:10px}
[data-app="social"]{--bg:#fff;--fg:#0f172a;--mut:#8b95a7;--ac:#ee2a7b;--ac2:#f9ce34;--onac:#fff;--line:#f0f0f0;--rad:12px;--bsh:0 8px 16px -10px rgba(238,42,123,.9)}
[data-app="notes"]{--bg:#fffbe8;--fg:#3a3320;--mut:#a08f5e;--ac:#8a7b4e;--ac2:#a8935f;--onac:#fffbe8;--line:rgba(140,120,70,.34);--rad:4px;--hf:Georgia,"Times New Roman",serif}
[data-app="ride"]{--bg:#cfd6d2;--fg:#0d1b2a;--mut:#5d6b74;--ac:#ffcc00;--ac2:#ff9f1c;--onac:#0d1b2a;--line:#c3ccc9;--rad:12px;--bsh:0 10px 18px -12px rgba(13,27,42,.9)}
[data-app="coffee"]{--bg:linear-gradient(170deg,#f5e9d6,#efdfc6);--fg:#3a2a1c;--mut:#8b6f4e;--ac:#5c4028;--ac2:#8a5c30;--onac:#f7ead8;--line:rgba(140,110,70,.34);--rad:10px;--hf:Georgia,"Times New Roman",serif}
[data-app="analytics"]{--bg:linear-gradient(170deg,#12171e,#0d1117);--fg:#e7eef7;--mut:#6c7c92;--ac:#3f7fd6;--ac2:#5aa2ff;--onac:#fff;--line:#202832;--rad:10px}

/* ============================================================
   01 · WALLET — dark glass banking
   ============================================================ */
[data-app="wallet"] .bd{padding:10px 14px}
[data-app="wallet"] .hd b{display:block;font-size:11.5px}
[data-app="wallet"] .hd span{display:block;font-size:7px;letter-spacing:.12em;text-transform:uppercase;color:var(--mut);font-weight:700;margin-top:2px}
[data-app="wallet"] .hd .av{width:26px;height:26px}
.wl-card{position:relative;border-radius:18px;padding:13px;display:grid;gap:7px;flex:none;
  background:linear-gradient(140deg,rgba(72,224,168,.18),rgba(255,255,255,.06));border:1px solid var(--line)}
.wl-chip{width:30px;height:21px;border-radius:5px;background:linear-gradient(145deg,#ffd97a,#d99b2b)}
.wl-card b{font-family:var(--font-display);font-size:23px;font-weight:800;letter-spacing:-.03em;color:#fff}
.wl-card b i{font-size:12px;font-style:normal;color:var(--mut)}
.wl-tag{justify-self:start;font-size:7px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding:4px 9px;border-radius:999px;background:rgba(72,224,168,.18);color:#5ce6b0}
.wl-acts{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;flex:none}
.wl-acts span{display:grid;place-items:center;gap:4px;padding:8px 2px;border-radius:13px;font-size:6.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--mut);background:rgba(255,255,255,.06);border:1px solid var(--line)}
.wl-acts svg{width:13px;height:13px;color:var(--ac)}
.wl-row{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:13px;background:rgba(255,255,255,.05);border:1px solid var(--line)}
.wl-ic{flex:none;width:22px;height:22px;border-radius:8px;background:linear-gradient(145deg,#48e0a8,#12a37a)}
.wl-ic.p{background:linear-gradient(145deg,#8b93f8,#5b63d3)}
.wl-row .g{flex:1;display:grid;gap:3px;min-width:0}
.wl-row .g b{font-size:9px;font-weight:700;display:block}
.wl-row .g span{font-size:7px;color:var(--mut)}
.wl-row em{font-style:normal;font-family:ui-monospace,Menlo,monospace;font-size:9px;color:var(--mut)}
.wl-row em.in{color:#5ce6b0}
.wl-stack{display:grid;flex:none}
.wl-mini{height:38px;border-radius:12px;border:1px solid var(--line);position:relative}
.wl-mini+.wl-mini{margin-top:-22px}
.wl-mini.c1{background:linear-gradient(140deg,#1b5f4c,#0f3a2f);z-index:3}
.wl-mini.c2{background:linear-gradient(140deg,#3b3f7a,#232654);z-index:2;transform:scale(.96)}
.wl-mini.c3{background:linear-gradient(140deg,#2b3446,#1a212e);z-index:1;transform:scale(.92)}
.wl-mini b{position:absolute;left:11px;bottom:7px;font-size:7.5px;letter-spacing:.1em;text-transform:uppercase;opacity:.75}

/* ============================================================
   02 · MUSIC — neon synthwave
   ============================================================ */
[data-app="music"] .bd{padding:9px 14px}
.mu-art{position:relative;width:100%;aspect-ratio:1/.82;border-radius:16px;overflow:hidden;flex:none;
  background:linear-gradient(135deg,#ff4fd8,#8b5cf6 48%,#22d3ee);box-shadow:0 0 26px rgba(255,79,216,.45)}
.mu-art::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(115deg,rgba(255,255,255,.18) 0 2px,transparent 2px 9px)}
.mu-art i{position:absolute;left:50%;top:50%;width:36%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(circle,#1a0a30 0 44%,transparent 45%);box-shadow:0 0 0 2px rgba(255,255,255,.55)}
.mu-wave{display:flex;align-items:center;gap:3px;height:22px;flex:none}
.mu-wave i{flex:1;border-radius:2px;background:linear-gradient(180deg,#22d3ee,#ff4fd8);opacity:.85}
.mu-prog{position:relative;height:4px;border-radius:999px;background:rgba(255,255,255,.16);flex:none}
.mu-prog i{position:absolute;left:0;top:0;height:100%;width:46%;border-radius:999px;background:linear-gradient(90deg,#22d3ee,#ff4fd8)}
.mu-ctrl{display:flex;align-items:center;justify-content:center;gap:20px;flex:none}
.mu-ctrl svg{width:16px;height:16px;color:#c9b3ea}
.mu-play{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(145deg,#22d3ee,#ff4fd8);box-shadow:0 0 22px rgba(255,79,216,.6)}
.mu-play svg{width:15px;height:15px;color:#150726}
.mu-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.mu-tile{display:grid;gap:5px}
.mu-tile .im{aspect-ratio:1;border-radius:11px;box-shadow:var(--bsh)}
.mu-tile b{font-size:9px;font-weight:700}
.mu-tile span{font-size:7px;color:var(--mut)}

/* ============================================================
   03 · FITNESS — brutalist
   ============================================================ */
[data-app="fitness"] .scr{border-radius:26px}
[data-app="fitness"] .bd{padding:10px 13px}
.ft-kick{font-size:7.5px;font-weight:800;letter-spacing:.3em;text-transform:uppercase}
.ft-huge{font-size:44px;font-weight:800;line-height:.86;letter-spacing:-.06em}
.ft-slab{background:#0d0d0d;color:#f4f2ec;padding:7px 10px;font-size:7.5px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;display:flex;justify-content:space-between;flex:none}
.ft-box{border:2px solid #0d0d0d;box-shadow:3px 3px 0 #0d0d0d;background:#fff;padding:8px;display:grid;gap:3px}
.ft-box b{font-size:15px;font-weight:800;line-height:1}
.ft-box span{font-size:6.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.ft-bars{display:flex;align-items:flex-end;gap:5px;height:46px;border-bottom:2px solid #0d0d0d;flex:none}
.ft-bars i{flex:1;background:#0d0d0d}
.ft-bars i.o{background:#ff5a1f}
.ft-card{border:2px solid #0d0d0d;box-shadow:3px 3px 0 #0d0d0d;background:#fff;padding:9px;display:flex;align-items:center;justify-content:space-between}
.ft-card b{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;display:block}
.ft-card span{font-size:7px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#6f6b60}

/* ============================================================
   04 · FOOD DELIVERY — warm playful
   ============================================================ */
[data-app="food"] .bd{padding:10px 13px}
.fo-top b{display:block;font-size:12px;font-family:var(--font-display)}
.fo-top span{display:block;font-size:7.5px;color:var(--mut);font-weight:700;margin-top:2px}
.fo-pin{width:26px;height:26px;border-radius:50%;background:linear-gradient(145deg,#ffb35c,#ff7a1a);flex:none}
.fo-search{display:flex;align-items:center;gap:7px;background:#fff;border-radius:999px;padding:9px 13px;flex:none;box-shadow:0 8px 18px -10px rgba(255,122,26,.6)}
.fo-search svg{width:13px;height:13px;color:#ff7a1a}
.fo-search i{flex:1;height:7px;border-radius:999px;background:#ffe6cf}
.fo-cats{display:flex;gap:6px;flex-wrap:wrap;flex:none}
.fo-cats span{font-size:7.5px;font-weight:800;padding:6px 10px;border-radius:999px;background:#fff;color:var(--mut);box-shadow:0 5px 12px -7px rgba(180,110,60,.8);white-space:nowrap}
.fo-cats span.on{background:linear-gradient(145deg,#ffb35c,#ff7a1a);color:#fff}
.fo-g2{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.fo-card{background:#fff;border-radius:16px;padding:8px;display:grid;gap:5px;box-shadow:0 10px 20px -14px rgba(150,90,40,.8)}
.fo-thumb{aspect-ratio:16/10;border-radius:11px}
.fo-card b{font-size:9.5px}
.fo-card span{font-size:7.5px;color:var(--mut);font-weight:700}
.fo-st{display:flex;align-items:center;gap:8px;background:#fff;border-radius:14px;padding:9px;box-shadow:0 8px 16px -12px rgba(150,90,40,.9)}
.fo-st .g{flex:1;min-width:0}
.fo-st b{display:block;font-size:9.5px}
.fo-st span{display:block;font-size:7px;color:var(--mut);font-weight:700}

/* ============================================================
   05 · MESSAGES — clean light chat
   ============================================================ */
[data-app="messages"] .bd{padding:0;gap:0}
.ms-top{display:flex;align-items:center;gap:8px;padding:6px 14px 10px;border-bottom:1px solid var(--line);flex:none}
.ms-top .ttl{font-size:15px;flex:1}
.ms-row{display:flex;align-items:center;gap:9px;padding:9px 14px;border-bottom:1px solid var(--line)}
.ms-row .av{width:28px;height:28px}
.ms-row .g{flex:1;min-width:0}
.ms-row b{display:block;font-size:9.5px;font-weight:700}
.ms-row span{display:block;font-size:7.5px;color:var(--mut);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ms-row em{font-style:normal;font-size:7px;color:var(--mut);font-weight:700}
.ms-badge{flex:none;min-width:15px;height:15px;border-radius:999px;background:#0b84ff;color:#fff;font-size:7px;font-weight:800;display:grid;place-items:center;padding:0 4px}
.ms-thread{flex:1;min-height:0;display:flex;flex-direction:column;gap:6px;padding:10px 13px}
.ms-bub{max-width:78%;padding:7px 11px;border-radius:16px;font-size:9.5px;line-height:1.35;font-weight:500}
.ms-bub.in{background:#fff;border-bottom-left-radius:5px;align-self:flex-start;box-shadow:0 1px 2px rgba(15,23,42,.06)}
.ms-bub.out{background:#0b84ff;color:#fff;border-bottom-right-radius:5px;align-self:flex-end}
.ms-composer{display:flex;align-items:center;gap:8px;padding:9px 13px 4px;border-top:1px solid var(--line);background:#fff;flex:none}
.ms-composer .f{flex:1;height:30px;border-radius:999px;border:1px solid var(--line);display:flex;align-items:center;padding:0 12px;font-size:8.5px;color:var(--mut)}
.ms-snd{width:30px;height:30px;border-radius:50%;background:#0b84ff;display:grid;place-items:center;color:#fff;flex:none}
.ms-snd svg{width:13px;height:13px}

/* ============================================================
   06 · WEATHER — sky gradient
   ============================================================ */
[data-app="weather"] .bd{padding:6px 15px}
.we-big{text-align:center;font-family:var(--font-display);font-size:58px;font-weight:700;line-height:1;letter-spacing:-.06em;text-shadow:0 8px 24px rgba(0,60,120,.28)}
.we-city{text-align:center}
.we-city b{font-size:13px;font-family:var(--font-display)}
.we-city span{display:block;font-size:7.5px;opacity:.85;font-weight:600;margin-top:1px}
.we-sun{position:relative;width:52px;height:52px;margin:0 auto;flex:none}
.we-sun i{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff6cf,#ffd15c);box-shadow:0 0 24px rgba(255,224,130,.9)}
.we-sun b{position:absolute;left:20px;top:24px;width:34px;height:20px;border-radius:999px;background:rgba(255,255,255,.94)}
.we-hrs{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;background:rgba(255,255,255,.18);border:1px solid var(--line);border-radius:15px;padding:8px 6px;flex:none}
.we-hrs div{text-align:center;font-size:8.5px;font-weight:700}
.we-hrs div span{display:block;font-size:6.5px;font-weight:800;letter-spacing:.08em;opacity:.85;margin-bottom:3px}
.we-row{display:flex;align-items:center;gap:8px;font-size:8.5px;font-weight:700;padding:6px 0;border-bottom:1px solid var(--line)}
.we-row span:first-child{width:26px}
.we-row i{flex:1;height:4px;border-radius:999px;background:rgba(255,255,255,.5)}

/* ============================================================
   07 · TRAVEL — editorial serif
   ============================================================ */
[data-app="travel"] .bd{padding:9px 14px}
.tr-mast{display:flex;justify-content:space-between;align-items:baseline;border-bottom:1px solid var(--line);padding-bottom:6px;flex:none}
.tr-mast b{font-size:12px;letter-spacing:.26em;text-transform:uppercase;font-weight:400}
.tr-mast span{font-size:7px;letter-spacing:.18em;text-transform:uppercase;color:var(--mut)}
.tr-hero{position:relative;aspect-ratio:4/3;overflow:hidden;background:linear-gradient(160deg,#cfdcc6,#7f9a86 52%,#3d5047);flex:none}
.tr-hero span{position:absolute;left:10px;bottom:8px;color:#fff;font-size:16px}
.tr-hero b{position:absolute;left:10px;top:9px;color:#fff;font-size:7px;letter-spacing:.24em;text-transform:uppercase;font-weight:400}
.tr-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.tr-strip figure{margin:0;display:grid;gap:4px}
.tr-strip .im{aspect-ratio:3/4}
.tr-strip figcaption{font-size:6.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mut);text-align:center}
.tr-res{display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding:8px 0;border-bottom:1px solid var(--line)}
.tr-res b{font-size:10.5px;font-weight:400}
.tr-res em{font-style:normal;font-size:9px;letter-spacing:.06em}
.tr-trip{border:1px solid var(--line);padding:9px;display:grid;gap:4px}
.tr-trip b{font-size:11px;font-weight:400}
.tr-trip span{font-size:7px;letter-spacing:.18em;text-transform:uppercase;color:var(--mut)}

/* ============================================================
   08 · SHOP — minimal monochrome
   ============================================================ */
[data-app="shop"] .bd{padding:9px 14px}
.sh-top{display:flex;justify-content:space-between;align-items:center;font-size:8.5px;letter-spacing:.36em;text-transform:uppercase;font-weight:600;border-bottom:1px solid var(--line);padding-bottom:7px;flex:none}
.sh-top svg{width:13px;height:13px}
.sh-big{position:relative;aspect-ratio:1/.8;background:#f4f4f4;overflow:hidden;flex:none}
.sh-big i{position:absolute;left:50%;top:50%;width:54%;height:42%;transform:translate(-50%,-50%);background:linear-gradient(145deg,#dedede,#b6b6b6)}
.sh-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.sh-grid figure{margin:0;display:grid;gap:5px}
.sh-grid .im{position:relative;aspect-ratio:1;background:#f4f4f4}
.sh-grid .im i{position:absolute;inset:27%;background:#c9c9c9}
.sh-grid figcaption{font-size:6.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
.sh-sizes{display:flex;gap:6px}
.sh-sizes span{font-size:8px;font-weight:600;border:1px solid var(--line);padding:6px 11px;min-width:26px;text-align:center}
.sh-sizes span.on{background:#0a0a0a;color:#fff;border-color:#0a0a0a}
.sh-line{display:flex;justify-content:space-between;font-size:8.5px;padding:7px 0;border-bottom:1px solid var(--line)}
.sh-line em{font-style:normal;font-family:ui-monospace,Menlo,monospace}

/* ============================================================
   09 · CRYPTO — terminal
   ============================================================ */
[data-app="crypto"] .bd{padding:9px 13px}
.cr-head{display:flex;justify-content:space-between;font-size:7px;letter-spacing:.2em;text-transform:uppercase;flex:none}
.cr-worth{border:1px solid var(--line);border-radius:4px;padding:11px;background:linear-gradient(180deg,rgba(20,60,40,.5),rgba(10,30,20,.25));flex:none}
.cr-worth span{display:block;font-size:7px;letter-spacing:.18em;text-transform:uppercase}
.cr-worth b{display:block;font-size:23px;font-weight:700;letter-spacing:-.02em;color:#a6ffcb;margin-top:4px}
.cr-worth i{font-style:normal;font-size:8.5px;color:#4ade80}
.cr-cs{display:flex;align-items:center;gap:4px;height:48px;border-bottom:1px solid var(--line);padding-bottom:2px;flex:none}
.cr-cs i{flex:1;background:#4ade80;border-radius:1px}
.cr-cs i.dn{background:#f87171}
.cr-row{display:flex;justify-content:space-between;gap:6px;font-size:8.5px}
.cr-row .up{color:#4ade80}
.cr-row .dn{color:#f87171}
.cr-row span{color:#3f7f5c}
.cr-seg{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line);border-radius:4px;overflow:hidden}
.cr-seg span{text-align:center;font-size:7.5px;font-weight:700;padding:7px 0;letter-spacing:.08em}
.cr-seg span.on{background:#16a34a;color:#04150b}

/* ============================================================
   10 · MEDITATION — pastel calm
   ============================================================ */
[data-app="meditation"] .bd{padding:8px 14px;position:relative}
.md-blob{position:absolute;border-radius:50%;filter:blur(16px);opacity:.75}
.md-ring{position:relative;z-index:1;width:126px;height:126px;margin:2px auto 0;border-radius:50%;display:grid;place-items:center;flex:none;
  background:conic-gradient(#c4a9ff 0 68%,rgba(255,255,255,.75) 68% 100%);box-shadow:0 18px 34px -18px rgba(120,90,200,.75)}
.md-ring::after{content:"";position:absolute;inset:13px;border-radius:50%;background:rgba(255,255,255,.75)}
.md-ring b{position:relative;z-index:1;font-family:var(--font-display);font-size:21px;font-weight:700;letter-spacing:-.03em}
.md-mid{text-align:center;position:relative;z-index:1}
.md-mid b{font-size:11px;display:block}
.md-mid span{font-size:7.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--mut);font-weight:700}
.md-card{border:1px solid var(--line);border-radius:16px;padding:9px;background:rgba(255,255,255,.6);display:flex;align-items:center;gap:9px}
.md-card .im{width:34px;height:34px;border-radius:12px;flex:none;background:linear-gradient(145deg,#c4a9ff,#8b5cf6)}
.md-card b{display:block;font-size:9.5px}
.md-card span{display:block;font-size:7px;color:var(--mut);font-weight:700}
.md-dots{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.md-dots i{aspect-ratio:1;border-radius:50%;background:rgba(255,255,255,.7);box-shadow:inset 0 0 0 1px var(--line)}
.md-dots i.on{background:linear-gradient(145deg,#b79cff,#8b5cf6)}

/* ============================================================
   11 · PODCAST — retro warm
   ============================================================ */
[data-app="podcast"] .bd{padding:9px 14px}
.pd-kick{font-size:7px;letter-spacing:.26em;text-transform:uppercase;color:var(--mut);font-weight:800}
.pd-disc{position:relative;width:104px;height:104px;margin:0 auto;border-radius:50%;flex:none;
  background:repeating-radial-gradient(circle,#1b0a0b 0 3px,#2b1113 3px 6px);display:grid;place-items:center;
  box-shadow:0 16px 30px -16px rgba(0,0,0,.95)}
.pd-disc::after{content:"";width:34%;height:34%;border-radius:50%;background:linear-gradient(145deg,#e8a33d,#c9761f)}
.pd-pt{text-align:center}
.pd-pt b{display:block;font-size:14px;color:#fdf3e6}
.pd-pt span{font-size:7.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--mut);font-weight:700}
.pd-wave{display:flex;align-items:center;gap:2.5px;height:20px;flex:none}
.pd-wave i{flex:1;background:#e8a33d;border-radius:2px;opacity:.5}
.pd-wave i.on{opacity:1}
.pd-bar{position:relative;height:3px;border-radius:999px;background:var(--line);flex:none}
.pd-bar i{position:absolute;left:0;top:0;height:100%;width:56%;background:#e8a33d;border-radius:999px}
.pd-ctrl{display:flex;align-items:center;justify-content:center;gap:18px;flex:none}
.pd-ctrl svg{width:16px;height:16px}
.pd-play{width:40px;height:40px;border-radius:50%;background:#f7e8d6;display:grid;place-items:center}
.pd-play svg{width:14px;height:14px;color:#2a1113}
.pd-ep{display:flex;align-items:center;gap:9px;padding:7px 0;border-bottom:1px solid var(--line);font-size:8.5px}
.pd-ep b{color:#e8a33d;font-size:7.5px}
.pd-ep em{font-style:normal;margin-left:auto;color:var(--mut);font-size:7.5px}

/* ============================================================
   12 · MAPS — map-first
   ============================================================ */
[data-app="maps"] .bd{padding:0;position:relative;z-index:2;gap:0}
.mp-canvas{position:absolute;inset:0;overflow:hidden;background:linear-gradient(160deg,#f0f3ea,#e2e7dd)}
.mp-canvas .rd{position:absolute;background:#fbfcf9;border-radius:2px}
.mp-canvas .bd2{position:absolute;background:#e6e9e0;border-radius:2px}
.mp-canvas .pk{position:absolute;background:#cfe0c2;border-radius:50%}
.mp-canvas .wt{position:absolute;background:#c5e2ef;border-radius:50%}
.mp-me{position:absolute;left:50%;top:42%;width:14px;height:14px;margin-left:-7px;border-radius:50%;background:#1a73e8;z-index:1;
  box-shadow:0 0 0 6px rgba(26,115,232,.22),0 0 0 13px rgba(26,115,232,.1)}
.mp-search{margin:38px 12px 0;background:#fff;border-radius:12px;padding:10px 12px;display:flex;align-items:center;gap:8px;box-shadow:0 14px 26px -14px rgba(30,40,60,.5)}
.mp-search svg{width:14px;height:14px;color:#e2483d}
.mp-search span{flex:1;font-size:9.5px;color:var(--mut);font-weight:600}
.mp-sheet{margin-top:auto;background:#fff;border-radius:16px 16px 0 0;padding:11px 14px 4px;box-shadow:0 -12px 28px -12px rgba(30,40,60,.35);display:grid;gap:9px}
.mp-sheet .grab{width:34px;height:4px;border-radius:999px;background:#d5d9d2;margin:0 auto}
.mp-go{background:#1a73e8;color:#fff;border-radius:999px;padding:9px;text-align:center;font-size:9.5px;font-weight:800}
.mp-opt{display:flex;align-items:center;gap:9px;padding:9px 12px;border-bottom:1px solid var(--line);background:rgba(255,255,255,.72)}
.mp-opt b{display:block;font-size:9.5px}
.mp-opt span{display:block;font-size:7px;color:var(--mut);font-weight:700}
.mp-opt em{font-style:normal;margin-left:auto;font-size:9px;font-weight:800}
.mp-opt.on{background:#fff}

/* ============================================================
   13 · CALENDAR — paper planner
   ============================================================ */
[data-app="calendar"] .bd{padding:9px 14px}
.cd-head{display:flex;justify-content:space-between;align-items:baseline;border-bottom:1px solid var(--line);padding-bottom:7px;flex:none}
.cd-head b{font-size:14px;font-weight:400;letter-spacing:.05em}
.cd-head span{font-size:7.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--mut)}
.cd-grid{display:grid;grid-template-columns:repeat(7,1fr);flex:none}
.cd-grid .dw{font-size:6.5px;font-weight:800;color:var(--mut);text-align:center;text-transform:uppercase;padding-bottom:2px}
.cd-cell{position:relative;aspect-ratio:1;display:grid;place-items:center;font-size:8.5px;font-weight:600}
.cd-cell.mute{color:#c8c3b6}
.cd-cell.now::after{content:"";position:absolute;inset:10%;border:1.5px solid #d64533;border-radius:50%}
.cd-cell.dot::before{content:"";position:absolute;bottom:10%;width:3px;height:3px;border-radius:50%;background:#d64533}
.cd-ev{display:flex;gap:9px;padding:9px 0;border-bottom:1px solid var(--line)}
.cd-ev b{font-size:7.5px;color:var(--mut);width:30px;flex:none}
.cd-ev div{flex:1;min-width:0}
.cd-ev span{display:block;font-size:9.5px}
.cd-ev em{font-style:normal;font-size:7px;color:var(--mut)}

/* ============================================================
   14 · CAMERA — pro black
   ============================================================ */
[data-app="camera"] .bd{padding:0;position:relative;z-index:2;gap:0}
.cm-vf{position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 18%,#2a3140 0%,#0b0e13 62%,#000 100%)}
.cm-vf::before,.cm-vf::after{content:"";position:absolute;background:rgba(255,255,255,.13)}
.cm-vf::before{left:33.33%;top:0;width:1px;height:100%;box-shadow:33.34% 0 0 rgba(255,255,255,.13)}
.cm-vf::after{top:33.33%;left:0;height:1px;width:100%;box-shadow:0 33.34% 0 rgba(255,255,255,.13)}
.cm-focus{position:absolute;left:50%;top:32%;width:52px;height:52px;margin:-26px 0 0 -26px;border:1.5px solid #ffd60a;border-radius:6px;z-index:3}
.cm-focus::before{content:"";position:absolute;inset:-9px;border:1px solid rgba(255,214,10,.35);border-radius:9px}
.cm-bar{flex:none;display:flex;justify-content:space-between;font-size:7px;font-weight:800;letter-spacing:.14em;color:#ffd60a;padding:6px 13px 0}
.cm-bar span{color:rgba(255,255,255,.6)}
.cm-exp{margin-top:auto;display:flex;align-items:center;gap:7px;padding:0 13px 11px}
.cm-exp span{font-size:7.5px;font-weight:800;color:#ffd60a}
.cm-exp i{flex:1;position:relative;height:2px;background:rgba(255,255,255,.25)}
.cm-exp i::after{content:"";position:absolute;left:58%;top:-4px;width:12px;height:10px;background:#ffd60a;border-radius:2px}
.cm-modes{display:flex;justify-content:center;gap:13px;font-size:7px;font-weight:800;letter-spacing:.16em;color:rgba(255,255,255,.5);padding-bottom:9px}
.cm-modes .on{color:#ffd60a}
.cm-shut{display:flex;align-items:center;justify-content:space-between;padding:0 13px 6px}
.cm-thumb{width:28px;height:28px;border-radius:7px;background:linear-gradient(145deg,#5b6474,#2b3242);border:1px solid rgba(255,255,255,.3)}
.cm-btn{width:50px;height:50px;border-radius:50%;background:#fff;display:grid;place-items:center}
.cm-btn::after{content:"";width:40px;height:40px;border-radius:50%;border:2.5px solid #000}
.cm-flip{width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.16);display:grid;place-items:center}
.cm-flip svg{width:14px;height:14px}
.cm-grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}
.cm-grid3 span{aspect-ratio:1;border-radius:3px;background:linear-gradient(145deg,#4a5364,#232a36)}
.cm-grid3 span:nth-child(2n){background:linear-gradient(145deg,#6b5f4a,#33291d)}
.cm-grid3 span:nth-child(3n){background:linear-gradient(145deg,#3f5460,#1d2a31)}
.cm-panel{flex:none;background:rgba(8,10,14,.72);border-top:1px solid var(--line);padding:10px 13px 4px;display:grid;gap:8px}
.cm-row{display:flex;justify-content:space-between;font-size:8.5px}
.cm-row em{font-style:normal;color:var(--mut)}

/* ============================================================
   15 · HEALTH — clinical
   ============================================================ */
[data-app="health"] .bd{padding:9px 13px}
.hl-card{background:#fff;border:1px solid var(--line);border-radius:10px;padding:9px;display:grid;gap:5px}
.hl-card .l2{font-size:6.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--mut)}
.hl-card b{font-family:var(--font-display);font-size:15px;letter-spacing:-.02em}
.hl-card b i{font-size:7px;font-style:normal;color:var(--mut);font-weight:600}
.hl-spark{display:flex;align-items:flex-end;gap:2px;height:15px}
.hl-spark i{flex:1;border-radius:1px;background:#cbd5e1}
.hl-g2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.hl-ecg{background:#fff;border:1px solid var(--line);border-radius:10px;padding:9px;display:grid;gap:6px}
.hl-ecg .t2{display:flex;justify-content:space-between;font-size:6.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--mut)}
.hl-ecg svg{width:100%;height:32px}
.hl-rec{display:flex;align-items:center;gap:9px;padding:9px 0;border-bottom:1px solid var(--line)}
.hl-rec .ic{width:22px;height:22px;border-radius:7px;background:#e6f4f3;flex:none}
.hl-rec b{display:block;font-size:9.5px}
.hl-rec span{display:block;font-size:7px;color:var(--mut)}

/* ============================================================
   16 · SOCIAL — story rings
   ============================================================ */
[data-app="social"] .bd{padding:0;gap:0}
.so-top{display:flex;align-items:center;justify-content:space-between;padding:5px 14px 9px;flex:none}
.so-top b{font-family:Georgia,serif;font-size:15px;font-weight:400}
.so-top .ic{display:flex;gap:11px}
.so-top svg{width:14px;height:14px}
.so-rings{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;padding:0 12px 10px;border-bottom:1px solid var(--line);flex:none}
.so-rings div{display:grid;justify-items:center;gap:4px;font-size:6.5px;font-weight:600;color:var(--mut);text-align:center}
.so-ring{width:38px;height:38px;border-radius:50%;padding:2px;background:conic-gradient(#f9ce34,#ee2a7b 45%,#6228d7 80%,#f9ce34)}
.so-ring i{display:block;width:100%;height:100%;border-radius:50%;background:#fff;padding:2px}
.so-ring i em{display:block;width:100%;height:100%;border-radius:50%;background:linear-gradient(145deg,#c7d2e8,#8494b3)}
.so-pu{display:flex;align-items:center;gap:8px;padding:9px 14px 7px}
.so-pu .av{width:24px;height:24px;background:linear-gradient(145deg,#ffd6a5,#e8875f)}
.so-pu b{font-size:9px;display:block}
.so-pu span{font-size:7px;color:var(--mut);display:block}
.so-photo{aspect-ratio:1/.82;background:linear-gradient(160deg,#ffb37a,#ff6a88 46%,#7b5cff)}
.so-acts{display:flex;gap:13px;padding:8px 14px 3px}
.so-acts svg{width:15px;height:15px}
.so-cap{padding:2px 14px 8px;font-size:8.5px;color:var(--mut)}
.so-story{position:relative;flex:1;min-height:0;margin:0 12px;border-radius:14px;overflow:hidden;background:linear-gradient(160deg,#ff9a76,#7b5cff)}
.so-bars{position:absolute;left:10px;right:10px;top:9px;display:flex;gap:4px;z-index:2}
.so-bars i{flex:1;height:3px;border-radius:999px;background:rgba(255,255,255,.35)}
.so-bars i.on{background:#fff}
.so-story b{position:absolute;left:12px;bottom:12px;color:#fff;font-size:11px;z-index:2}
.so-notif{display:flex;align-items:center;gap:9px;padding:9px 14px;border-bottom:1px solid var(--line)}
.so-notif .av{width:26px;height:26px;background:linear-gradient(145deg,#ffd6a5,#e8875f)}
.so-notif b{display:block;font-size:9px}
.so-notif span{display:block;font-size:7px;color:var(--mut)}

/* ============================================================
   17 · NOTES — legal pad
   ============================================================ */
[data-app="notes"] .scr{background:repeating-linear-gradient(#fffbe8 0 15px,#ffe9a8 15px 16px)}
[data-app="notes"] .bd{position:relative;padding:10px 12px 8px 30px;gap:0}
.nt-margin{position:absolute;left:20px;top:0;bottom:0;width:1.5px;background:#efa8a8}
.nt-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:5px}
.nt-head b{font-size:14px}
.nt-head span{font-size:6.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--mut)}
.nt-line{font-size:9.5px;line-height:16px}
.nt-chk div{display:flex;align-items:center;gap:8px;height:16px;font-size:9.5px}
.nt-chk b{flex:none;position:relative;width:10px;height:10px;border:1.3px solid #8a7b4e;border-radius:2px}
.nt-chk div.done b{background:#8a7b4e}
.nt-chk div.done b::after{content:"";position:absolute;left:2px;top:1px;width:5px;height:2.5px;border-left:1.3px solid #fffbe8;border-bottom:1.3px solid #fffbe8;transform:rotate(-45deg)}
.nt-chk div.done span{text-decoration:line-through;color:var(--mut)}
.nt-tags{display:flex;flex-wrap:wrap;gap:6px}
.nt-tags span{font-size:8px;font-weight:700;padding:6px 11px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.6)}

/* ============================================================
   18 · RIDE — night sheet
   ============================================================ */
[data-app="ride"] .bd{padding:0;position:relative;z-index:2;gap:0}
.rd-map{position:absolute;inset:0;overflow:hidden;background:linear-gradient(160deg,#cdd6d2,#b9c4c0)}
.rd-map .rd2{position:absolute;background:#f2f5f3;border-radius:2px}
.rd-map .blk{position:absolute;background:#c2cbc7;border-radius:3px}
.rd-route{position:absolute;left:38%;top:16%;width:6px;height:34%;background:linear-gradient(180deg,#ffcc00,#ff9f1c);border-radius:999px;transform:rotate(9deg)}
.rd-car{position:absolute;left:41%;top:17%;width:15px;height:15px;border-radius:50%;background:#0d1b2a;box-shadow:0 0 0 5px rgba(255,204,0,.5)}
.rd-sheet{margin-top:auto;background:#0d1b2a;color:#f3f6fa;border-radius:20px 20px 0 0;padding:12px 15px 3px;display:grid;gap:9px}
.rd-grab{width:34px;height:4px;border-radius:999px;background:rgba(255,255,255,.25);margin:0 auto}
.rd-drv{display:flex;align-items:center;gap:10px}
.rd-drv .av{width:34px;height:34px;background:linear-gradient(145deg,#4a5a72,#22303f)}
.rd-drv b{display:block;font-size:10.5px}
.rd-drv span{display:block;font-size:7px;color:#93a3b8;font-weight:700;margin-top:2px}
.rd-eta{display:flex;justify-content:space-between;border-top:1px solid rgba(255,255,255,.12);border-bottom:1px solid rgba(255,255,255,.12);padding:8px 0}
.rd-eta div{text-align:center;font-size:6.5px;color:#93a3b8;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.rd-eta div b{display:block;font-family:var(--font-display);font-size:13px;color:#fff;margin-top:3px;letter-spacing:-.02em}
.rd-go{background:#ffcc00;color:#0d1b2a;border-radius:12px;padding:10px;text-align:center;font-size:9.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.rd-trip{display:flex;align-items:center;gap:9px;padding:9px 12px;border-bottom:1px solid var(--line);background:rgba(255,255,255,.62)}
.rd-trip b{display:block;font-size:9.5px}
.rd-trip span{display:block;font-size:7px;color:var(--mut)}
.rd-trip em{font-style:normal;margin-left:auto;font-size:9px;font-weight:800}

/* ============================================================
   19 · COFFEE — kraft café
   ============================================================ */
[data-app="coffee"] .bd{padding:9px 13px}
.cf-head{display:flex;justify-content:space-between;align-items:center;flex:none}
.cf-head b{font-size:14px}
.cf-head span{font-size:6.5px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--mut)}
.cf-card{position:relative;border-radius:14px;padding:12px;display:grid;gap:4px;overflow:hidden;flex:none;
  background:linear-gradient(150deg,#5c4028,#3c2818);color:#f7ead8}
.cf-card::after{content:"";position:absolute;right:-14px;bottom:-20px;width:78px;height:78px;border-radius:50%;background:radial-gradient(circle,rgba(232,163,61,.4),transparent 70%)}
.cf-card span{font-size:6.5px;letter-spacing:.2em;text-transform:uppercase;opacity:.72}
.cf-card b{font-size:21px}
.cf-card em{font-style:normal;font-size:7px;letter-spacing:.16em;text-transform:uppercase;color:#e8c48d;font-weight:800}
.cf-stamps{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.cf-stamp{aspect-ratio:1;border-radius:50%;display:grid;place-items:center;border:1.3px dashed #b79a72;color:#c9ac85}
.cf-stamp.on{background:linear-gradient(145deg,#8a5c30,#5c4028);border-style:solid;border-color:#3c2818;color:#f0d9b8}
.cf-stamp svg{width:11px;height:11px}
.cf-reward{display:flex;align-items:center;gap:9px;padding:9px 0;border-bottom:1px solid var(--line)}
.cf-reward .ic{width:24px;height:24px;border-radius:50%;background:linear-gradient(145deg,#8a5c30,#5c4028);flex:none}
.cf-reward b{display:block;font-size:9.5px}
.cf-reward span{display:block;font-size:7px;color:var(--mut)}
.cf-reward em{font-style:normal;margin-left:auto;font-size:7px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--mut)}

/* ============================================================
   20 · ANALYTICS — dark dashboard
   ============================================================ */
[data-app="analytics"] .bd{padding:9px 13px}
.an-kpi{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.an-kpi div{background:#181e26;border:1px solid var(--line);border-radius:11px;padding:9px;display:grid;gap:5px}
.an-kpi .l3{font-size:6px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--mut)}
.an-kpi b{font-family:var(--font-display);font-size:14px;letter-spacing:-.02em}
.an-kpi em{font-style:normal;justify-self:start;font-size:7px;font-weight:800;padding:3px 6px;border-radius:999px}
.an-up{background:rgba(52,211,153,.15);color:#34d399}
.an-dn{background:rgba(248,113,113,.15);color:#f87171}
.an-bars{display:flex;align-items:flex-end;gap:5px;height:48px}
.an-bars i{flex:1;border-radius:3px 3px 0 0;background:#2a3441}
.an-bars i.a{background:linear-gradient(180deg,#5aa2ff,#2f6fd0)}
.an-bars i.b{background:linear-gradient(180deg,#34d399,#128a5e)}
.an-bars i.c{background:linear-gradient(180deg,#f5b041,#b3743a)}
.an-panel{background:#181e26;border:1px solid var(--line);border-radius:11px;padding:9px;display:grid;gap:7px}
.an-panel .ct{display:flex;justify-content:space-between;font-size:6px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--mut)}
.an-donut{width:74px;height:74px;border-radius:50%;margin:0 auto;flex:none;position:relative;
  background:conic-gradient(#5aa2ff 0 48%,#34d399 48% 78%,#f5b041 78% 100%)}
.an-donut::after{content:"";position:absolute;inset:17px;border-radius:50%;background:#181e26}
.an-row{display:flex;align-items:center;gap:7px;font-size:8px;color:var(--mut)}
.an-row .tk{flex:1;height:5px;border-radius:999px;background:#1d242e;overflow:hidden}
.an-row .tk i{display:block;height:100%;border-radius:999px;background:#3f7fd6}

/* ---------- music rows (used by Playlists + Profile) ---------- */
.mu-row{display:flex;align-items:center;gap:9px;padding:8px 0;border-bottom:1px solid var(--line);font-size:8.5px}
.mu-row .sq{width:26px;height:26px;border-radius:8px;flex:none;background:linear-gradient(145deg,#ff4fd8,#8b5cf6)}
.mu-row b{display:block;font-size:9px;font-weight:700}
.mu-row span{display:block;font-size:7px;color:var(--mut);font-weight:700}
.mu-row em{font-style:normal;margin-left:auto;color:var(--mut);font-size:7.5px}

/* ---------- small alignment helpers ---------- */
[data-app="meditation"] .md-card b{margin-left:auto}
[data-app="meditation"] .md-card>div{min-width:0}
[data-app="weather"] .we-row b,.we-hrs b{margin-left:auto}
[data-app="messages"] .ms-row .g{min-width:0}

/* ============================================================
   LEVEL BADGES — shared by the gallery and every face page
   ============================================================ */
.lv{display:inline-flex;align-items:center;font-size:10.5px;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;padding:6px 13px;border-radius:999px;background:var(--canvas);box-shadow:var(--sh-in-s)}
.lv-s{color:#64748b}
.lv-b{color:var(--indigo)}
.lv-m{color:var(--mint-ink)}
.lv-a{color:#ea580c}
.lv-x{color:#e11d48}

/* ============================================================
   GALLERY INDEX — page head, rail, cards
   ============================================================ */
.appfaces{padding-top:8px}
.appfaces .grid-note{margin-top:22px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.grid-apps{display:grid;grid-template-columns:repeat(auto-fill,minmax(226px,1fr));gap:46px 30px;margin-top:34px}

/* category rail */
.rail{position:sticky;top:84px;z-index:40;display:flex;gap:10px;overflow-x:auto;padding:16px 5vw;
  background:var(--canvas);-webkit-overflow-scrolling:touch}
.rail a{flex:none;font-size:13px;font-weight:700;color:var(--muted);padding:9px 16px;border-radius:999px;
  background:var(--canvas);box-shadow:var(--sh-s);transition:color .18s ease,transform .15s ease}
.rail a:hover{color:var(--ink);transform:translateY(-1px)}
.rail a.on{color:#fff;background:linear-gradient(145deg,var(--mint-3),var(--mint-2));
  box-shadow:5px 5px 12px var(--dark),-5px -5px 12px var(--light)}

/* category section */
.cat{margin-top:56px;scroll-margin-top:150px}
.cat-head{display:flex;align-items:center;gap:16px;margin-bottom:10px}
.cat-head .ico{width:54px;height:54px;border-radius:18px;display:grid;place-items:center;flex:none;
  font-size:20px;background:var(--canvas);box-shadow:var(--sh-s)}
.cat-head .kick{font-size:11px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--mint)}
.cat-head h2{font-size:27px;letter-spacing:-.02em;line-height:1.15;color:var(--ink)}
.cat-head p{color:var(--muted);font-size:14px;margin-top:2px}
.cat-fin .ico{color:var(--mint-ink)}
.cat-media .ico{color:var(--indigo)}
.cat-life .ico{color:#0ea5e9}
.cat-health .ico{color:var(--coral-2)}

/* gallery card — the face itself is the thumbnail */
.card-app{display:flex;flex-direction:column;text-decoration:none;color:inherit;border-radius:26px;
  padding:16px 16px 20px;background:var(--canvas);box-shadow:var(--sh-r);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.card-app:hover{transform:translateY(-6px);
  box-shadow:14px 14px 30px var(--dark),-12px -12px 28px var(--light)}
.card-app:focus-visible{outline:2px solid var(--mint-ink);outline-offset:4px}
.card-app .thumb{position:relative;border-radius:20px;padding:16px 0 12px;background:var(--canvas);
  box-shadow:var(--sh-in-s);display:grid;place-items:center;overflow:hidden}
.card-app .thumb .device{width:min(210px,86%)}
.card-app .thumb .num{position:absolute;top:6px;right:14px;font-family:var(--font-display);font-weight:800;
  font-size:34px;opacity:.1;color:var(--ink)}
.card-app .thumb .lv{position:absolute;left:12px;bottom:10px}
.card-app .body{padding:16px 4px 0;display:flex;flex-direction:column;gap:5px;flex:1}
.card-app h3{font-size:17.5px;letter-spacing:-.01em;color:var(--ink)}
.card-app .style{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.card-app p{font-size:13px;color:var(--muted);flex:1;line-height:1.6;margin-top:4px}
.card-app .go{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:800;color:var(--mint-ink);margin-top:10px}
.card-app .go::after{content:"";width:0;height:2px;border-radius:2px;background:var(--mint-ink);transition:width .25s ease}
.card-app:hover .go::after{width:18px}

/* scroll progress + back to top */
#progress{position:fixed;top:0;left:0;height:4px;z-index:100;width:0%;
  background:linear-gradient(90deg,var(--mint-3),var(--mint-2))}
#toTop{position:fixed;right:24px;bottom:24px;z-index:90;width:54px;height:54px;border-radius:50%;border:none;
  cursor:pointer;display:grid;place-items:center;color:var(--mint-ink);font-size:20px;background:var(--canvas);
  box-shadow:var(--sh-r);opacity:0;pointer-events:none;transform:translateY(14px);
  transition:opacity .3s ease,transform .3s ease,color .2s ease}
#toTop.show{opacity:1;pointer-events:auto;transform:none}
#toTop:hover{color:var(--ink)}

/* ============================================================
   FACE PAGE — stage, side panel, screens rail
   ============================================================ */
.face{padding-bottom:10px}
.face .face-kicker{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.face .face-kicker .lnk{font-size:12px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--mint)}
.face .face-kicker .sep{width:5px;height:5px;border-radius:50%;background:var(--dark)}
.face-title{font-size:clamp(32px,4.6vw,52px);letter-spacing:-.03em;line-height:1.04;margin-top:6px}
.face-style{font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-top:14px}
.face-blurb{color:var(--muted);font-size:16px;margin-top:16px;max-width:660px}
.face-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}

.face-main{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:54px;align-items:start;
  max-width:var(--wrap);margin:0 auto;padding:56px 5vw 0}
.face-stage{position:relative;display:grid;justify-items:center;gap:20px;padding:28px 22px 24px;
  border-radius:30px;background:var(--canvas);box-shadow:var(--sh-in-s)}
.face-stage .live{width:100%;max-width:262px}
.face-stage .device{width:100%}
.face-ctl{display:flex;align-items:center;gap:14px}
.face-ctl .vnav{width:44px;height:44px;border-radius:50%;border:none;cursor:pointer;background:var(--canvas);
  box-shadow:var(--sh-s);color:var(--ink);font-size:19px;line-height:1;display:grid;place-items:center}
.face-ctl .vnav:hover{color:var(--mint-ink)}
.face-ctl .vnav:active{box-shadow:var(--sh-in-s)}
.face-ctl .count{font-family:var(--font-display);font-size:12.5px;font-weight:800;color:var(--muted);
  background:var(--canvas);box-shadow:var(--sh-s);border-radius:999px;padding:8px 14px}
.face-tabs{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;width:100%}
.face-tabs button{font:inherit;font-size:12px;font-weight:700;cursor:pointer;border:none;border-radius:999px;
  padding:9px 15px;background:var(--canvas);box-shadow:var(--sh-s);color:var(--muted);
  transition:color .18s ease,box-shadow .18s ease}
.face-tabs button:hover{color:var(--ink)}
.face-tabs button.on{color:var(--mint-ink);box-shadow:var(--sh-in-s)}
.face-hint{font-size:11.5px;color:var(--muted);text-align:center;width:100%}
.face-hint b{color:var(--ink)}

.face-side{display:grid;gap:22px}
.face-panel{border-radius:26px;padding:26px 26px 24px;background:var(--canvas);box-shadow:var(--sh-r)}
.face-panel h3{font-size:17px;margin-bottom:6px}
.face-panel .lead{font-size:13px;color:var(--muted);margin-bottom:14px}
.face-parts{display:flex;flex-wrap:wrap;gap:8px}
.face-parts span{font-size:11.5px;font-weight:700;color:var(--muted);background:var(--canvas);
  box-shadow:var(--sh-s);border-radius:999px;padding:8px 13px}
.face-notes{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.face-notes li{display:flex;gap:11px;font-size:13.5px;color:var(--ink);line-height:1.55}
.face-notes .tic{flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;
  font-size:11px;font-weight:800;color:var(--mint-ink);background:var(--canvas);box-shadow:var(--sh-s);margin-top:1px}
.face-swatches{display:flex;gap:10px;flex-wrap:wrap}
.face-swatches span{width:42px;height:42px;border-radius:14px;box-shadow:var(--sh-s);background:var(--sw,#ccc)}
.face-rows{display:grid;gap:0}
.face-rows div{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:13px;
  padding:11px 0;border-bottom:1px solid rgba(60,80,110,.14)}
.face-rows div:last-child{border-bottom:none}
.face-rows span{color:var(--muted);font-weight:600}
.face-rows b{font-weight:800}

.face-screens{max-width:var(--wrap);margin:0 auto;padding:0 5vw}
.face-screens .four{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:26px;margin-top:34px}
.face-screens figure{margin:0;display:grid;gap:14px;justify-items:center;min-width:0}
.face-screens .capt{text-align:center}
.face-screens .capt b{display:block;font-family:var(--font-display);font-size:14px}
.face-screens .capt span{display:block;font-size:10.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);margin-top:3px}
.face-screens button{border:none;background:none;padding:0;cursor:pointer;width:100%;min-width:0;display:grid;gap:14px;
  justify-items:center;border-radius:30px}
.face-screens button:focus-visible{outline:2px solid var(--mint-ink);outline-offset:6px}
.face-screens .device{width:100%}
.face-screens button:hover .capt b{color:var(--mint-ink)}
.face-screens button.on .capt b{color:var(--mint-ink)}
.face-screens button.on .capt span{color:var(--mint-ink)}
.face-screens button.on .device{box-shadow:0 0 0 3px var(--mint),0 24px 42px -20px rgba(42,52,68,.5)}

.face-next{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
  border-radius:26px;padding:22px 28px;background:var(--canvas);box-shadow:var(--sh-r)}
.face-next .lnk{display:block;font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.face-next b{font-family:var(--font-display);font-size:19px;letter-spacing:-.01em}
.face-next .side{text-align:right}

/* ---------- responsive ---------- */
@media (max-width:980px){
  .face-main{grid-template-columns:minmax(0,1fr);gap:34px;padding-top:40px}
  .face-stage{max-width:420px;margin:0 auto;width:100%}
  .face-screens .four{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 22px}
}
@media (max-width:860px){
  .rail{position:static}
  .appfaces .grid-apps{grid-template-columns:repeat(auto-fill,minmax(178px,1fr));gap:34px 18px}
  .card-app .thumb .device{width:min(170px,84%)}
}
@media (max-width:560px){
  .device{border-radius:32px;padding:8px}
  .scr{border-radius:25px}
  .app .cap .n{width:26px;height:26px;font-size:10px}
  .face-next{flex-direction:column;align-items:flex-start}
  .face-next .side{text-align:left}
  /* four phones side by side stop being legible this small — go one up */
  .face-screens .four{grid-template-columns:minmax(0,1fr);gap:30px}
  .face-screens figure{max-width:250px;margin:0 auto;width:100%}
  .face-screens .device{border-radius:32px;padding:8px}
}

@media (prefers-reduced-motion:reduce){
  .card-app,.device{transition:none}
  .card-app:hover{transform:none}
  .app:hover .device,.app:focus-visible .device{transform:none}
}