/* Phone screens — mirror the real app (MxTheme / LockTheme):
   near-black field, scarce violet, off-white type, serif for emotion, caps labels for function.
   1cqw ≈ 3.6dp on a 360dp-wide phone. */
.screen {
  --m-bg: #05060a; --m-el: #0e111c; --m-line: #252a3d; --m-acc: #7a5cff; --m-acc2: #9b86ff;
  --m-veil: rgba(122,92,255,.14); --m-t1: #f2f4f8; --m-t2: #8b93a7; --m-t3: #7a8199; --m-ok: #3fd8a4; --m-gold: #f5c451; --m-danger: #e5484d;
  background: var(--m-bg); color: var(--m-t1);
  font-family: Roboto, "Plus Jakarta Sans", system-ui, sans-serif;
}
.m-serif { font-family: "Noto Serif", Georgia, serif; font-weight: 400; letter-spacing: -.01em; }
.sb { display: flex; justify-content: space-between; align-items: center; padding: 3.4cqw 6cqw 0; font-size: 3.6cqw; font-weight: 500; height: 9cqw; flex: none; color: var(--m-t1); }
.sb__r { display: flex; gap: 1.4cqw; align-items: center; }
.sb__r svg { width: 4cqw; height: 4cqw; }
.mscr { flex: 1; display: flex; flex-direction: column; padding: 3cqw 5.5cqw 5cqw; min-height: 0; position: relative; }
.mscr--lock { background: radial-gradient(120% 60% at 50% 110%, rgba(36,28,92,.55), transparent 70%), var(--m-bg); }
.m-label { font-size: 2.9cqw; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--m-t2); }
.m-label--acc { color: var(--m-acc2); }
.m-chip { align-self: center; display: inline-flex; padding: 1.3cqw 3.4cqw; border-radius: 99px; background: var(--m-veil); color: var(--m-acc2); font-size: 2.8cqw; font-weight: 700; letter-spacing: .2em; }
.m-btn { height: 13cqw; border-radius: 4.4cqw; background: var(--m-acc); color: #fff; display: flex; align-items: center; justify-content: center; gap: 2cqw; font-size: 4cqw; font-weight: 600; flex: none; letter-spacing: .02em; }
.m-btn svg { width: 4cqw; height: 4cqw; }
.m-btn--out { background: transparent; border: 1px solid var(--m-line); color: var(--m-t1); }
.m-btn--sm { height: 11cqw; font-size: 3.6cqw; border-radius: 3.6cqw; }
.m-ghost { text-align: center; font-size: 3.3cqw; color: var(--m-t3); }
.m-center { text-align: center; }
.m-grow { flex: 1; }

/* lock: write */
.m-paused { align-self: center; display: inline-flex; align-items: center; gap: 2cqw; padding: 1.6cqw 3.6cqw 1.6cqw 1.8cqw; border: 1px solid var(--m-line); border-radius: 99px; font-size: 3.3cqw; color: #d5d9e4; margin-top: 2cqw; }
.m-paused .app-ic { width: 6cqw; height: 6cqw; border-radius: 1.7cqw; }
.m-paused .app-ic svg { width: 4cqw; height: 4cqw; }
.m-h { font-size: 5.6cqw; font-weight: 500; text-align: center; margin: 9cqw 0 3cqw; }
.m-instr { font-size: 2.7cqw; letter-spacing: .14em; text-transform: uppercase; color: var(--m-t2); text-align: center; line-height: 1.5; margin: 3cqw 0; font-weight: 600; }
.m-instr b { color: var(--m-acc2); font-weight: 700; }
.m-input { border: 1px solid var(--m-line); background: #0a0c14; border-radius: 4.4cqw; padding: 3.6cqw 4cqw; min-height: 30cqw; font-size: 4.4cqw; line-height: 1.45; color: var(--m-t1); }
.m-input .caret { display: inline-block; width: .45cqw; height: 4.6cqw; background: var(--m-acc2); vertical-align: -.8cqw; animation: blink 1s steps(1) infinite; }
.m-count { display: flex; justify-content: space-between; font-size: 3cqw; color: var(--m-t2); margin-top: 2cqw; }
.m-count .ok { color: var(--m-ok); display: flex; align-items: center; gap: 1cqw; }
.m-count .ok svg { width: 3.4cqw; height: 3.4cqw; }
.m-stack { display: flex; flex-direction: column; gap: 2.4cqw; margin-top: auto; }

/* lock: read */
.m-read { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; gap: 4cqw; }
.m-read p { font-size: 5.6cqw; line-height: 1.6; }

/* tathastu */
.m-ceremony { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 3cqw; position: relative; }
.m-ceremony::before { content: ""; position: absolute; width: 90cqw; height: 90cqw; border-radius: 50%; background: radial-gradient(circle, rgba(122,92,255,.38), rgba(122,92,255,.08) 45%, transparent 70%); }
.m-ceremony b { font-family: "Noto Serif", Georgia, serif; font-weight: 400; font-size: 11cqw; position: relative; text-shadow: 0 0 6cqw rgba(155,134,255,.7); }
.m-ceremony span { position: relative; font-size: 3.6cqw; color: var(--m-t2); letter-spacing: .04em; line-height: 1.5; }
.m-ceremony i { position: relative; width: 10cqw; height: 1px; background: var(--m-acc2); opacity: .7; }

/* home */
.m-top { display: flex; justify-content: space-between; align-items: flex-start; margin-top: 1cqw; }
.m-logo { font-family: "Noto Serif", Georgia, serif; font-weight: 700; font-size: 7.4cqw; letter-spacing: -.01em; line-height: 1.1; }
.m-logo em { font-style: normal; color: var(--m-acc2); }
.m-avatar { width: 10cqw; height: 10cqw; border-radius: 50%; border: 1px solid var(--m-line); background: var(--m-el); display: grid; place-items: center; font-size: 4cqw; color: var(--m-acc2); }
.m-tag { font-size: 2.6cqw; letter-spacing: .28em; color: var(--m-t2); margin-top: 1.4cqw; font-weight: 600; }
.m-hello { font-size: 3.7cqw; color: var(--m-t2); margin: 3cqw 0 3.4cqw; }
.m-hero { border-radius: 5cqw; padding: 4.6cqw; position: relative; overflow: hidden;
  background: radial-gradient(60% 50% at 80% 100%, rgba(155,120,220,.5), transparent 70%), linear-gradient(170deg, #1a1540 0%, #241a52 60%, #3a2a6e 100%); }
.m-hero > * { position: relative; z-index: 1; }
.m-hero svg.m-hills { position: absolute; left: 0; right: 0; bottom: 14cqw; width: 100%; height: 22cqw; z-index: 0; }
.m-hero .m-stars { position: absolute; inset: 0; z-index: 0; background-image: radial-gradient(1px 1px at 70% 12%, #fff, transparent), radial-gradient(1px 1px at 85% 30%, #fff, transparent), radial-gradient(1px 1px at 60% 22%, #fff, transparent), radial-gradient(1px 1px at 92% 52%, #fff, transparent); opacity: .7; }
.m-hero q { display: block; font-family: "Noto Serif", Georgia, serif; font-size: 5.8cqw; line-height: 1.32; margin: 2.6cqw 0 3cqw; quotes: "\201C" "\201D"; }
.m-hero .m-chip { align-self: auto; border-radius: 1.8cqw; }
.m-hero__btns { display: grid; grid-template-columns: 1fr 1fr; gap: 2.4cqw; margin-top: 4cqw; }
.m-hero__btns .m-btn--out { border-color: rgba(255,255,255,.7); }
.m-hero .m-x { position: absolute; right: 4cqw; top: 4cqw; color: var(--m-t2); width: 4cqw; height: 4cqw; }
.m-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.2cqw; margin-top: 3cqw; }
.m-tile { border: 1px solid var(--m-line); background: var(--m-el); border-radius: 3.6cqw; padding: 3cqw 1cqw; text-align: center; }
.m-tile svg { width: 4.6cqw; height: 4.6cqw; color: var(--m-acc2); margin: 0 auto; }
.m-tile b { display: block; font-size: 5cqw; font-weight: 500; margin: 1cqw 0 .4cqw; }
.m-tile small { font-size: 2.6cqw; color: var(--m-t2); }
.m-prot { display: flex; align-items: center; gap: 3cqw; border: 1px solid rgba(63,216,164,.35); background: rgba(63,216,164,.06); border-radius: 3.6cqw; padding: 3cqw; margin-top: 3cqw; font-size: 3.4cqw; }
.m-prot i { width: 2.4cqw; height: 2.4cqw; border-radius: 50%; background: var(--m-ok); box-shadow: 0 0 0 1.2cqw rgba(63,216,164,.18); flex: none; }
.m-prot b { font-weight: 600; } .m-prot b span { color: var(--m-ok); }
.m-nav { display: flex; justify-content: space-around; align-items: flex-start; border-top: 1px solid var(--m-line); padding: 2.4cqw 0 4cqw; background: #090b12; flex: none; }
.m-nav span { display: flex; flex-direction: column; align-items: center; gap: .8cqw; font-size: 2.7cqw; color: #908cae; width: 14cqw; }
.m-nav svg { width: 5cqw; height: 5cqw; }
.m-nav span.on { color: var(--m-acc2); }
.m-nav span.on svg { background: var(--m-veil); border-radius: 99px; padding: 1cqw 3.4cqw; width: 12cqw; height: 7cqw; box-sizing: border-box; }

/* library */
.m-back { display: flex; align-items: center; gap: 3cqw; margin-top: 1cqw; }
.m-back svg { width: 5cqw; height: 5cqw; }
.m-back b { font-family: "Noto Serif", Georgia, serif; font-weight: 400; font-size: 6.4cqw; }
.m-cap { font-size: 3cqw; color: var(--m-t2); margin: .6cqw 0 0 8cqw; }
.m-sec { display: flex; align-items: center; gap: 1.6cqw; font-size: 3.4cqw; font-weight: 600; margin: 3.6cqw 0 .4cqw; }
.m-sec svg { width: 3.6cqw; height: 3.6cqw; color: var(--m-acc2); }
.m-sec + small { display: block; font-size: 2.7cqw; color: var(--m-t2); margin-bottom: 2cqw; }
.m-card { border: 1px solid var(--m-line); background: var(--m-el); border-radius: 3.6cqw; padding: 3cqw; display: flex; gap: 3cqw; align-items: center; }
.m-thumb { width: 12cqw; height: 12cqw; border-radius: 2.4cqw; flex: none; background: linear-gradient(170deg, #2a1f60, #6d4fc4); position: relative; overflow: hidden; }
.m-thumb::after { content: ""; position: absolute; left: -10%; right: -10%; bottom: -20%; height: 55%; background: #463390; border-radius: 50% 50% 0 0; }
.m-card p { font-size: 3.3cqw; flex: 1; line-height: 1.35; }
.m-card .pin { color: var(--m-gold); width: 3.8cqw; height: 3.8cqw; flex: none; }
.m-chips { display: flex; gap: 1.6cqw; margin-bottom: 2cqw; }
.m-chips span { font-size: 2.6cqw; padding: 1cqw 3cqw; border-radius: 99px; border: 1px solid var(--m-line); color: var(--m-t2); font-weight: 600; letter-spacing: .08em; }
.m-chips span.on { background: var(--m-acc); color: #fff; border-color: var(--m-acc); }

/* protected apps */
.m-apps { display: flex; flex-direction: column; gap: 2.2cqw; margin-top: 3cqw; }
.m-app { display: flex; align-items: center; gap: 3cqw; border: 1px solid var(--m-line); background: var(--m-el); border-radius: 3.6cqw; padding: 2.6cqw 3cqw; }
.m-app b { flex: 1; font-size: 3.7cqw; font-weight: 500; }
.m-app small { display: block; font-size: 2.7cqw; color: var(--m-t2); font-weight: 400; }
.m-app .app-ic { width: 8.4cqw; height: 8.4cqw; border-radius: 2.2cqw; }
.m-app .app-ic svg { width: 5.2cqw; height: 5.2cqw; }
.screen .tg { width: 9.6cqw; height: 5.6cqw; background: #2a2f44; }
.screen .tg::after { top: .7cqw; left: .7cqw; width: 4.2cqw; height: 4.2cqw; }
.screen .tg.on { background: var(--m-acc); }
.screen .tg.on::after { transform: translateX(4cqw); }

/* gratitude */
.m-prompt { font-family: "Noto Serif", Georgia, serif; font-size: 6.2cqw; line-height: 1.35; text-align: center; margin: 3cqw 0 5cqw; }
.m-moon { width: 9cqw; height: 9cqw; border-radius: 50%; box-shadow: inset -2.4cqw -.8cqw 0 0 #e9ddb0; transform: rotate(-20deg); align-self: center; margin-top: 6cqw; }

/* shared bits */
.app-ic { width: 8.6cqw; height: 8.6cqw; border-radius: 2.4cqw; display: grid; place-items: center; flex: none; color: #fff; }
.app-ic svg { width: 5.4cqw; height: 5.4cqw; }
.tg { width: 10cqw; height: 6cqw; border-radius: 99px; position: relative; flex: none; transition: background .25s; }
.tg::after { content: ""; position: absolute; border-radius: 50%; background: #fff; box-shadow: 0 .3cqw 1cqw rgba(0,0,0,.3); transition: transform .25s; }
.ic-ig { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285aeb 90%); }
.ic-yt { background: #ff0000; } .ic-wa { background: #25d366; } .ic-x { background: #000; border: 1px solid #333; } .ic-fb { background: #1877f2; } .ic-ch { background: #fff; }
@keyframes blink { 50% { opacity: 0 } }
.m-rituals { display: grid; grid-template-columns: 1fr 1fr; gap: 2.4cqw; margin-top: 2cqw; }
.m-rit { border: 1px solid var(--m-line); background: var(--m-el); border-radius: 3.6cqw; padding: 3cqw; }
.m-rit span { width: 8cqw; height: 8cqw; border-radius: 2cqw; background: var(--m-veil); color: var(--m-acc2); display: grid; place-items: center; margin-bottom: 2cqw; }
.m-rit span svg { width: 4.4cqw; height: 4.4cqw; }
.m-rit b { display: block; font-size: 3.4cqw; font-weight: 600; }
.m-rit small { font-size: 2.6cqw; color: var(--m-t2); line-height: 1.35; display: block; margin-top: .6cqw; }