:root {
  --plum-950: #351321;
  --plum-900: #4d1830;
  --plum-800: #67203b;
  --plum-700: #7d2946;
  --plum-600: #9d3b5b;
  --coral-500: #ec7d5c;
  --coral-300: #f4aa8c;
  --cream-50: #fffaf5;
  --cream-100: #fff4e9;
  --cream-200: #f5e4d4;
  --ink: #2b2024;
  --muted: #73676b;
  --green: #458a72;
  --gold: #c28a36;
  --white: #fff;
  --border: rgba(88, 47, 61, .13);
  --shadow-sm: 0 10px 30px rgba(70, 27, 44, .07);
  --shadow-lg: 0 30px 70px rgba(65, 22, 39, .15);
  --radius: 22px;
  --radius-sm: 14px;
  --serif: Georgia, 'Times New Roman', serif;
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

body.is-app[data-theme="pink"] { --plum-950:#421126;--plum-900:#681638;--plum-800:#8d2050;--plum-700:#b72f68;--plum-600:#cf4d7e;--coral-500:#e4779c;--coral-300:#f0aac0;--cream-50:#fff7fa;--cream-100:#fdeaf2;--cream-200:#f2d2df;--ink:#35232a;--muted:#78666d;--border:rgba(141,32,80,.13); }
body.is-app[data-theme="purple"] { --plum-950:#2d183e;--plum-900:#45245f;--plum-800:#59317a;--plum-700:#7145a5;--plum-600:#8e62bf;--coral-500:#b27ad2;--coral-300:#d1a7e7;--cream-50:#fcf8ff;--cream-100:#f3e8f8;--cream-200:#e2d0ec;--ink:#2e2533;--muted:#716578;--border:rgba(89,49,122,.14); }
body.is-app[data-theme="black"] { --plum-950:#111114;--plum-900:#202025;--plum-800:#303036;--plum-700:#42424a;--plum-600:#5d5d66;--coral-500:#7c7c86;--coral-300:#aaaab2;--cream-50:#f5f5f6;--cream-100:#e9e9eb;--cream-200:#d5d5d9;--ink:#1d1d21;--muted:#68686f;--border:rgba(32,32,37,.14); }
body.is-app[data-theme="blue"] { --plum-950:#102a43;--plum-900:#173f61;--plum-800:#1e527c;--plum-700:#28679d;--plum-600:#3b82b8;--coral-500:#5b9dcc;--coral-300:#92c3e3;--cream-50:#f7fbff;--cream-100:#e8f2ff;--cream-200:#d1e3f5;--ink:#21303c;--muted:#61717e;--border:rgba(30,82,124,.14); }
body.is-app[data-theme="green"] { --plum-950:#173b28;--plum-900:#20543a;--plum-800:#296849;--plum-700:#347a58;--plum-600:#49966f;--coral-500:#64ad85;--coral-300:#99caaa;--cream-50:#f7fcf8;--cream-100:#e9f6ec;--cream-200:#d1e8d6;--ink:#24342a;--muted:#65756a;--border:rgba(41,104,73,.14); }
body.is-app[data-theme="custom"] { --plum-950:color-mix(in srgb,var(--custom-theme,#7d2946) 34%,#130910);--plum-900:color-mix(in srgb,var(--custom-theme,#7d2946) 48%,#211019);--plum-800:color-mix(in srgb,var(--custom-theme,#7d2946) 64%,#2b1520);--plum-700:color-mix(in srgb,var(--custom-theme,#7d2946) 78%,#321824);--plum-600:color-mix(in srgb,var(--custom-theme,#7d2946) 82%,#fff);--coral-500:color-mix(in srgb,var(--custom-theme,#7d2946) 68%,#fff);--coral-300:color-mix(in srgb,var(--custom-theme,#7d2946) 38%,#fff);--cream-50:color-mix(in srgb,var(--custom-theme,#7d2946) 4%,#fff);--cream-100:color-mix(in srgb,var(--custom-theme,#7d2946) 9%,#fff);--cream-200:color-mix(in srgb,var(--custom-theme,#7d2946) 16%,#fff);--ink:color-mix(in srgb,var(--custom-theme,#7d2946) 18%,#202024);--muted:color-mix(in srgb,var(--custom-theme,#7d2946) 14%,#6d6870);--border:color-mix(in srgb,var(--custom-theme,#7d2946) 18%,transparent); }
body.is-app:not([data-theme="default"]) .site-header { background: color-mix(in srgb, var(--cream-50) 92%, transparent); }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; font-size: var(--app-root-font-size, 16px); }
html { --app-shell-exit-x: 0; --app-shell-enter-x: 0; }
html[data-nav-direction="forward"] { --app-shell-exit-x: -6px; --app-shell-enter-x: 6px; }
html[data-nav-direction="back"] { --app-shell-exit-x: 6px; --app-shell-enter-x: -6px; }
@keyframes app-shell-fallback { from { opacity: .32; } to { opacity: 1; } }
@keyframes app-shell-progress { from { transform: scaleX(.08); } 65% { transform: scaleX(.62); } to { transform: scaleX(.88); } }
html.is-shell-swapping .app-main { pointer-events: none; }
.app-main.is-shell-entering { animation: app-shell-fallback .2s cubic-bezier(.22,1,.36,1) both; }
html.is-shell-loading body.is-app::before { content: ''; position: fixed; z-index: 75; top: 77px; left: 0; width: 100%; height: 3px; transform: scaleX(.08); transform-origin: left center; background: linear-gradient(90deg, var(--coral-500), var(--plum-700)); box-shadow: 0 2px 12px color-mix(in srgb, var(--plum-700) 32%, transparent); animation: app-shell-progress 1.1s cubic-bezier(.22,1,.36,1) infinite alternate; }
@media (prefers-reduced-motion: reduce) { .app-main.is-shell-entering { animation-duration: .01ms; } }
body { margin: 0; color: var(--ink); background: var(--cream-50); font-family: var(--sans); font-size: 1rem; line-height: 1.6; -webkit-font-smoothing: antialiased; }
body.is-app { overflow-x: hidden; overflow-x: clip; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
button, .button { cursor: pointer; }
img { max-width: 100%; }
.skip-link { position: fixed; left: 1rem; top: -10rem; z-index: 1000; background: #fff; padding: .7rem 1rem; border-radius: .5rem; }
.skip-link:focus { top: 1rem; }

.site-header { width: 100%; min-height: 78px; padding: 0 clamp(1.25rem, 5vw, 5.5rem); display: flex; flex-wrap: nowrap; align-items: center; gap: clamp(.7rem, 1.5vw, 2rem); border-bottom: 1px solid var(--border); background: rgba(255, 250, 245, .92); backdrop-filter: blur(18px); position: sticky; top: 0; z-index: 50; }
.theme-picker { flex: 0 1 auto; min-width: 0; display: flex; flex-wrap: nowrap; align-items: center; justify-content: center; gap: .08rem; max-width: none; padding: 0; overflow: visible; border: 0; border-radius: 0; background: transparent; box-shadow: none; scrollbar-width: none; }
.theme-picker::-webkit-scrollbar { display: none; }
.theme-heart { flex: 0 0 29px; width: 29px; height: 31px; padding: 0; display: grid; place-items: center; border: 0; border-radius: 0; background: transparent; box-shadow: none; opacity: .58; font-size: 1.08rem; line-height: 1; transition: transform .16s ease, opacity .16s ease, filter .16s ease; }
.theme-heart:hover { opacity: .9; transform: translateY(-1px) scale(1.08); }
.theme-heart.is-active { background: transparent; box-shadow: none; opacity: 1; filter: drop-shadow(0 3px 3px rgba(45,22,31,.2)); transform: translateY(-1px) scale(1.15); }
.theme-custom-picker { position: relative; flex: 0 0 29px; width: 29px; height: 31px; display: grid; place-items: center; }
.theme-heart-custom { opacity: .9; }
.theme-spectrum-heart { display: block; width: 1em; height: 1em; background: conic-gradient(from 90deg,#ff3b30,#ffcc00,#34c759,#00c7be,#007aff,#af52de,#ff2d55,#ff3b30); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/%3E%3C/svg%3E") center/contain no-repeat; filter: drop-shadow(0 1px 1px rgba(45,22,31,.2)); }
.theme-color-popover { position: absolute; z-index: 95; top: calc(100% + .65rem); right: -.35rem; width: 218px; padding: .85rem; display: grid; justify-items: center; gap: .35rem; border: 1px solid var(--border); border-radius: 22px; color: var(--ink); background: color-mix(in srgb,var(--cream-50) 94%,transparent); box-shadow: 0 20px 50px rgba(45,22,31,.2); backdrop-filter: blur(20px) saturate(145%); -webkit-backdrop-filter: blur(20px) saturate(145%); }
.theme-color-popover[hidden] { display: none; }
.theme-color-popover strong { color: var(--plum-900); font-size: .76rem; }
.theme-color-popover small { color: var(--muted); font-size: .61rem; line-height: 1.35; text-align: center; }
.theme-color-wheel { position: relative; width: 178px; height: 178px; margin-top: .3rem; border: 5px solid #fff; border-radius: 50%; background: radial-gradient(circle,#fff 0%,rgba(255,255,255,.93) 8%,rgba(255,255,255,0) 72%),conic-gradient(from 90deg,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00); box-shadow: 0 8px 24px rgba(45,22,31,.18),inset 0 0 0 1px rgba(45,22,31,.1); touch-action: none; user-select: none; cursor: crosshair; }
.theme-color-wheel:focus-visible { outline: 3px solid color-mix(in srgb,var(--plum-700) 35%,transparent); outline-offset: 3px; }
.theme-color-cursor { position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; border: 3px solid #fff; border-radius: 50%; background: var(--picked-theme-color,#7d2946); box-shadow: 0 2px 8px rgba(0,0,0,.4); transform: translate(-50%,-50%); pointer-events: none; }
.theme-color-popover output { min-width: 82px; padding: .25rem .55rem; border-radius: 999px; color: var(--plum-900); background: var(--cream-100); font-size: .65rem; font-weight: 800; text-align: center; }
.brand { display: inline-flex; align-items: center; gap: .75rem; margin-right: auto; line-height: 1; }
.brand > span:last-child { display: grid; gap: 2px; }
.brand strong { font-family: var(--serif); font-size: 1.15rem; color: var(--plum-800); }
.brand small { text-transform: uppercase; letter-spacing: .22em; font-size: .62rem; color: var(--coral-500); font-weight: 700; }
.brand-mark { width: 42px; height: 42px; display: block; flex: 0 0 42px; border-radius: 12px; }
.public-nav, .app-nav { display: flex; align-items: center; gap: clamp(1rem, 2.5vw, 2rem); }
.app-nav { flex: 1 1 auto; min-width: 0; justify-content: center; gap: clamp(.7rem, 1.45vw, 1.6rem); }
.public-nav a, .app-nav a { color: #55484d; font-size: .92rem; font-weight: 600; position: relative; padding: 1.8rem 0; }
.public-nav a:hover, .app-nav a:hover, .app-nav a.is-active { color: var(--plum-700); }
.app-nav a.is-active::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; border-radius: 99px 99px 0 0; background: var(--coral-500); }
.header-actions { display: flex; align-items: center; gap: .7rem; }
.button { border: 0; border-radius: 999px; min-height: 44px; padding: .72rem 1.25rem; display: inline-flex; align-items: center; justify-content: center; gap: .6rem; font-weight: 700; line-height: 1; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
.button:hover { transform: translateY(-2px); }
.button-primary { background: linear-gradient(135deg, var(--plum-700), var(--plum-900)); color: #fff; box-shadow: 0 12px 25px rgba(125, 41, 70, .2); }
.button-secondary { background: var(--coral-500); color: #fff; }
.button-soft { background: var(--cream-100); color: var(--plum-700); border: 1px solid var(--cream-200); }
.button-light { color: var(--plum-900); background: #fff; box-shadow: 0 12px 30px rgba(31, 11, 19, .18); }
.button-ghost { border: 1px solid var(--border); background: rgba(255,255,255,.45); color: var(--plum-800); }
.button-large { min-height: 54px; padding: 1rem 1.65rem; }
.button-block { width: 100%; }
.text-link { color: var(--plum-700); font-weight: 700; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--coral-300); }
.text-link.centered { display: block; text-align: center; margin-top: 1.2rem; }
.eyebrow { color: var(--coral-500); font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; font-weight: 800; }

.public-main { overflow: hidden; }
.hero { min-height: min(790px, calc(100vh - 78px)); padding: clamp(4rem, 8vw, 7rem) clamp(1.25rem, 7vw, 8rem); display: grid; grid-template-columns: minmax(0, .95fr) minmax(380px, 1.05fr); align-items: center; gap: clamp(2rem, 7vw, 8rem); position: relative; }
.hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 85% 30%, rgba(236,125,92,.18), transparent 30%), radial-gradient(circle at 8% 95%, rgba(125,41,70,.09), transparent 30%); pointer-events: none; }
.hero-copy { position: relative; z-index: 2; }
.hero h1 { margin: 1rem 0 1.3rem; font-family: var(--serif); color: var(--plum-950); font-size: clamp(3rem, 5.4vw, 5.7rem); line-height: .98; letter-spacing: -.035em; }
.hero h1 em { color: var(--coral-500); font-weight: inherit; }
.hero-copy > p { max-width: 610px; color: var(--muted); font-size: clamp(1rem, 1.4vw, 1.18rem); }
.hero-actions { display: flex; align-items: center; gap: 1.35rem; margin: 2rem 0 1.4rem; }
.trust-row { display: flex; gap: 1.1rem; flex-wrap: wrap; color: #6f5c63; font-size: .78rem; font-weight: 600; }
.hero-visual { min-height: 510px; position: relative; display: grid; place-items: center; }
.hero-visual::before { content: ''; position: absolute; width: 380px; height: 380px; border-radius: 50%; background: linear-gradient(145deg, rgba(244,170,140,.4), rgba(125,41,70,.13)); filter: blur(.2px); }
.orbit { position: absolute; border: 1px dashed rgba(125,41,70,.25); border-radius: 50%; animation: orbit 40s linear infinite; }
.orbit-one { width: 465px; height: 465px; }
.orbit-two { width: 560px; height: 340px; animation-direction: reverse; }
@keyframes orbit { to { transform: rotate(360deg); } }
.moment-card { position: absolute; background: rgba(255,255,255,.92); border: 1px solid rgba(255,255,255,.9); box-shadow: var(--shadow-lg); border-radius: 24px; backdrop-filter: blur(16px); }
.moment-main { z-index: 3; width: min(450px, 86%); padding: 1.4rem; display: flex; gap: 1rem; align-items: center; transform: rotate(-2deg); }
.moment-date { min-width: 86px; aspect-ratio: 1; border-radius: 20px; display: grid; place-content: center; text-align: center; color: #fff; background: linear-gradient(145deg, var(--plum-700), var(--plum-900)); }
.moment-date strong { font-family: var(--serif); font-size: 2.1rem; line-height: 1; }
.moment-date span, .moment-card small { font-size: .7rem; letter-spacing: .04em; color: inherit; }
.moment-main h3 { margin: .2rem 0; color: var(--plum-900); font-family: var(--serif); font-size: 1.25rem; }
.moment-main p { margin: 0; font-size: .78rem; color: var(--muted); }
.moment-small { z-index: 4; padding: .8rem 1rem; display: flex; align-items: center; gap: .65rem; min-width: 235px; }
.moment-small small, .moment-small strong { display: block; }
.moment-small small { color: var(--muted); }
.moment-small strong { color: var(--plum-900); font-size: .85rem; }
.moment-top { top: 60px; right: 0; transform: rotate(3deg); }
.moment-bottom { bottom: 60px; left: 0; transform: rotate(-3deg); }
.mini-avatar, .channel-icon { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: var(--coral-500); font-weight: 800; }
.channel-icon { background: var(--green); }
.channel-icon.sms { background: var(--gold); }
.family-dots { position: absolute; bottom: 13px; right: 60px; display: flex; z-index: 3; }
.family-dots span { width: 38px; height: 38px; border: 3px solid var(--cream-50); margin-left: -8px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--plum-700); font-size: .72rem; font-weight: 700; }
.family-dots span:nth-child(2) { background: var(--coral-500); }.family-dots span:nth-child(3) { background: var(--green); }.family-dots span:nth-child(4) { background: var(--gold); }

.statement { padding: 7rem 1.5rem; text-align: center; background: var(--plum-950); color: #fff; position: relative; overflow: hidden; }
.statement::after { content: ''; position: absolute; width: 400px; height: 400px; right: -170px; top: -220px; border: 1px solid rgba(255,255,255,.13); border-radius: 50%; box-shadow: 0 0 0 50px rgba(255,255,255,.02), 0 0 0 100px rgba(255,255,255,.02); }
.statement p { color: var(--coral-300); text-transform: uppercase; letter-spacing: .2em; font-size: .72rem; font-weight: 800; }
.statement h2 { max-width: 900px; margin: .8rem auto 0; font-family: var(--serif); font-size: clamp(2.2rem, 4.2vw, 4.6rem); line-height: 1.1; }
.statement h2 span { color: var(--coral-300); }
.steps-section, .channel-section, .security-section { padding: clamp(5rem, 9vw, 9rem) clamp(1.25rem, 7vw, 8rem); }
.section-heading { max-width: 720px; margin: 0 auto 3.5rem; text-align: center; }
.section-heading h2, .channel-section h2, .security-card h2 { font-family: var(--serif); color: var(--plum-950); font-size: clamp(2.2rem, 3.4vw, 3.8rem); line-height: 1.12; margin: .7rem 0 1rem; }
.section-heading p, .channel-section p, .security-card p { color: var(--muted); }
.steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; max-width: 1250px; margin: auto; }
.steps-grid article { padding: 2rem; min-height: 320px; border: 1px solid var(--border); border-radius: var(--radius); background: rgba(255,255,255,.55); position: relative; transition: transform .25s ease, box-shadow .25s ease; }
.steps-grid article:hover { transform: translateY(-8px); box-shadow: var(--shadow-sm); }
.step-number { position: absolute; right: 1.5rem; top: 1.2rem; font-family: var(--serif); font-size: 2.5rem; color: rgba(125,41,70,.12); }
.feature-icon { width: 62px; height: 62px; border-radius: 20px; display: grid; place-items: center; background: var(--cream-100); color: var(--plum-700); font-size: 1.7rem; }
.steps-grid h3 { font-family: var(--serif); color: var(--plum-900); font-size: 1.45rem; margin: 2.1rem 0 .6rem; }
.steps-grid p { color: var(--muted); font-size: .93rem; }
.channel-section { background: #f8ecdf; display: grid; grid-template-columns: .85fr 1.15fr; gap: 7vw; align-items: center; }
.check-list { display: grid; gap: .75rem; padding: 0; list-style: none; margin-top: 2rem; }
.check-list li::before { content: '✓'; display: inline-grid; place-items: center; width: 24px; height: 24px; margin-right: .7rem; border-radius: 50%; background: rgba(69,138,114,.14); color: var(--green); font-weight: 800; }
.channel-flow { display: grid; gap: 0; }
.channel-flow article { background: #fff; padding: 1.25rem 1.4rem; border-radius: 18px; box-shadow: var(--shadow-sm); display: grid; grid-template-columns: 45px 1fr; align-items: center; column-gap: 1rem; }
.channel-flow article span { grid-row: 1 / 3; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: var(--plum-700); color: #fff; font-weight: 700; }
.channel-flow article strong { color: var(--plum-900); }.channel-flow article small { color: var(--muted); }
.channel-flow i { height: 32px; width: 2px; margin-left: 36px; background: repeating-linear-gradient(to bottom, var(--coral-500) 0 5px, transparent 5px 9px); }
.security-section { background: var(--cream-50); }
.security-card { max-width: 1080px; margin: auto; border-radius: 30px; padding: clamp(2rem, 5vw, 4rem); color: #fff; background: linear-gradient(135deg, var(--plum-900), var(--plum-950)); display: grid; grid-template-columns: 100px 1fr; gap: 2rem; align-items: start; }
.security-card h2 { color: #fff; }.security-card p { color: rgba(255,255,255,.7); }
.shield { width: 90px; height: 104px; display: grid; place-items: center; background: var(--coral-500); clip-path: polygon(50% 0, 94% 17%, 88% 70%, 50% 100%, 12% 70%, 6% 17%); font-size: 2rem; }
.security-points { max-width: 1000px; margin: 1.5rem auto 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: .8rem; }
.security-points span { padding: .9rem; text-align: center; border: 1px solid var(--border); border-radius: 14px; font-size: .82rem; font-weight: 600; }
.cta-section { padding: 7rem 1.5rem; text-align: center; color: #fff; background: linear-gradient(135deg, var(--coral-500), var(--plum-700)); }
.cta-section .eyebrow { color: #fff1e7; }.cta-section h2 { font-family: var(--serif); font-size: clamp(2.4rem, 4vw, 4.5rem); margin: .6rem auto; }.cta-section p { color: rgba(255,255,255,.8); margin-bottom: 2rem; }
.site-footer { padding: 4rem clamp(1.25rem, 7vw, 8rem) 2rem; background: var(--plum-950); color: rgba(255,255,255,.68); display: grid; grid-template-columns: 1.7fr repeat(3, 1fr); gap: 2rem; font-size: .82rem; }
.site-footer > div { display: flex; flex-direction: column; gap: .6rem; }.site-footer strong { color: #fff; }.site-footer a:hover { color: var(--coral-300); }
.site-footer .footer-login-link { width: fit-content; padding: .45rem .75rem; border: 1px solid rgba(255,255,255,.2); border-radius: 999px; color: #fff; background: rgba(255,255,255,.08); font-weight: 800; }
.site-footer .footer-login-link:hover { border-color: var(--coral-300); background: rgba(255,255,255,.13); }
.footer-brand { flex-direction: row !important; align-items: flex-start; }.footer-brand p { margin: .2rem 0; }.footer-note { grid-column: 1 / -1; border-top: 1px solid rgba(255,255,255,.1); padding-top: 1.5rem; }
.footer-whatsapp-line { grid-column: 1 / -1; display: grid !important; grid-template-columns: 40px minmax(0, 1fr); align-items: center; gap: .85rem !important; padding: 1rem 1.1rem; border: 1px solid rgba(255,255,255,.12); border-radius: 16px; background: rgba(255,255,255,.05); }
.footer-whatsapp-line .channel-icon { color: #fff; background: var(--green); }.footer-whatsapp-line p { margin: 0; display: grid; gap: .2rem; }.footer-whatsapp-line p > span { line-height: 1.55; }
.footer-support { grid-column: 1 / -1; display: grid !important; grid-template-columns: 92px minmax(0, 1fr); align-items: center; gap: 1rem !important; padding: 1.1rem; border: 1px solid rgba(255,255,255,.12); border-radius: 18px; background: rgba(255,255,255,.06); }
.footer-support img { width: 92px; max-height: 72px; object-fit: contain; padding: .35rem; border-radius: 10px; background: #fff; }
.footer-support p { margin: 0; display: grid; gap: .25rem; }.footer-support span { color: var(--coral-300); font-size: .68rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }.footer-support strong { line-height: 1.45; }

/* Public feature story */
.home-statement { padding-bottom: 5rem; }
.home-feature-ribbon { position: relative; z-index: 1; width: min(980px,100%); margin: 2.3rem auto 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; }
.home-feature-ribbon span { padding: .5rem .85rem; border: 1px solid rgba(255,255,255,.14); border-radius: 999px; color: rgba(255,255,255,.78); background: rgba(255,255,255,.06); font-size: .69rem; font-weight: 750; }
.home-steps { background: linear-gradient(180deg,var(--cream-50),#fff 48%,var(--cream-50)); }
.voice-showcase { position: relative; isolation: isolate; overflow: hidden; padding: clamp(5rem,9vw,8rem) clamp(1.25rem,7vw,8rem); display: grid; grid-template-columns: minmax(0,.9fr) minmax(430px,1.1fr); align-items: center; gap: clamp(3rem,8vw,8rem); color: #fff; background: radial-gradient(circle at 78% 22%,rgba(236,125,92,.24),transparent 28%),radial-gradient(circle at 7% 100%,rgba(244,170,140,.1),transparent 30%),linear-gradient(145deg,#351321,#52182f 58%,#351321); }
.voice-showcase::before { content: ''; position: absolute; z-index: -1; left: -110px; top: -130px; width: 330px; height: 330px; border: 1px solid rgba(255,255,255,.08); border-radius: 50%; box-shadow: 0 0 0 54px rgba(255,255,255,.015),0 0 0 108px rgba(255,255,255,.015); }
.voice-showcase-copy { position: relative; z-index: 3; }
.voice-showcase h2 { max-width: 690px; margin: .8rem 0 1rem; font-family: var(--serif); font-size: clamp(2.5rem,4vw,4.5rem); line-height: 1.06; letter-spacing: -.025em; }
.voice-showcase-copy > p:not(.voice-trust-note) { max-width: 670px; color: rgba(255,255,255,.7); }
.voice-benefits { margin: 2rem 0; display: grid; gap: .75rem; }
.voice-benefits article { display: grid; grid-template-columns: 42px minmax(0,1fr); align-items: center; gap: .8rem; }
.voice-benefits article > span { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid rgba(244,170,140,.25); border-radius: 14px; color: var(--coral-300); background: rgba(255,255,255,.06); font-family: var(--serif); font-size: .75rem; font-weight: 800; }
.voice-benefits strong,.voice-benefits small { display: block; }.voice-benefits strong { font-size: .88rem; }.voice-benefits small { margin-top: .05rem; color: rgba(255,255,255,.58); font-size: .7rem; }
.voice-trust-note { max-width: 680px; margin: 0 0 1.6rem; padding: .9rem 1rem; display: grid; grid-template-columns: 29px minmax(0,1fr); align-items: start; gap: .65rem; border: 1px solid rgba(255,255,255,.11); border-radius: 16px; color: rgba(255,255,255,.66); background: rgba(255,255,255,.055); font-size: .72rem; }
.voice-trust-note > span:first-child { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--green); font-weight: 900; }.voice-trust-note strong { display: block; margin-bottom: .1rem; color: #fff; }
.voice-showcase .button-light { box-shadow: 0 16px 38px rgba(15,3,9,.28); }
.voice-demo { position: relative; min-height: 650px; display: grid; place-items: center; }
.voice-demo::before { content: ''; position: absolute; width: min(540px,95%); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle,rgba(244,170,140,.28),rgba(236,125,92,.08) 48%,transparent 70%); filter: blur(2px); }
.voice-demo-orbit { position: absolute; border: 1px dashed rgba(255,255,255,.14); border-radius: 50%; animation: voice-orbit 36s linear infinite; }.voice-demo-orbit-one { width: 520px; height: 520px; }.voice-demo-orbit-two { width: 620px; height: 390px; animation-direction: reverse; }
@keyframes voice-orbit { to { transform: rotate(360deg); } }
.voice-phone { position: relative; z-index: 2; width: min(330px,74vw); min-height: 590px; padding: 1rem 1.2rem 1.4rem; overflow: hidden; border: 8px solid rgba(255,255,255,.85); border-radius: 46px; color: #fff; background: radial-gradient(circle at 50% 28%,rgba(236,125,92,.42),transparent 32%),linear-gradient(180deg,#401126,#1d0c15); box-shadow: 0 36px 80px rgba(17,3,10,.48),inset 0 0 0 1px rgba(255,255,255,.09); transform: rotate(2deg); }
.voice-phone::before { content: ''; position: absolute; left: 50%; top: .55rem; width: 82px; height: 20px; border-radius: 999px; background: rgba(13,5,9,.86); transform: translateX(-50%); }
.voice-phone-top { position: relative; z-index: 1; display: flex; justify-content: space-between; padding: .05rem .15rem; font-size: .58rem; font-weight: 800; }
.voice-call-state { padding-top: 3.25rem; display: grid; justify-items: center; text-align: center; }
.voice-call-label { color: var(--coral-300); font-size: .56rem; font-weight: 850; letter-spacing: .2em; }
.voice-call-avatar { position: relative; width: 104px; height: 104px; margin: 1.35rem 0 1rem; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.2); border-radius: 32px; background: linear-gradient(145deg,var(--coral-500),var(--plum-700)); box-shadow: 0 18px 34px rgba(13,3,8,.3); }
.voice-call-avatar::before,.voice-call-avatar::after { content: ''; position: absolute; inset: -12px; border: 1px solid rgba(244,170,140,.34); border-radius: 39px; animation: voice-pulse 2.2s ease-out infinite; }.voice-call-avatar::after { inset: -24px; border-radius: 48px; animation-delay: .55s; }
.voice-call-avatar span { font-family: var(--serif); font-size: 3.25rem; line-height: 1; transform: translateY(2px); }
@keyframes voice-pulse { 0% { opacity: 0; transform: scale(.84); } 35% { opacity: 1; } 100% { opacity: 0; transform: scale(1.09); } }
.voice-call-state h3 { margin: .2rem 0 0; font-family: var(--serif); font-size: 1.55rem; }.voice-call-state p { margin: .1rem 0; color: rgba(255,255,255,.55); font-size: .66rem; }
.voice-wave { height: 35px; margin: 1.3rem auto .7rem; display: flex; align-items: center; justify-content: center; gap: 4px; }
.voice-wave i { width: 3px; height: 8px; border-radius: 99px; background: var(--coral-300); animation: voice-wave 1s ease-in-out infinite alternate; }.voice-wave i:nth-child(2),.voice-wave i:nth-child(8){height:18px;animation-delay:-.7s}.voice-wave i:nth-child(3),.voice-wave i:nth-child(7){height:28px;animation-delay:-.3s}.voice-wave i:nth-child(4),.voice-wave i:nth-child(6){height:20px;animation-delay:-.85s}.voice-wave i:nth-child(5){height:34px;animation-delay:-.55s}
@keyframes voice-wave { to { transform: scaleY(.35); opacity: .55; } }
.voice-phone blockquote { min-height: 82px; margin: 0; padding: .8rem .9rem; border: 1px solid rgba(255,255,255,.1); border-radius: 18px; color: rgba(255,255,255,.72); background: rgba(255,255,255,.06); font-family: var(--serif); font-size: .73rem; line-height: 1.55; text-align: center; }
.voice-phone-actions { margin-top: 1.25rem; display: flex; align-items: flex-start; justify-content: space-around; }.voice-phone-actions > span { width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.12); border-radius: 50%; background: rgba(255,255,255,.1); font-size: 1.2rem; }.voice-phone-actions small { position: absolute; margin-top: 4.3rem; color: rgba(255,255,255,.48); font-size: .52rem; }.voice-phone-actions .voice-hangup { background: #c74955; transform: rotate(135deg); }.voice-phone-actions .voice-hangup small { transform: rotate(-135deg); }
.voice-demo-card { position: absolute; z-index: 4; min-width: 225px; padding: .85rem 1rem; display: flex; align-items: center; gap: .7rem; border: 1px solid rgba(255,255,255,.8); border-radius: 18px; color: var(--ink); background: rgba(255,255,255,.92); box-shadow: 0 20px 45px rgba(17,3,10,.28); backdrop-filter: blur(16px); }.voice-demo-card p { margin: 0; }.voice-demo-card strong,.voice-demo-card small { display: block; }.voice-demo-card strong { color: var(--plum-900); font-size: .76rem; }.voice-demo-card small { color: var(--muted); font-size: .61rem; }
.voice-demo-consent { right: -1rem; top: 92px; transform: rotate(3deg); }.voice-demo-consent > span { width: 37px; height: 37px; display: grid; place-items: center; flex: 0 0 37px; border-radius: 50%; color: #fff; background: var(--green); font-weight: 900; }
.voice-demo-date { left: -2rem; bottom: 95px; transform: rotate(-3deg); }.voice-demo-date > span { min-width: 46px; padding: .3rem; display: grid; border-radius: 12px; color: #fff; background: var(--coral-500); font-size: .5rem; line-height: 1; text-align: center; }.voice-demo-date b { font-family: var(--serif); font-size: 1.25rem; line-height: 1.1; }

.mascot-showcase { position: relative; padding: clamp(5rem,8vw,8rem) clamp(1.25rem,6vw,7rem) 3rem; display: grid; grid-template-columns: minmax(290px,.72fr) minmax(520px,1.28fr); gap: clamp(2rem,5vw,6rem); align-items: center; overflow: hidden; color: #fff; background: radial-gradient(circle at 82% 10%,rgba(244,170,140,.25),transparent 25%),linear-gradient(145deg,#351321 5%,#5f1e39 55%,#7d2946); }
.mascot-showcase::before { content: ''; position: absolute; left: -160px; top: -170px; width: 390px; height: 390px; border: 1px solid rgba(255,255,255,.08); border-radius: 50%; box-shadow: 0 0 0 56px rgba(255,255,255,.018),0 0 0 112px rgba(255,255,255,.014); }
.mascot-showcase-copy { position: relative; z-index: 3; }
.mascot-showcase .eyebrow { color: var(--coral-300); }
.mascot-showcase h2 { max-width: 620px; margin: .65rem 0 1.1rem; font-family: var(--serif); font-size: clamp(2.6rem,4.4vw,5rem); line-height: 1.02; letter-spacing: -.025em; }
.mascot-showcase-copy > p { max-width: 590px; color: rgba(255,255,255,.72); }
.mascot-benefits { margin: 1.5rem 0 1.8rem; padding: 0; display: grid; gap: .65rem; list-style: none; color: rgba(255,255,255,.84); font-size: .82rem; }
.mascot-benefits li { display: flex; gap: .65rem; align-items: center; }.mascot-benefits li::before { content: '✓'; width: 23px; height: 23px; flex: 0 0 23px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: rgba(244,170,140,.28); font-size: .7rem; font-weight: 900; }
.mascot-world { position: relative; z-index: 2; min-height: 570px; border: 1px solid rgba(255,255,255,.16); border-radius: 42px; overflow: hidden; background: radial-gradient(circle at 73% 18%,rgba(255,231,170,.42),transparent 12%),linear-gradient(180deg,#343659 0%,#66577c 52%,#d8a495 53%,#f0c8a4 78%,#493527 79%); box-shadow: inset 0 1px 0 rgba(255,255,255,.17),0 35px 80px rgba(21,5,12,.3); isolation: isolate; }
.mascot-world::before { content: ''; position: absolute; inset: 0; opacity: .48; background-image: radial-gradient(circle at 12% 18%,#fff 0 1px,transparent 2px),radial-gradient(circle at 30% 9%,#fff 0 1.5px,transparent 2.5px),radial-gradient(circle at 53% 20%,#fff 0 1px,transparent 2px),radial-gradient(circle at 88% 12%,#fff 0 1.5px,transparent 2.5px),radial-gradient(circle at 94% 33%,#fff 0 1px,transparent 2px); }
.mascot-world::after { content: ''; position: absolute; z-index: 0; left: 7%; right: 7%; bottom: 112px; height: 172px; border-radius: 28px 28px 0 0; opacity: .9; background: linear-gradient(90deg,rgba(64,37,50,.92) 0 18%,transparent 18% 22%,rgba(64,37,50,.92) 22% 78%,transparent 78% 82%,rgba(64,37,50,.92) 82%),linear-gradient(#f8d39b 0 64%,#684051 64%); box-shadow: 0 -14px 30px rgba(30,14,26,.1); }
.mascot-world-moon { position: absolute; z-index: 1; right: 10%; top: 8%; width: 82px; height: 82px; border-radius: 50%; background: #ffeab8; box-shadow: 0 0 52px rgba(255,227,161,.58); }
.mascot-world-cloud { position: absolute; z-index: 1; width: 96px; height: 24px; border-radius: 999px; opacity: .25; background: #fff; }.mascot-world-cloud::before,.mascot-world-cloud::after { content: ''; position: absolute; bottom: 0; border-radius: 50%; background: inherit; }.mascot-world-cloud::before { left: 17px; width: 42px; height: 42px; }.mascot-world-cloud::after { right: 12px; width: 31px; height: 31px; }.cloud-one { left: 8%; top: 13%; animation: public-cloud 8s ease-in-out infinite alternate; }.cloud-two { right: 28%; top: 29%; transform: scale(.7); animation: public-cloud 10s ease-in-out -4s infinite alternate-reverse; }
.mascot-speech-demo { position: absolute; z-index: 5; left: 50%; top: 5%; max-width: 270px; padding: .68rem .85rem; border-radius: 16px 16px 16px 5px; color: var(--plum-900); background: rgba(255,255,255,.94); box-shadow: 0 15px 35px rgba(45,19,32,.17); font-size: .7rem; font-weight: 800; transform: translateX(-50%); animation: public-bubble 3.4s ease-in-out infinite; }
.public-mascot { position: absolute; z-index: 4; bottom: 36px; width: 142px; display: grid; justify-items: center; filter: drop-shadow(0 13px 9px rgba(31,18,15,.22)); }
.public-mascot > span { width: 100%; aspect-ratio: 1; display: block; background-repeat: no-repeat; background-position: 0 0; }
.public-mascot strong { position: relative; z-index: 2; margin-top: -.2rem; padding: .28rem .58rem; border: 1px solid rgba(255,255,255,.45); border-radius: 999px; color: #fff; background: rgba(53,19,33,.68); box-shadow: 0 7px 18px rgba(25,10,17,.18); backdrop-filter: blur(9px); font-size: .62rem; }
.public-mascot-bear { left: 50%; bottom: 30px; width: 198px; transform: translateX(-50%); }.public-mascot-bear > span { background-image: url('images/mascot/ailece-teddy-v1.webp'); background-size: 1200% 600%; animation: public-mascot-12 2.8s steps(11,end) infinite; }
.public-mascot-bunny { left: 0; bottom: 44px; width: 153px; }.public-mascot-bunny > span { background-image: url('images/mascot/ailece-bunny-v1.webp'); background-size: 1000% 600%; animation: public-mascot-10 2.5s steps(9,end) -.7s infinite; }
.public-mascot-tanuki { left: 19%; bottom: 34px; width: 157px; }.public-mascot-tanuki > span { background-image: url('images/mascot/ailece-tanuki-v1.webp'); background-size: 1200% 600%; animation: public-mascot-12 2.8s steps(11,end) -1.5s infinite; }
.public-mascot-penguin { right: 18%; bottom: 34px; width: 160px; }.public-mascot-penguin > span { background-image: url('images/mascot/ailece-penguin-v1.webp'); background-size: 1200% 600%; animation: public-mascot-12 2.8s steps(11,end) -.9s infinite; }
.public-mascot-reindeer { right: 0; bottom: 45px; width: 153px; }.public-mascot-reindeer > span { background-image: url('images/mascot/ailece-reindeer-v1.webp'); background-size: 1200% 600%; animation: public-mascot-12 2.8s steps(11,end) -2s infinite; }
.mascot-world-ground { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; height: 90px; background: linear-gradient(#88a76e,#587747 14%,#3b5a36 15%,#284226); box-shadow: inset 0 7px 18px rgba(255,255,255,.13); }.mascot-world-ground::before { content: ''; position: absolute; inset: 4px 0 auto; height: 12px; background: radial-gradient(ellipse at center,#d8e6a4 0 30%,transparent 33%) 0 0/34px 13px repeat-x; opacity: .45; }.mascot-world-ground i { position: absolute; bottom: 14px; width: 7px; height: 28px; border-radius: 99px 99px 0 0; background: #79945f; transform-origin: bottom; }.mascot-world-ground i:nth-child(1){left:12%;transform:rotate(-15deg)}.mascot-world-ground i:nth-child(2){left:72%;height:34px;transform:rotate(12deg)}.mascot-world-ground i:nth-child(3){right:8%;height:22px;transform:rotate(-9deg)}
.mascot-roster { position: relative; z-index: 2; grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: center; gap: .55rem; }.mascot-roster span { padding: .5rem .8rem; border: 1px solid rgba(255,255,255,.13); border-radius: 999px; color: rgba(255,255,255,.78); background: rgba(255,255,255,.06); font-size: .67rem; font-weight: 750; }
.mascot-public-credits { position: relative; z-index: 2; grid-column: 1 / -1; max-width: 900px; margin: .2rem auto 0; color: rgba(255,255,255,.52); font-size: .57rem; text-align: center; }.mascot-public-credits summary { width: max-content; margin: auto; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }.mascot-public-credits p { margin: .55rem 0 0; }.mascot-public-credits a { color: var(--coral-300); text-decoration: underline; }
@keyframes public-mascot-12 { from { background-position: 0 0; } to { background-position: 100% 0; } }
@keyframes public-mascot-10 { from { background-position: 0 0; } to { background-position: 100% 0; } }
@keyframes public-cloud { from { transform: translateX(-8px); } to { transform: translateX(18px); } }
@keyframes public-bubble { 0%,100% { transform: translate(-50%,0); } 50% { transform: translate(-50%,-5px); } }

.shopping-showcase { padding: clamp(5rem,9vw,9rem) clamp(1.25rem,7vw,8rem); display: grid; grid-template-columns: minmax(0,.85fr) minmax(430px,1.15fr); gap: clamp(3rem,8vw,8rem); align-items: center; background: linear-gradient(160deg,#fffaf5,#f7e8dc); }
.shopping-showcase h2 { max-width: 680px; margin: .7rem 0 1rem; color: var(--plum-950); font-family: var(--serif); font-size: clamp(2.5rem,4vw,4.6rem); line-height: 1.05; }
.shopping-showcase-copy > p { color: var(--muted); }
.shopping-points { margin: 1.8rem 0; display: grid; gap: .6rem; }.shopping-points span { display: grid; grid-template-columns: 38px 1fr; align-items: center; gap: .65rem; color: var(--plum-900); font-size: .78rem; font-weight: 800; }.shopping-points b { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--plum-700); font-size: .59rem; }
.privacy-note { padding: .8rem .9rem; display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; border: 1px solid rgba(69,138,114,.16); border-radius: 14px; color: #356c59 !important; background: rgba(69,138,114,.08); font-size: .68rem; }.privacy-note > span { color: var(--green); }.privacy-note strong { color: #285746; }
.shopping-demo { position: relative; max-width: 680px; margin: auto; padding: 1.15rem; border: 1px solid rgba(125,41,70,.15); border-radius: 34px; background: rgba(255,255,255,.9); box-shadow: 0 35px 80px rgba(94,44,50,.16),inset 0 1px 0 #fff; transform: rotate(1deg); }
.shopping-demo::before { content: ''; position: absolute; z-index: -1; inset: 24px -22px -20px 28px; border-radius: 34px; background: rgba(125,41,70,.08); transform: rotate(-3deg); }
.shopping-demo-top { padding: .2rem .25rem .8rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; color: var(--muted); font-size: .62rem; }.shopping-demo-top span { color: #2c745b; font-weight: 850; text-transform: uppercase; letter-spacing: .08em; }.shopping-demo-top i { width: 7px; height: 7px; display: inline-block; border-radius: 50%; background: #39a67c; box-shadow: 0 0 0 4px rgba(57,166,124,.13); animation: public-live 1.6s ease-in-out infinite; }
.shopping-demo-person { padding: 1rem; display: grid; grid-template-columns: 46px 1fr auto; align-items: center; gap: .75rem; border-radius: 19px; color: #fff; background: linear-gradient(135deg,var(--plum-700),var(--plum-950)); }.shopping-demo-person p { margin: 0; }.shopping-demo-person strong,.shopping-demo-person small { display: block; }.shopping-demo-person small { color: rgba(255,255,255,.62); font-size: .63rem; }.shopping-demo-person > b { padding: .32rem .55rem; border-radius: 999px; background: rgba(255,255,255,.12); font-size: .6rem; }
.shopping-demo-list { margin: .8rem 0; display: grid; gap: .42rem; }.shopping-demo-list article { min-width: 0; padding: .72rem .75rem; display: grid; grid-template-columns: 32px minmax(0,1fr) auto; align-items: center; gap: .65rem; border: 1px solid var(--border); border-radius: 15px; background: #fff; }.shopping-demo-list article > span { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 10px; font-weight: 900; }.shopping-demo-check { color: #2f765d; background: #e5f4ed; }.shopping-demo-wait { color: #80581d; background: #fff1d8; }.shopping-demo-list p { min-width: 0; margin: 0; }.shopping-demo-list p strong,.shopping-demo-list p > small { display: block; }.shopping-demo-list p strong { color: var(--plum-900); font-size: .76rem; }.shopping-demo-list p strong small { display: inline; color: var(--muted); font-weight: 600; }.shopping-demo-list p > small { overflow: hidden; color: var(--muted); font-size: .59rem; text-overflow: ellipsis; white-space: nowrap; }.shopping-demo-list article > b { color: #2f765d; font-size: .57rem; white-space: nowrap; }.shopping-demo-list article:nth-child(2) > b { color: #80581d; }
.shopping-demo-add { padding: .55rem; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .6rem; border: 1px dashed rgba(125,41,70,.22); border-radius: 15px; background: var(--cream-50); }.shopping-demo-add span { padding-left: .45rem; color: #9b8d92; font-size: .68rem; }.shopping-demo-add button { min-height: 36px; padding: .55rem .75rem; border: 0; border-radius: 999px; color: #fff; background: var(--plum-700); font-size: .63rem; font-weight: 800; pointer-events: none; }
.shopping-demo-history { margin-top: .7rem; padding: .7rem .8rem; display: grid; grid-template-columns: 30px minmax(0,1fr); gap: .65rem; align-items: center; border-radius: 14px; background: repeating-linear-gradient(to bottom,#fffdf8 0,#fffdf8 22px,#e9dfd4 23px); }.shopping-demo-history p { margin: 0; }.shopping-demo-history strong,.shopping-demo-history small { display: block; }.shopping-demo-history strong { color: var(--plum-900); font-family: var(--serif); }.shopping-demo-history small { color: var(--muted); font-size: .58rem; }
@keyframes public-live { 0%,100% { opacity: .45; } 50% { opacity: 1; } }

.atmosphere-showcase { padding: clamp(5rem,9vw,8rem) clamp(1.25rem,6vw,7rem); background: #fff; }
.atmosphere-showcase-grid { max-width: 1320px; margin: auto; display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: .8rem; }
.public-weather { padding: .45rem .45rem 1rem; display: grid; gap: .12rem; border: 1px solid var(--border); border-radius: 22px; overflow: hidden; background: var(--cream-50); box-shadow: var(--shadow-sm); transition: transform .22s ease,box-shadow .22s ease; }.public-weather:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }.public-weather > div { position: relative; height: 190px; overflow: hidden; border-radius: 17px; }.public-weather > strong,.public-weather > small { padding: 0 .6rem; }.public-weather > strong { margin-top: .65rem; color: var(--plum-900); font-family: var(--serif); font-size: 1.1rem; }.public-weather > small { color: var(--muted); font-size: .63rem; }.public-weather div > span { position: absolute; z-index: 2; left: 50%; top: 50%; font-size: 3.4rem; transform: translate(-50%,-50%); filter: drop-shadow(0 8px 10px rgba(34,34,55,.14)); }.public-weather i { position: absolute; z-index: 1; left: 18%; top: -20px; }
.public-weather-snow > div { background: linear-gradient(145deg,#9cc2dd,#eff8ff); }.public-weather-snow i { width: 7px; height: 7px; border-radius: 50%; background: #fff; box-shadow: 0 0 5px #81a9c4; animation: public-snow 3.5s linear infinite; }.public-weather-snow i:nth-of-type(2){left:58%;animation-delay:-1.2s;animation-duration:4.2s}.public-weather-snow i:nth-of-type(3){left:83%;animation-delay:-2.5s;animation-duration:3s}
.public-weather-rain > div { background: linear-gradient(145deg,#758da4,#c7d8e4); }.public-weather-rain i { width: 2px; height: 30px; background: linear-gradient(transparent,#4c7394); transform: rotate(14deg); animation: public-rain 1.35s linear infinite; }.public-weather-rain i:nth-of-type(2){left:54%;animation-delay:-.4s}.public-weather-rain i:nth-of-type(3){left:85%;animation-delay:-.9s}
.public-weather-wind > div { background: linear-gradient(145deg,#97b9a3,#e5efd0); }.public-weather-wind i { left: -35px; top: 24%; width: 33px; height: 4px; border-radius: 999px; background: rgba(255,255,255,.58); animation: public-wind 3.2s ease-in-out infinite; }.public-weather-wind i:nth-of-type(2){top:56%;animation-delay:-1.1s;animation-duration:4s}.public-weather-wind i:nth-of-type(3){top:77%;animation-delay:-2.2s;animation-duration:2.7s}
.public-weather-night > div { background: linear-gradient(145deg,#141e39,#3f527b); }.public-weather-night div > span { color: #ffe8a6; }.public-weather-night i { top: 18%; width: 4px; height: 4px; border-radius: 50%; background: #fff; box-shadow: 0 0 8px #fff; animation: public-star 1.7s ease-in-out infinite alternate; }.public-weather-night i:nth-of-type(2){left:68%;top:28%;animation-delay:-.8s}.public-weather-night i:nth-of-type(3){left:82%;top:72%;animation-delay:-1.3s}
.public-weather-sun > div { background: linear-gradient(145deg,#a9dbf5,#ffedb2); }.public-weather-sun div > span { color: #e6a526; animation: public-sun 3.5s ease-in-out infinite alternate; }.public-weather-sun i { left: -35%; top: 68%; width: 72px; height: 23px; border-radius: 999px; background: rgba(255,255,255,.58); animation: public-cloud-pass 7s linear infinite; }.public-weather-sun i::before { content: ''; position: absolute; left: 14px; bottom: 0; width: 34px; height: 34px; border-radius: 50%; background: inherit; }.public-weather-sun i:nth-of-type(2){top:25%;animation-delay:-4s;transform:scale(.7)}.public-weather-sun i:nth-of-type(3){display:none}
@keyframes public-snow { to { transform: translate(15px,230px) rotate(180deg); } }
@keyframes public-rain { to { transform: translate(-34px,240px) rotate(14deg); } }
@keyframes public-wind { 45%,55% { opacity: 1; } to { left: 110%; transform: rotate(8deg); } }
@keyframes public-star { to { opacity: .2; transform: scale(.65); } }
@keyframes public-sun { to { transform: translate(-50%,-50%) scale(1.08) rotate(9deg); } }
@keyframes public-cloud-pass { to { left: 115%; } }

.feature-mosaic-section { padding: clamp(5rem,9vw,8rem) clamp(1.25rem,7vw,8rem); background: linear-gradient(180deg,var(--cream-100),var(--cream-50)); }
.feature-mosaic { max-width: 1180px; margin: auto; display: grid; grid-template-columns: repeat(3,1fr); gap: 1rem; }.feature-mosaic article { min-height: 260px; padding: 1.5rem; display: flex; flex-direction: column; align-items: flex-start; border: 1px solid var(--border); border-radius: 25px; background: rgba(255,255,255,.75); box-shadow: var(--shadow-sm); }.feature-mosaic h3 { margin: auto 0 .35rem; color: var(--plum-900); font-family: var(--serif); font-size: 1.3rem; }.feature-mosaic p { margin: 0; color: var(--muted); font-size: .77rem; }.feature-mosaic-large { grid-column: 1 / -1; min-height: 230px !important; display: grid !important; grid-template-columns: 70px minmax(0,1fr) auto; align-items: center !important; gap: 1.2rem; color: #fff; background: radial-gradient(circle at 85% 0,rgba(244,170,140,.27),transparent 28%),linear-gradient(135deg,var(--plum-900),var(--plum-950)) !important; }.feature-mosaic-large h3 { margin: 0; color: #fff; font-size: clamp(1.8rem,3vw,3rem); }.feature-mosaic-large p { max-width: 650px; color: rgba(255,255,255,.68); }.mosaic-icon { width: 58px; height: 58px; display: grid; place-items: center; border-radius: 19px; color: var(--plum-700); background: var(--cream-100); font-family: var(--serif); font-size: 1.6rem; font-weight: 800; }.feature-mosaic-large .mosaic-icon { color: #fff; background: rgba(255,255,255,.11); }.install-pill { padding: .65rem .9rem; border: 1px solid rgba(255,255,255,.2); border-radius: 999px; color: #fff; background: rgba(255,255,255,.08); font-size: .67rem; font-weight: 800; white-space: nowrap; }
.home-channel-section { background: #f8ecdf; }

.app-main { width: min(1480px, 100%); margin: auto; padding: 2.3rem clamp(1rem, 3vw, 3rem) 5rem; }
.profile-menu { position: relative; flex: 0 0 auto; }.profile-menu summary { list-style: none; display: flex; align-items: center; gap: .55rem; cursor: pointer; font-weight: 600; font-size: .85rem; }.profile-menu summary::-webkit-details-marker { display: none; }
.profile-menu > div { position: absolute; right: 0; top: calc(100% + .8rem); min-width: 170px; padding: .55rem; border: 1px solid var(--border); border-radius: 14px; background: #fff; box-shadow: var(--shadow-lg); }
.profile-menu a, .profile-menu button { width: 100%; display: block; border: 0; background: transparent; padding: .65rem .75rem; text-align: left; border-radius: 9px; color: var(--ink); }.profile-menu a:hover, .profile-menu button:hover { background: var(--cream-100); }
.avatar { width: 36px; height: 36px; border-radius: 50%; display: inline-grid; place-items: center; background: linear-gradient(145deg, var(--coral-500), var(--plum-700)); color: #fff; font-weight: 700; }
.avatar-large { width: 52px; height: 52px; font-size: 1.15rem; }
.mobile-app-nav { display: none; }
.app-install-banner { position: fixed; z-index: 80; right: 1rem; bottom: 1rem; width: min(560px, calc(100% - 2rem)); display: grid; grid-template-columns: 58px minmax(0, 1fr) auto 34px; align-items: center; gap: .9rem; padding: .85rem; border: 1px solid rgba(255,255,255,.72); border-radius: 20px; color: #fff; background: rgba(53,19,33,.96); box-shadow: 0 22px 55px rgba(35,8,20,.3); backdrop-filter: blur(18px); }
.app-install-banner[hidden] { display: none; }
.app-install-banner img { width: 58px; height: 58px; border-radius: 16px; box-shadow: 0 8px 20px rgba(0,0,0,.2); }
.app-install-copy { min-width: 0; display: grid; line-height: 1.3; }
.app-install-copy .eyebrow { color: var(--coral-300); font-size: .58rem; }
.app-install-copy strong { overflow: hidden; color: #fff; font-family: var(--serif); font-size: 1rem; text-overflow: ellipsis; white-space: nowrap; }
.app-install-copy small { color: rgba(255,255,255,.72); font-size: .68rem; }
.app-install-banner .button { min-height: 42px; padding: .65rem .9rem; white-space: nowrap; }
.app-install-dismiss { width: 32px; height: 32px; border: 0; border-radius: 50%; color: rgba(255,255,255,.8); background: rgba(255,255,255,.1); font-size: 1.1rem; }
.app-install-dismiss:hover { background: rgba(255,255,255,.18); }
.dashboard-hero { padding: 1rem 0 2rem; display: flex; align-items: end; justify-content: space-between; gap: 1rem; }
.new-moment-button { flex: 0 0 auto; min-width: max-content; margin-left: auto; white-space: nowrap; }
.dashboard-hero h1 { margin: .3rem 0 .1rem; font-family: var(--serif); color: var(--plum-950); font-size: clamp(2.2rem, 3.5vw, 3.6rem); }.dashboard-hero p { margin: 0; color: var(--muted); }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.stats-grid article { min-height: 112px; padding: 1rem; display: flex; align-items: center; gap: .9rem; background: #fff; border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--shadow-sm); }
.dashboard-stats-after { margin-top: 1rem; }
.stats-grid article div { margin-right: auto; }.stats-grid strong { display: block; color: var(--plum-900); font-size: 1.5rem; line-height: 1.1; }.stats-grid small { color: var(--muted); }.stats-grid a { color: var(--plum-600); font-weight: 700; }
.stat-icon { width: 48px; height: 48px; border-radius: 16px; display: grid; place-items: center; font-size: 1.25rem; }.stat-icon.coral { color: var(--coral-500); background: #fff0e9; }.stat-icon.gold { color: var(--gold); background: #fff4dc; }.stat-icon.green { color: var(--green); background: #eaf6f0; }.stat-icon.plum { color: var(--plum-700); background: #f5e9ef; }
.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(280px, .65fr); gap: 1rem; margin-top: 1rem; }.panel { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 1.4rem; box-shadow: var(--shadow-sm); }.panel-heading { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1rem; }.panel-heading h2 { font-family: var(--serif); color: var(--plum-900); margin: .1rem 0 0; font-size: 1.55rem; }.panel-heading a { color: var(--plum-600); font-size: .82rem; font-weight: 700; }
.timeline { display: grid; }.timeline article { display: grid; grid-template-columns: 58px 1fr 28px; gap: 1rem; align-items: center; padding: 1rem 0; border-top: 1px solid var(--border); }.timeline time { width: 56px; height: 62px; border-radius: 14px; display: grid; place-content: center; text-align: center; background: var(--cream-100); color: var(--plum-800); }.timeline time strong { font-family: var(--serif); font-size: 1.5rem; line-height: 1; }.timeline time span { font-size: .65rem; text-transform: uppercase; }.timeline h3 { margin: .15rem 0; color: var(--plum-900); }.timeline p { margin: 0; color: var(--muted); font-size: .8rem; }.event-type { color: var(--coral-500); text-transform: uppercase; font-size: .65rem; letter-spacing: .1em; font-weight: 800; }.timeline article > a { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--cream-100); color: var(--plum-700); font-size: 1.3rem; }
.family-glance hr { border: 0; border-top: 1px solid var(--border); margin: 1.3rem 0; }.avatar-cloud { display: flex; flex-wrap: wrap; margin: .5rem 0; }.avatar-cloud span { width: 46px; height: 46px; margin: 0 -5px 5px 0; border: 3px solid #fff; border-radius: 50%; display: grid; place-items: center; color: #fff; background: var(--plum-700); font-weight: 700; }.avatar-cloud span:nth-child(2n) { background: var(--coral-500); }.avatar-cloud span:nth-child(3n) { background: var(--green); }.family-glance > p { color: var(--muted); font-size: .85rem; }.channel-status { display: flex; align-items: center; gap: .7rem; margin-top: .9rem; }.channel-status .channel-icon { width: 36px; height: 36px; font-size: .8rem; }.channel-status div { margin-right: auto; }.channel-status strong, .channel-status small { display: block; }.channel-status strong { font-size: .82rem; }.channel-status small { color: var(--muted); font-size: .7rem; }.channel-status i { width: 8px; height: 8px; border-radius: 50%; background: #c8c0c2; }.channel-status i.online { background: var(--green); box-shadow: 0 0 0 4px rgba(69,138,114,.13); }
.empty-state { padding: 3rem 1rem; text-align: center; color: var(--muted); }.empty-state > span { font-size: 2.5rem; color: var(--coral-500); }.empty-state h3 { color: var(--plum-900); margin-bottom: .4rem; }

.page-heading { min-height: 155px; padding: .8rem 0 2rem; display: flex; align-items: end; justify-content: space-between; gap: 1.5rem; }
.page-heading h1 { margin: .25rem 0; color: var(--plum-950); font-family: var(--serif); font-size: clamp(2.2rem, 4vw, 3.8rem); line-height: 1.06; }
.page-heading p, .muted { margin: 0; color: var(--muted); }
.back-link { display: inline-flex; align-items: center; gap: .42rem; margin-bottom: .6rem; color: var(--plum-600); font-size: .8rem; font-weight: 800; }
.back-link::before { content: ''; width: .48rem; height: .48rem; flex: 0 0 auto; border: solid currentColor; border-width: 0 0 2px 2px; transform: rotate(45deg); }
.people-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(245px, 1fr)); gap: 1rem; }
.compact-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.person-card { min-width: 0; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow-sm); transition: transform .22s ease, box-shadow .22s ease; }
.person-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.person-cover { min-height: 122px; display: grid; place-items: center; background: linear-gradient(145deg, #f7cfbd, #a64463); }
.person-cover.cover-2 { background: linear-gradient(145deg, #cce6d9, #397964); }.person-cover.cover-3 { background: linear-gradient(145deg, #f5dfb1, #c18334); }.person-cover.cover-4 { background: linear-gradient(145deg, #e2cbd7, #68233d); }
.person-cover span { width: 72px; height: 72px; display: grid; place-items: center; border: 3px solid rgba(255,255,255,.72); border-radius: 50%; color: #fff; background: rgba(53,19,33,.25); font-family: var(--serif); font-size: 2.2rem; }
.person-body { padding: 1.25rem; }.person-body h2 { margin: .25rem 0; color: var(--plum-900); font-family: var(--serif); font-size: 1.45rem; }.person-body > p { margin: 0 0 1rem; color: var(--muted); font-size: .8rem; }
.relation-label { color: var(--coral-500); font-size: .67rem; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.person-meta { display: grid; gap: .35rem; padding-top: .8rem; border-top: 1px solid var(--border); color: var(--muted); font-size: .72rem; }
.private-person-card { opacity: .82; }.private-person-card .person-cover { filter: grayscale(.55); }
.shared-preferences, .social-profile-list { display: grid; gap: .3rem; margin-top: .7rem; padding: .7rem; border-radius: 12px; color: var(--muted); background: var(--cream-100); font-size: .68rem; overflow-wrap: anywhere; }
.social-profile-list { background: #fff; border: 1px solid var(--border); }
.family-people-grid { grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 1rem; align-items: start; }
.family-person-card { border-radius: 20px; box-shadow: 0 9px 26px rgba(65,22,39,.07); }
.family-person-card:hover { transform: translateY(-2px); box-shadow: 0 15px 34px rgba(65,22,39,.11); }
.family-person-card[open] { grid-column: span 2; border-color: color-mix(in srgb, var(--plum-700) 24%, var(--border)); box-shadow: 0 18px 42px rgba(65,22,39,.12); }
.person-summary { min-height: 92px; padding: .9rem 1rem; display: grid; grid-template-columns: 58px minmax(0, 1fr) 32px; align-items: center; gap: .9rem; list-style: none; cursor: pointer; background: linear-gradient(135deg, color-mix(in srgb, var(--cream-100) 68%, #fff), #fff 76%); }
.person-summary::-webkit-details-marker { display: none; }
.person-avatar { width: 58px; height: 58px; display: grid; place-items: center; border: 2px solid rgba(255,255,255,.78); border-radius: 18px; color: #fff; background: linear-gradient(145deg, #f7cfbd, #a64463); box-shadow: 0 8px 18px rgba(86,32,52,.16); font-family: var(--serif); font-size: 1.5rem; }
.person-avatar.cover-2 { background: linear-gradient(145deg, #cce6d9, #397964); }.person-avatar.cover-3 { background: linear-gradient(145deg, #f5dfb1, #c18334); }.person-avatar.cover-4 { background: linear-gradient(145deg, #e2cbd7, #68233d); }
.person-summary-copy { min-width: 0; display: grid; line-height: 1.3; }.person-summary-copy strong { overflow: hidden; color: var(--plum-900); font-family: var(--serif); font-size: 1.16rem; text-overflow: ellipsis; white-space: nowrap; }.person-summary-copy small { margin-top: .22rem; overflow: hidden; color: var(--muted); font-size: .7rem; text-overflow: ellipsis; white-space: nowrap; }
.person-expand { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; color: var(--plum-700); background: var(--cream-100); font-size: 1.15rem; }.person-expand::before { content: '+'; }.family-person-card[open] .person-expand::before { content: '−'; }.family-person-card[open] .person-summary { padding: 1rem 1.2rem; border-bottom: 1px solid var(--border); }
.person-details { padding: 1.3rem 1.45rem 1.5rem; display: grid; gap: 1rem; background: linear-gradient(180deg, #fff, color-mix(in srgb, var(--cream-50) 72%, #fff)); }.person-details > p { margin: 0; color: var(--muted); font-size: .8rem; }.person-details .person-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; padding: 1rem; border: 1px solid var(--border); border-radius: 15px; background: #fff; }.person-details .shared-preferences, .person-details .social-profile-list { margin: 0; padding: 1rem; border-radius: 15px; }.person-details .card-actions { margin-top: 0; padding-top: .15rem; }
.card-actions { display: flex; align-items: center; gap: .5rem; margin-top: 1rem; }.card-actions .button { flex: 1; }.card-actions form { margin: 0; }
.icon-button { width: 38px; height: 38px; flex: 0 0 auto; display: inline-grid; place-items: center; border: 1px solid var(--border); border-radius: 50%; color: var(--plum-700); background: #fff; font-size: 1.25rem; }
.icon-button:hover { border-color: var(--coral-500); background: var(--cream-100); }.icon-button.danger { color: #a13443; }
.relation-panel { margin-top: 1rem; }.relation-list { display: flex; flex-wrap: wrap; gap: .6rem; }.relation-list > span { padding: .65rem .85rem; display: flex; align-items: center; gap: .2rem; border-radius: 999px; background: var(--cream-100); color: var(--muted); font-size: .76rem; }.relation-list i { margin: 0 .35rem; color: var(--coral-500); font-style: normal; }.relation-list form { margin-left: .35rem; }.relation-list button { width: 22px; height: 22px; border: 0; border-radius: 50%; color: #a13443; background: #fff; }.relation-form { display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: .6rem; margin-top: 1rem; }.friends-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 1rem; align-items: start; }.friends-layout > aside { position: sticky; top: 98px; }

.editor-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 1rem; align-items: start; }.editor-grid > .form-panel { grid-column: 1; }.editor-aside { grid-column: 2; grid-row: 1 / span 8; }
.form-panel { padding: clamp(1.2rem, 3vw, 2rem); }.form-section-heading { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; }.form-section-heading > span:first-child:not(.avatar) { width: 45px; height: 45px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--plum-700); font-family: var(--serif); font-weight: 700; }.form-section-heading h2 { margin: 0; color: var(--plum-900); font-family: var(--serif); }.form-section-heading p { margin: .15rem 0 0; color: var(--muted); font-size: .78rem; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }.form-grid label { display: grid; gap: .4rem; color: var(--plum-900); font-size: .78rem; font-weight: 700; }.form-grid .full { grid-column: 1 / -1; }
.switch-row { min-height: 68px; padding: .8rem; grid-template-columns: auto 1fr !important; align-items: center; border: 1px solid var(--border); border-radius: 14px; background: var(--cream-50); }.switch-row input, .permission-cards input { width: 20px; height: 20px; accent-color: var(--plum-700); }.switch-row strong, .switch-row small { display: block; }.switch-row small { color: var(--muted); font-weight: 400; }
.permission-cards { display: grid; gap: .7rem; margin-bottom: 1rem; }.permission-cards > label { display: grid; grid-template-columns: 24px 46px 1fr; gap: .75rem; align-items: center; padding: .8rem; border: 1px solid var(--border); border-radius: 15px; cursor: pointer; }.permission-cards strong, .permission-cards small { display: block; }.permission-cards small { color: var(--muted); font-size: .7rem; font-weight: 400; }
.managed-profile-choice { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border); }.managed-profile-panel { margin-top: .75rem; padding: 1rem; border: 1px solid color-mix(in srgb,var(--coral-500) 35%,var(--border)); border-radius: 15px; background: color-mix(in srgb,var(--cream-100) 65%,#fff); }.managed-profile-panel > strong { color: var(--plum-900); font-family: var(--serif); }.managed-profile-panel > p { margin: .25rem 0 .8rem; color: var(--muted); font-size: .72rem; }.managed-guardian-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(180px,1fr)); gap: .55rem; }.managed-guardian-grid label { display: grid; grid-template-columns: 20px 38px minmax(0,1fr); align-items: center; gap: .55rem; padding: .65rem; border: 1px solid var(--border); border-radius: 13px; background: #fff; cursor: pointer; }.managed-guardian-grid input { width: 18px; height: 18px; accent-color: var(--plum-700); }.managed-guardian-grid .avatar { width: 36px; height: 36px; }.managed-guardian-grid strong,.managed-guardian-grid small { display: block; overflow-wrap: anywhere; }.managed-guardian-grid small,[data-managed-phone] > small { color: var(--muted); font-size: .65rem; font-weight: 400; }.managed-profile-warning { color: #8d2f3e !important; font-weight: 700; }.managed-profile-badge { display: inline-flex; width: max-content; margin-top: .18rem; padding: .16rem .42rem; border-radius: 999px; color: var(--plum-700); background: var(--cream-100); font-size: .58rem; font-weight: 900; letter-spacing: .04em; }
.whatsapp-line-note { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: .75rem; align-items: center; margin: 0 0 1rem; padding: .85rem; border: 1px solid rgba(69,138,114,.22); border-radius: 14px; color: var(--ink); background: rgba(69,138,114,.08); }.whatsapp-line-note .channel-icon { color: #fff; background: var(--green); }.whatsapp-line-note strong, .whatsapp-line-note small { display: block; }.whatsapp-line-note small { margin-top: .2rem; color: var(--muted); font-size: .7rem; }
.channel-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; color: #fff; background: #2c9d68; font-weight: 800; }.channel-icon.sms { background: var(--plum-700); }.channel-icon.emergency { background: #b63c4c; }.channel-icon.payment { background: var(--gold); }
.channel-choice { display: grid; gap: .45rem; color: var(--plum-900); font-size: .78rem; font-weight: 700; }.channel-choice small { color: var(--muted); font-weight: 400; }
.push-permission-card { display: grid; grid-template-columns: 42px minmax(0,1fr) auto; align-items: center; gap: .7rem; margin-bottom: .8rem; padding: .85rem; border: 1px solid color-mix(in srgb, var(--plum-700) 18%, var(--border)); border-radius: 16px; background: linear-gradient(145deg, color-mix(in srgb, var(--cream-100) 68%, #fff), #fff); }
.push-device-icon { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 13px; color: #fff; background: linear-gradient(145deg, var(--coral-500), var(--plum-700)); font-size: 1.15rem; font-weight: 800; box-shadow: 0 8px 18px rgba(86,32,52,.14); }
.push-permission-copy { min-width: 0; display: grid; gap: .12rem; }.push-permission-copy strong { color: var(--plum-900); font-size: .8rem; }.push-permission-copy small { color: var(--muted); font-size: .66rem; line-height: 1.4; }
.push-permission-actions { display: grid; gap: .35rem; }.push-permission-card .button { min-height: 38px; padding: .55rem .7rem; font-size: .68rem; white-space: nowrap; }.push-permission-card.is-active { border-color: color-mix(in srgb, var(--green) 42%, var(--border)); background: #f2faf6; }.push-permission-card.is-active .push-device-icon { background: var(--green); }
.push-permission-card.is-busy { opacity: .75; }.push-permission-card.is-error { border-color: rgba(161,52,67,.35); background: #fff6f6; }.push-permission-card.is-denied { border-color: rgba(161,52,67,.35); }
.push-ios-note { grid-column: 1 / -1; color: var(--muted); font-size: .61rem; line-height: 1.4; }
.sticky-card { position: sticky; top: 98px; }.sticky-card h2 { color: var(--plum-900); font-family: var(--serif); }.sticky-card p { color: var(--muted); font-size: .82rem; }.button-block { width: 100%; margin-top: .6rem; }
.danger-link { width: 100%; padding: .75rem; border: 0; color: #a13443; background: transparent; font-size: .78rem; font-weight: 800; }.danger-link:hover { text-decoration: underline; }.archive-form { max-width: calc(100% - 336px); margin: 1rem 0 0; text-align: center; }
.recipient-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(185px, 1fr)); gap: .65rem; }.recipient-grid label { display: flex; align-items: center; gap: .6rem; padding: .65rem; border: 1px solid var(--border); border-radius: 14px; cursor: pointer; }.recipient-grid input { accent-color: var(--plum-700); }.recipient-grid .avatar { width: 38px; height: 38px; }.recipient-grid strong, .recipient-grid small { display: block; }.recipient-grid small { color: var(--muted); font-size: .68rem; }
.recipient-grid label[aria-disabled="true"] { cursor: not-allowed; opacity: .58; background: var(--cream-50); }.recipient-grid label[aria-disabled="true"] input { cursor: not-allowed; }

.calendar-list { display: grid; gap: .75rem; }.calendar-list article { display: grid; grid-template-columns: 78px 10px minmax(0, 1fr) auto 42px; gap: 1rem; align-items: center; padding: 1rem 1.2rem; border: 1px solid var(--border); border-radius: 18px; background: #fff; box-shadow: var(--shadow-sm); }.calendar-list time { text-align: center; color: var(--plum-700); }.calendar-list time strong { display: block; font-family: var(--serif); font-size: 2rem; line-height: 1; }.calendar-list time span { color: var(--muted); font-size: .62rem; }.event-dot { width: 9px; height: 52px; border-radius: 9px; background: var(--coral-500); }.event-dot.birthday { background: var(--gold); }.event-dot.anniversary { background: var(--plum-600); }.event-dot.meeting { background: var(--green); }.event-copy h2 { margin: .1rem 0; color: var(--plum-900); font-family: var(--serif); }.event-copy p { margin: 0; color: var(--muted); font-size: .75rem; }.event-badges { display: flex; gap: .4rem; }.event-badges span { padding: .35rem .55rem; border-radius: 999px; background: var(--cream-100); color: var(--muted); font-size: .65rem; font-weight: 700; }

.table-panel { padding: 0; overflow: hidden; }.table-scroll { overflow-x: auto; }.data-table { width: 100%; border-collapse: collapse; white-space: nowrap; }.data-table th { padding: .85rem 1rem; color: var(--muted); background: var(--cream-100); font-size: .67rem; letter-spacing: .08em; text-align: left; text-transform: uppercase; }.data-table td { padding: 1rem; border-top: 1px solid var(--border); font-size: .78rem; }.data-table td strong, .data-table td small { display: block; }.data-table td small { color: var(--muted); font-size: .65rem; }
.status, .channel-pill { display: inline-flex; align-items: center; padding: .3rem .55rem; border-radius: 999px; background: #eee9eb; color: #594b50; font-size: .64rem; font-weight: 800; }.status-sent, .status-processing { color: #355d85; background: #e8f1fa; }.status-delivered, .status-active, .status-completed { color: #25604c; background: #e5f4ed; }.status-read { color: #5c3f87; background: #f0eafb; }.status-failed, .status-cancelled, .status-expired, .status-paused { color: #8d2f3e; background: #fbe7e9; }.status-pending, .status-retry, .status-trial { color: #78541f; background: #fff1d8; }.channel-pill.whatsapp, .channel-pill.whatsapp_sms_fallback { color: #25604c; background: #e5f4ed; }.channel-pill.sms { color: #5c3f87; background: #f0eafb; }.channel-pill.push { color: #355d85; background: #e8f1fa; }
.inline-test-form { display: flex; gap: .6rem; }.inline-test-form .field { min-width: 220px; }.delivery-legend { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1rem; color: var(--muted); font-size: .7rem; }.delivery-legend span { display: flex; align-items: center; gap: .4rem; }.delivery-legend i { width: 8px; height: 8px; border-radius: 50%; }.delivery-legend .status-sent { background: #4f82b6; }.delivery-legend .status-delivered { background: var(--green); }.delivery-legend .status-read { background: #7653a3; }.delivery-legend .status-failed { background: #b63c4c; }
.emergency-panel { margin-bottom: 1rem; display: grid; grid-template-columns: minmax(220px, .48fr) minmax(0, 1fr); gap: 1.2rem; align-items: start; border-color: rgba(182,60,76,.25); background: linear-gradient(135deg, #fff, #fff4f2); }.emergency-panel h2 { margin: .25rem 0; color: #8d2f3e; font-family: var(--serif); }.emergency-panel p { margin: 0; color: var(--muted); font-size: .76rem; }.emergency-intro { position: sticky; top: 98px; }.emergency-compose { display: grid !important; grid-template-columns: 1fr !important; gap: .85rem !important; }.emergency-panel textarea { min-height: 88px; resize: vertical; }
.emergency-field { min-width: 0; display: grid; gap: .45rem; margin: 0; padding: 0; border: 0; }.emergency-label { color: var(--plum-900); font-size: .74rem; font-weight: 800; }.emergency-label small { color: var(--muted); font-size: .64rem; font-weight: 500; }.emergency-tags, .emergency-recipient-tags, .emergency-recipient-actions { display: flex; flex-wrap: wrap; gap: .45rem; }.emergency-tag, .emergency-recipient-tag { min-height: 34px; padding: .45rem .7rem; display: inline-flex; align-items: center; gap: .4rem; border: 1px solid rgba(125,41,70,.16); border-radius: 999px; color: var(--plum-700); background: #fff; font-size: .67rem; font-weight: 800; cursor: pointer; }.emergency-tag:hover, .emergency-tag.is-active, .emergency-recipient-tag:has(input:checked) { border-color: rgba(182,60,76,.42); color: #8d2f3e; background: #fdeced; }.emergency-recipient-tag input { width: 16px; min-width: 16px; height: 16px; margin: 0; accent-color: #a73748; }.emergency-location-tag.is-active { color: #25604c; border-color: rgba(37,96,76,.28); background: #e5f4ed; }.emergency-location-status, .emergency-help { align-self: center; color: var(--muted); font-size: .64rem; line-height: 1.45; }.emergency-empty { padding: .7rem; border-radius: 12px; background: #fff; }.hold-submit { --hold-progress: 0%; position: relative; min-width: 0; width: 100%; padding-inline: clamp(.45rem, 2.5vw, 1.25rem); overflow: hidden; isolation: isolate; user-select: none; touch-action: none; }.hold-submit::before { content: ''; position: absolute; z-index: -1; inset: 0 auto 0 0; width: var(--hold-progress); background: linear-gradient(90deg, #d95c65, #e98373); transition: width .06s linear; }.hold-submit.is-holding { transform: none; box-shadow: 0 0 0 4px rgba(182,60,76,.14); }.hold-submit > span { position: relative; z-index: 1; max-width: 100%; overflow: hidden; font-size: clamp(.9rem, 3.8vw, 1em); text-overflow: clip; white-space: nowrap; }.hold-submit:disabled { opacity: .5; cursor: not-allowed; }

.settings-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, .55fr); gap: 1rem; align-items: start; }.provider-panel h2 { margin: .35rem 0 1.2rem; color: var(--plum-900); font-family: var(--serif); }.provider-row { display: flex; align-items: center; gap: .75rem; padding: .85rem 0; border-top: 1px solid var(--border); }.provider-row div { margin-right: auto; }.provider-row strong, .provider-row small { display: block; }.provider-row small { color: var(--muted); font-size: .68rem; }.provider-row i { width: 9px; height: 9px; border-radius: 50%; background: #c9c0c3; }.provider-row i.online { background: var(--green); box-shadow: 0 0 0 4px rgba(69,138,114,.13); }.provider-note { margin-top: 1rem; padding: .8rem; border-radius: 12px; color: var(--muted); background: var(--cream-100); font-size: .7rem; }

.profile-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(310px, .48fr); gap: 1rem; align-items: start; }
.profile-main-stack, .profile-side-stack, .friend-form-stack { display: grid; gap: 1rem; }
.profile-side-stack { position: sticky; top: 96px; }
.profile-side-stack h2, .appearance-panel h2 { margin: .3rem 0 1rem; color: var(--plum-900); font-family: var(--serif); }
.profile-side-stack > .panel > p { color: var(--muted); font-size: .76rem; }
.privacy-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.privacy-grid .switch-row { margin: 0; }
.field-note { display: block; color: var(--muted); font-size: .68rem; font-weight: 400; }
.compact-permissions > label { grid-template-columns: 22px 40px 1fr; padding: .65rem; }
.appearance-panel > label { display: grid; grid-template-columns: 1fr auto; gap: .5rem; margin-top: 1rem; color: var(--plum-900); font-size: .76rem; font-weight: 800; }
.appearance-panel input[type="range"] { grid-column: 1 / -1; width: 100%; accent-color: var(--plum-700); }
.appearance-panel output { color: var(--coral-500); }
.range-labels { display: flex; justify-content: space-between; color: var(--muted); font-size: .65rem; }
.nav-icon-set-picker { margin: 1.35rem 0 0; padding: 1rem 0 0; border: 0; border-top: 1px solid var(--border); }
.nav-icon-set-picker legend { padding: 0; color: var(--plum-900); font-size: .78rem; font-weight: 800; }
.nav-icon-set-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; margin-top: .75rem; }
.nav-icon-set-option { position: relative; min-width: 0; padding: .7rem; display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: .45rem .55rem; align-items: start; border: 1px solid var(--border); border-radius: 13px; background: var(--cream-50); cursor: pointer; }
.nav-icon-set-option:has(input:checked) { border-color: var(--plum-700); background: var(--cream-100); box-shadow: 0 0 0 2px color-mix(in srgb, var(--plum-700) 12%, transparent); }
.nav-icon-set-option input { width: 17px; height: 17px; margin: .1rem 0 0; accent-color: var(--plum-700); }
.nav-icon-set-option strong, .nav-icon-set-option small { display: block; }.nav-icon-set-option strong { color: var(--plum-900); font-size: .74rem; }.nav-icon-set-option small { margin-top: .1rem; color: var(--muted); font-size: .6rem; }
.icon-set-preview { grid-column: 1 / -1; display: flex; align-items: center; gap: .35rem; color: var(--plum-700); }
.icon-set-preview i { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 8px; font-style: normal; font-size: .9rem; line-height: 1; }
.icon-preview-rounded .icon-set-preview i { border-radius: 50%; background: color-mix(in srgb, var(--plum-700) 10%, #fff); }
.icon-preview-bold .icon-set-preview i { font-weight: 900; transform: scale(1.06); }
.icon-preview-duotone .icon-set-preview i { color: #fff; background: linear-gradient(145deg, var(--coral-500), var(--plum-700)); }
.icon-preview-emoji .icon-set-preview i { font-size: 1rem; }
.profile-autosave-status { position: sticky; z-index: 61; bottom: 1rem; width: max-content; max-width: 100%; margin: 1rem 0 0 auto; padding: 0; display: block; border: 0; border-radius: 0; color: var(--muted); text-align: center; background: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; pointer-events: none; }
.profile-autosave-status strong { color: #171317; font-size: .76rem; line-height: 1.35; }
.profile-autosave-status.is-saving strong { color: var(--plum-700); }
.profile-autosave-status.is-saved strong { color: var(--green); }
.profile-autosave-status.is-error strong { color: #a13443; }

.profile-install-panel { display:grid; gap:.8rem; }
.profile-install-panel h2 { margin-bottom:0; }
.profile-install-card { padding:.85rem; display:grid; grid-template-columns:54px minmax(0,1fr); gap:.75rem; align-items:center; border:1px solid var(--border); border-radius:16px; background:linear-gradient(145deg,var(--cream-50),var(--cream-100)); }
.profile-install-card > img { width:54px; height:54px; display:block; border-radius:15px; box-shadow:0 7px 16px rgba(45,29,35,.1); }
.profile-install-copy strong,.profile-install-copy small { display:block; }
.profile-install-copy strong { color:var(--plum-900); font-family:var(--serif); font-size:1rem; line-height:1.2; }
.profile-install-copy small { margin-top:.18rem; color:var(--muted); font-size:.62rem; line-height:1.42; }
.profile-install-card .button { grid-column:1 / -1; margin-top:.1rem; }

.mascot-settings-panel { display: grid; gap: .85rem; }
.mascot-settings-panel h2 { margin-bottom: 0; }
.mascot-settings-panel > label:not(.switch-row) { display: grid; gap: .35rem; color: var(--plum-900); font-size: .74rem; font-weight: 800; }
.mascot-settings-intro { padding: .8rem; display: grid; grid-template-columns: 58px minmax(0,1fr); gap: .8rem; align-items: center; border: 1px solid var(--border); border-radius: 16px; background: linear-gradient(145deg,var(--cream-50),var(--cream-100)); }
.mascot-settings-intro p { margin: 0; }.mascot-settings-intro strong,.mascot-settings-intro small { display: block; }.mascot-settings-intro strong { color: var(--plum-900); font-family: var(--serif); font-size: 1.08rem; }.mascot-settings-intro small { margin-top: .15rem; color: var(--muted); font-size: .62rem; line-height: 1.4; }
.mascot-profile-preview { width: 52px; height: 56px; display: block; border-radius: 18px; background-color: color-mix(in srgb,var(--cream-100) 74%,#fff); background-image: url('images/mascot/maodie.webp'); background-repeat: no-repeat; background-size: 800% 1100%; background-position: 0 0; box-shadow: inset 0 0 0 1px color-mix(in srgb,var(--coral-500) 18%,transparent),0 7px 16px rgba(45,29,35,.08); }
.mascot-profile-preview[data-mascot-type="bird"] { background-color:transparent; background-image:url('images/mascot/ailece-bird-v2.png'); background-size:400% 200%; background-position:0 0; mix-blend-mode:normal; }
.mascot-profile-preview[data-mascot-type="pixelcat"] { border-radius:0; background-color:transparent; background-image:url('images/mascot/ailece-cat-pixel-v1.png'); background-size:700% 800%; background-position:0 0; box-shadow:none; image-rendering:pixelated; mix-blend-mode:normal; }
.mascot-profile-preview[data-mascot-type="bear"] { border-radius:0; background-color:transparent; background-image:url('images/mascot/ailece-teddy-v1.webp'); background-size:1200% 600%; background-position:0 0; box-shadow:none; mix-blend-mode:normal; }
.mascot-profile-preview[data-mascot-type="bunny"] { border-radius:0; background-color:transparent; background-image:url('images/mascot/ailece-bunny-v1.webp'); background-size:1000% 600%; background-position:0 0; box-shadow:none; mix-blend-mode:normal; }
.mascot-profile-preview[data-mascot-type="penguin"] { border-radius:0; background-color:transparent; background-image:url('images/mascot/ailece-penguin-v1.webp'); background-size:1200% 600%; background-position:0 0; box-shadow:none; mix-blend-mode:normal; }
.mascot-profile-preview[data-mascot-type="ducky"] { border-radius:0; background-color:transparent; background-image:url('images/mascot/ailece-ducky-v1.webp'); background-size:1200% 600%; background-position:0 0; box-shadow:none; mix-blend-mode:normal; }
.mascot-profile-preview[data-mascot-type="tanuki"] { border-radius:0; background-color:transparent; background-image:url('images/mascot/ailece-tanuki-v1.webp'); background-size:1200% 600%; background-position:0 0; box-shadow:none; mix-blend-mode:normal; }
.mascot-profile-preview[data-mascot-type="chicken"] { border-radius:0; background-color:transparent; background-image:url('images/mascot/ailece-chicken-v1.webp'); background-size:1200% 600%; background-position:0 0; box-shadow:none; mix-blend-mode:normal; }
.mascot-profile-preview[data-mascot-type="reindeer"] { border-radius:0; background-color:transparent; background-image:url('images/mascot/ailece-reindeer-v1.webp'); background-size:1200% 600%; background-position:0 0; box-shadow:none; mix-blend-mode:normal; }
.mascot-profile-preview[data-mascot-type="skeleton"] { border-radius:0; background-color:transparent; background-image:url('images/mascot/ailece-skeleton-v1.webp'); background-size:1200% 600%; background-position:0 0; box-shadow:none; mix-blend-mode:normal; }
.mascot-profile-preview[data-mascot-type="zombie"] { border-radius:0; background-color:transparent; background-image:url('images/mascot/ailece-zombie-v1.webp'); background-size:1200% 600%; background-position:0 0; box-shadow:none; mix-blend-mode:normal; }
.mascot-profile-preview[data-mascot-type="chillboy"] { border-radius:0; background-color:transparent; background-image:url('images/mascot/ailece-chillboy-v1.webp'); background-size:1200% 600%; background-position:0 0; box-shadow:none; mix-blend-mode:normal; }
.mascot-profile-preview[data-mascot-type="pixelcat"][data-mascot-color="purple"] { filter:hue-rotate(32deg) saturate(1.08); }.mascot-profile-preview[data-mascot-type="pixelcat"][data-mascot-color="gray"] { filter:grayscale(.78) saturate(.55); }.mascot-profile-preview[data-mascot-type="pixelcat"][data-mascot-color="teal"] { filter:hue-rotate(-45deg) saturate(1.05); }.mascot-profile-preview[data-mascot-type="pixelcat"][data-mascot-color="ginger"] { filter:hue-rotate(158deg) saturate(1.16); }
.mascot-enabled-row { margin: 0; }
.mascot-type-picker { margin:0; padding:0; border:0; }.mascot-type-picker legend { margin-bottom:.35rem; color:var(--plum-900); font-size:.74rem; font-weight:800; }.mascot-type-picker > div { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.45rem; }.mascot-type-picker label { position:relative; cursor:pointer; }.mascot-type-picker input { position:absolute; opacity:0; pointer-events:none; }.mascot-type-picker label > span { min-height:72px; padding:.5rem .42rem; display:grid; grid-template-columns:25px minmax(0,1fr); grid-template-rows:auto auto; column-gap:.35rem; align-items:center; border:1px solid var(--border); border-radius:13px; background:var(--cream-50); transition:border-color .18s ease,background .18s ease,transform .18s ease; }.mascot-type-picker b { grid-row:1 / 3; font-size:1rem; }.mascot-type-picker strong { align-self:end; color:var(--plum-900); font-size:.63rem; line-height:1.1; }.mascot-type-picker small { align-self:start; color:var(--muted); font-size:.48rem; line-height:1.2; }.mascot-type-picker input:checked + span { border-color:color-mix(in srgb,var(--coral-500) 64%,var(--border)); background:color-mix(in srgb,var(--cream-100) 68%,#fff); box-shadow:0 6px 15px rgba(58,34,49,.08); }.mascot-type-picker input:focus-visible + span { outline:2px solid var(--coral-500); outline-offset:2px; }
.mascot-choice-picker { margin:0; padding:0; border:0; }.mascot-choice-picker legend { margin-bottom:.35rem; color:var(--plum-900); font-size:.74rem; font-weight:800; }.mascot-choice-picker > div { display:grid; gap:.45rem; }.mascot-size-picker > div { grid-template-columns:repeat(3,1fr); }.mascot-choice-picker label { position:relative; cursor:pointer; }.mascot-choice-picker input { position:absolute; opacity:0; pointer-events:none; }.mascot-size-picker label > span { min-height:38px; display:grid; place-items:center; border:1px solid var(--border); border-radius:11px; color:var(--muted); background:var(--cream-50); font-size:.62rem; font-weight:800; }.mascot-size-picker input:checked + span { border-color:var(--coral-500); color:var(--plum-900); background:var(--cream-100); box-shadow:0 5px 12px rgba(58,34,49,.07); }.mascot-choice-picker input:focus-visible + span { outline:2px solid var(--coral-500); outline-offset:2px; }
.mascot-color-picker > div { grid-template-columns:repeat(5,1fr); }.mascot-color-picker label { min-width:0; display:grid; place-items:center; gap:.2rem; }.mascot-color-picker small { color:var(--muted); font-size:.45rem; white-space:nowrap; }.mascot-color-dot { width:29px; height:29px; display:block; border:2px solid #fff; border-radius:50%; background:#252942; box-shadow:0 0 0 1px var(--border),0 4px 8px rgba(42,28,34,.12); }.mascot-color-purple { background:#65406f; }.mascot-color-gray { background:#73747b; }.mascot-color-teal { background:#227d7a; }.mascot-color-ginger { background:#c9793e; }.mascot-color-picker input:checked + .mascot-color-dot { box-shadow:0 0 0 2px var(--coral-500),0 5px 10px rgba(42,28,34,.16); transform:scale(1.06); }
.mascot-character-note { padding: .7rem; display: grid; grid-template-columns: 30px minmax(0,1fr); gap: .65rem; align-items: center; border: 1px solid var(--border); border-radius: 13px; background: var(--cream-50); }.mascot-character-note > span { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: var(--cream-100); }.mascot-character-note p { margin: 0; }.mascot-character-note strong,.mascot-character-note small { display: block; }.mascot-character-note strong { color: var(--plum-900); font-size: .72rem; }.mascot-character-note small { margin-top: .1rem; color: var(--muted); font-size: .59rem; line-height: 1.4; }
.mascot-settings-note { padding: .65rem .7rem; border-radius: 11px; color: var(--muted); background: var(--cream-100); font-size: .6rem; line-height: 1.45; }
.mascot-license { color: var(--muted); font-size: .52rem; line-height: 1.45; }.mascot-license a { color: var(--plum-700); text-decoration: underline; text-underline-offset: 2px; }

.app-mascot { --mascot-x:calc(100vw - 92px); --mascot-bottom:0px; --mascot-walk-duration:4s; --mascot-step-duration:.58s; position:fixed; z-index:59; left:0; bottom:var(--mascot-bottom); width:78px; height:84px; display:block; transform:translate3d(var(--mascot-x),0,0); transition:transform var(--mascot-walk-duration) linear; touch-action:none; user-select:none; -webkit-user-select:none; -webkit-tap-highlight-color:transparent; cursor:grab; contain:layout style paint; background:transparent; }
.app-mascot[data-mascot-enabled="0"] { display:none; }.app-mascot.is-dragging { transition:none; cursor:grabbing; }.app-mascot:focus,.app-mascot:focus-visible,.app-mascot:focus-within,.app-mascot:active { outline:0 !important; box-shadow:none !important; background:transparent !important; }.app-mascot,.app-mascot * { -webkit-tap-highlight-color:transparent; }
.mascot-stage { position:absolute; inset:0; display:block; transform:translate3d(0,6px,0) scale(.7); transform-origin:50% 100%; transition:transform .22s cubic-bezier(.22,1,.36,1); }
.mascot-sprite { --sprite-y:0%; width:100%; height:100%; display:block; background-image:url('images/mascot/maodie.webp'); background-repeat:no-repeat; background-size:800% 1100%; background-position:0 var(--sprite-y); filter:drop-shadow(0 8px 7px rgba(42,28,34,.18)); mix-blend-mode:multiply; animation:maodie-7 3.2s steps(6,end) infinite; will-change:background-position; }
.mascot-speech { position:absolute; left:var(--mascot-speech-left,50%); bottom:79px; box-sizing:border-box; width:max-content; min-width:min(76px,calc(100vw - 24px)); max-width:min(280px,calc(100vw - 24px)); padding:.38rem .55rem; border:1px solid var(--border); border-radius:12px 12px 12px 4px; color:var(--plum-900); background:rgba(255,255,255,.96); box-shadow:var(--shadow-sm); font-size:.62rem; font-weight:800; line-height:1.25; text-align:center; white-space:normal; overflow-wrap:anywhere; opacity:0; transform:translate(-50%,7px) scale(.9); transition:opacity .16s ease; pointer-events:none; }.app-mascot.is-speaking .mascot-speech { opacity:1; transform:translate(-50%,0) scale(1); }
.mascot-reaction-heart { position:absolute; z-index:2; left:49px; top:-2px; color:var(--coral-500); font-size:1.25rem; opacity:0; pointer-events:none; }.app-mascot[data-mascot-reaction="heart"] .mascot-reaction-heart { animation:mascot-heart-pop 1.1s ease-out both; }
.mascot-sleep-marks { position:absolute; z-index:2; left:62px; top:0; color:var(--plum-700); opacity:0; pointer-events:none; }.mascot-sleep-marks i { position:absolute; font-family:var(--serif); font-style:normal; font-weight:900; }.mascot-sleep-marks i:first-child { top:12px; left:0; font-size:.7rem; }.mascot-sleep-marks i:last-child { top:0; left:8px; font-size:1rem; }.app-mascot[data-mascot-state="sleep"] .mascot-sleep-marks { opacity:1; animation:mascot-zzz 1.8s ease-in-out infinite; }
.app-mascot[data-mascot-state="walk"] .mascot-stage { transform:translate3d(0,21px,0) scale(1); }
.app-mascot[data-mascot-state="walk"] .mascot-sprite { --sprite-y:10%; animation:maodie-8 var(--mascot-step-duration) steps(7,end) infinite; }
.app-mascot.is-facing-left[data-mascot-state="walk"] .mascot-sprite { --sprite-y:20%; }
.app-mascot[data-mascot-state="wave"] .mascot-sprite { --sprite-y:30%; animation:maodie-4 .88s steps(3,end) 2 both; }
.app-mascot[data-mascot-state="jump"] .mascot-sprite { --sprite-y:40%; animation:maodie-5 .82s steps(4,end) 1 both; }
.app-mascot[data-mascot-state="groom"] .mascot-sprite { --sprite-y:50%; animation:maodie-5 2.7s steps(4,end) infinite alternate; }
.app-mascot[data-mascot-state="sleep-enter"] .mascot-stage,.app-mascot[data-mascot-state="sleep"] .mascot-stage { transform:translate3d(0,10px,0) scale(.7); }
.app-mascot[data-mascot-state="sleep-enter"] .mascot-sprite { --sprite-y:50%; background-position:28.571% var(--sprite-y); animation:none; }
.app-mascot[data-mascot-state="sleep"] .mascot-sprite { --sprite-y:50%; background-position:42.857% var(--sprite-y); animation:none; }
.app-mascot[data-mascot-state="waiting"] .mascot-sprite { --sprite-y:60%; animation:maodie-6 1.3s steps(5,end) 1 both; }
.app-mascot[data-mascot-state="scratch"] .mascot-sprite { --sprite-y:80%; animation:maodie-6 1.65s steps(5,end) infinite alternate; }
.app-mascot[data-mascot-state="look"] .mascot-sprite { --sprite-y:90%; animation:maodie-8 2.1s steps(7,end) 1 alternate both; }
.app-mascot[data-mascot-type="bird"] { --bird-y:20px; --bird-flight-duration:1.4s; top:0; bottom:auto; width:72px; height:72px; transform:translate3d(var(--mascot-x),var(--bird-y),0); transition:transform var(--bird-flight-duration) cubic-bezier(.4,.05,.2,1); cursor:pointer; contain:layout style; }
.app-mascot[data-mascot-type="bird"].is-positioning,.app-mascot[data-mascot-type="bird"].is-dragging { transition:none; }
.app-mascot[data-mascot-type="bird"] .mascot-stage { transform:scale(.76); transform-origin:50% 72%; mix-blend-mode:multiply; }
.app-mascot[data-mascot-type="bird"] .mascot-sprite { background-image:url('images/mascot/ailece-bird-v2.png'); background-size:400% 200%; background-position:0 0; filter:drop-shadow(0 7px 6px rgba(42,28,34,.18)); mix-blend-mode:normal; animation:none; }
.app-mascot[data-mascot-type="bird"].is-facing-left .mascot-sprite { transform:scaleX(-1); }
.app-mascot[data-mascot-type="bird"] .mascot-sleep-marks { display:none; }
.app-mascot[data-mascot-type="bird"] .mascot-speech { bottom:67px; }
.app-mascot[data-mascot-type="bird"][data-mascot-state="bird-perch"] .mascot-sprite { background-position:0 0; }
.app-mascot[data-mascot-type="bird"][data-mascot-state="bird-look"] .mascot-sprite { background-position:33.333% 0; animation:bird-look 1.6s ease-in-out 1 both; }
.app-mascot[data-mascot-type="bird"][data-mascot-state="bird-wings"] .mascot-sprite { background-position:100% 0; animation:bird-wing-pop .72s ease-in-out 2; }
.app-mascot[data-mascot-type="bird"][data-mascot-state="bird-fly"] .mascot-stage { transform:translate3d(0,-5px,0) scale(.72) rotate(-4deg); }
.app-mascot[data-mascot-type="bird"][data-mascot-state="bird-fly"] .mascot-sprite { animation:bird-flap .32s steps(1,end) infinite; }
.app-mascot[data-mascot-type="bird"][data-mascot-state="bird-land"] .mascot-sprite { background-position:66.667% 0; animation:bird-land .5s ease-out both; }
.app-mascot[data-mascot-type="bird"][data-mascot-state="bird-happy"] .mascot-sprite { background-position:100% 100%; animation:bird-happy .68s ease-in-out 2; }
.app-mascot[data-mascot-type="pixelcat"] { width:76px; height:76px; contain:layout style; }
.app-mascot[data-mascot-type="pixelcat"] .mascot-stage { transform:translate3d(0,4px,0) scale(1); transform-origin:50% 100%; mix-blend-mode:normal; }
.app-mascot[data-mascot-type="pixelcat"] .mascot-sprite { --pixelcat-y:0%; background-image:url('images/mascot/ailece-cat-pixel-v1.png'); background-size:700% 800%; background-position:0 var(--pixelcat-y); filter:drop-shadow(0 5px 4px rgba(28,24,39,.2)); image-rendering:pixelated; mix-blend-mode:normal; animation:pixelcat-frames 2.25s steps(6,end) infinite; }
.app-mascot[data-mascot-type="pixelcat"][data-mascot-color="purple"] .mascot-sprite { filter:hue-rotate(32deg) saturate(1.08) drop-shadow(0 5px 4px rgba(28,24,39,.2)); }.app-mascot[data-mascot-type="pixelcat"][data-mascot-color="gray"] .mascot-sprite { filter:grayscale(.78) saturate(.55) drop-shadow(0 5px 4px rgba(28,24,39,.2)); }.app-mascot[data-mascot-type="pixelcat"][data-mascot-color="teal"] .mascot-sprite { filter:hue-rotate(-45deg) saturate(1.05) drop-shadow(0 5px 4px rgba(28,24,39,.2)); }.app-mascot[data-mascot-type="pixelcat"][data-mascot-color="ginger"] .mascot-sprite { filter:hue-rotate(158deg) saturate(1.16) drop-shadow(0 5px 4px rgba(28,24,39,.2)); }
.app-mascot[data-mascot-type="pixelcat"].is-facing-left .mascot-sprite { transform:scaleX(-1); }
.app-mascot[data-mascot-type="pixelcat"][data-mascot-state="walk"] .mascot-stage { transform:translate3d(0,4px,0) scale(1); }
.app-mascot[data-mascot-type="pixelcat"][data-mascot-state="walk"] .mascot-sprite { --pixelcat-y:14.286%; animation:pixelcat-frames var(--mascot-step-duration) steps(6,end) infinite; }
.app-mascot[data-mascot-type="pixelcat"][data-mascot-state="run"] .mascot-stage { transform:translate3d(0,4px,0) scale(1); }
.app-mascot[data-mascot-type="pixelcat"][data-mascot-state="run"] .mascot-sprite { --pixelcat-y:28.571%; animation:pixelcat-frames var(--mascot-step-duration) steps(6,end) infinite; }
.app-mascot[data-mascot-type="pixelcat"][data-mascot-state="jump"] .mascot-sprite { --pixelcat-y:42.857%; animation:pixelcat-frames .95s steps(6,end) 1 both; }
.app-mascot[data-mascot-type="pixelcat"][data-mascot-state="sit"] .mascot-sprite { --pixelcat-y:57.143%; animation:pixelcat-frames 1.65s steps(6,end) 1 both; }
.app-mascot[data-mascot-type="pixelcat"][data-mascot-state="groom"] .mascot-sprite { --pixelcat-y:71.429%; animation:pixelcat-frames 1.45s steps(6,end) infinite; }
.app-mascot[data-mascot-type="pixelcat"][data-mascot-state="sleep-enter"] .mascot-stage,.app-mascot[data-mascot-type="pixelcat"][data-mascot-state="sleep"] .mascot-stage { transform:translate3d(0,4px,0) scale(1); }
.app-mascot[data-mascot-type="pixelcat"][data-mascot-state="sleep-enter"] .mascot-sprite { --pixelcat-y:85.714%; animation:pixelcat-frames 1.05s steps(6,end) 1 both; }
.app-mascot[data-mascot-type="pixelcat"][data-mascot-state="sleep"] .mascot-sprite { --pixelcat-y:85.714%; background-position:66.667% var(--pixelcat-y); animation:pixelcat-sleep 2.4s steps(1,end) infinite; }
.app-mascot[data-mascot-type="pixelcat"][data-mascot-state="waiting"] .mascot-sprite,.app-mascot[data-mascot-type="pixelcat"][data-mascot-state="look"] .mascot-sprite,.app-mascot[data-mascot-type="pixelcat"][data-mascot-state="scratch"] .mascot-sprite { --pixelcat-y:100%; animation:pixelcat-frames 1.2s steps(6,end) 1 both; }
.app-mascot[data-mascot-type="pixelcat"][data-mascot-state="wave"] .mascot-sprite { --pixelcat-y:100%; background-position:16.667% var(--pixelcat-y); animation:pixelcat-wave .42s steps(1,end) 5 both; }
.app-mascot[data-mascot-type="pixelcat"] .mascot-sleep-marks { left:55px; top:-7px; }
.app-mascot[data-mascot-type="pixelcat"] .mascot-speech { bottom:70px; }
.app-mascot[data-mascot-type="bear"] { width:76px; height:76px; contain:layout style; }
.app-mascot[data-mascot-type="bear"] .mascot-stage { transform:translate3d(0,4px,0) scale(1.12); transform-origin:50% 100%; mix-blend-mode:normal; }
.app-mascot[data-mascot-type="bear"] .mascot-sprite { --teddy-y:0%; background-image:url('images/mascot/ailece-teddy-v1.webp'); background-size:1200% 600%; background-position:0 var(--teddy-y); filter:drop-shadow(0 6px 5px rgba(55,31,24,.2)); mix-blend-mode:normal; transform:scaleX(-1); animation:teddy-12 2.8s steps(11,end) infinite; }
.app-mascot[data-mascot-type="bear"].is-facing-left .mascot-sprite { transform:scaleX(1); }
.app-mascot[data-mascot-type="bear"][data-mascot-state="walk"] .mascot-sprite { --teddy-y:40%; animation:teddy-12 var(--mascot-step-duration) steps(11,end) infinite; }
.app-mascot[data-mascot-type="bear"][data-mascot-state="run"] .mascot-sprite { --teddy-y:60%; animation:teddy-10 var(--mascot-step-duration) steps(9,end) infinite; }
.app-mascot[data-mascot-type="bear"][data-mascot-state="jump"] .mascot-sprite { --teddy-y:80%; animation:teddy-10 1s steps(9,end) 1 both; }
.app-mascot[data-mascot-type="bear"][data-mascot-state="wave"] .mascot-sprite { --teddy-y:100%; animation:teddy-8 1.05s steps(7,end) 1 both; }
.app-mascot[data-mascot-type="bear"][data-mascot-state="waiting"] .mascot-sprite,.app-mascot[data-mascot-type="bear"][data-mascot-state="look"] .mascot-sprite,.app-mascot[data-mascot-type="bear"][data-mascot-state="scratch"] .mascot-sprite,.app-mascot[data-mascot-type="bear"][data-mascot-state="groom"] .mascot-sprite,.app-mascot[data-mascot-type="bear"][data-mascot-state="sit"] .mascot-sprite { --teddy-y:20%; animation:teddy-12 1.85s steps(11,end) 1 both; }
.app-mascot[data-mascot-type="bear"][data-mascot-state="sleep-enter"] .mascot-sprite { --teddy-y:20%; animation:teddy-12 1s steps(11,end) 1 both; }
.app-mascot[data-mascot-type="bear"][data-mascot-state="sleep"] .mascot-sprite { --teddy-y:20%; background-position:100% var(--teddy-y); animation:teddy-sleep 2.5s ease-in-out infinite; }
.app-mascot[data-mascot-type="bear"] .mascot-sleep-marks { left:55px; top:-7px; }
.app-mascot[data-mascot-type="bear"] .mascot-speech { bottom:72px; }
.app-mascot[data-mascot-type="bunny"] { width:76px; height:76px; contain:layout style; }
.app-mascot[data-mascot-type="bunny"] .mascot-stage { transform:translate3d(0,4px,0) scale(1.12); transform-origin:50% 100%; mix-blend-mode:normal; }
.app-mascot[data-mascot-type="bunny"] .mascot-sprite { --bunny-y:0%; background-image:url('images/mascot/ailece-bunny-v1.webp'); background-size:1000% 600%; background-position:0 var(--bunny-y); filter:drop-shadow(0 6px 5px rgba(55,31,24,.18)); mix-blend-mode:normal; transform:scaleX(-1); animation:bunny-10 2.5s steps(9,end) infinite; }
.app-mascot[data-mascot-type="bunny"].is-facing-left .mascot-sprite { transform:scaleX(1); }
.app-mascot[data-mascot-type="bunny"][data-mascot-state="walk"] .mascot-sprite,.app-mascot[data-mascot-type="bunny"][data-mascot-state="run"] .mascot-sprite { --bunny-y:20%; animation:bunny-10 var(--mascot-step-duration) steps(9,end) infinite; }
.app-mascot[data-mascot-type="bunny"][data-mascot-state="jump"] .mascot-sprite { --bunny-y:80%; animation:bunny-10 1s steps(9,end) 1 both; }
.app-mascot[data-mascot-type="bunny"][data-mascot-state="wave"] .mascot-sprite { --bunny-y:60%; animation:bunny-10 1.05s steps(9,end) 1 both; }
.app-mascot[data-mascot-type="bunny"][data-mascot-state="waiting"] .mascot-sprite,.app-mascot[data-mascot-type="bunny"][data-mascot-state="look"] .mascot-sprite,.app-mascot[data-mascot-type="bunny"][data-mascot-state="scratch"] .mascot-sprite,.app-mascot[data-mascot-type="bunny"][data-mascot-state="groom"] .mascot-sprite,.app-mascot[data-mascot-type="bunny"][data-mascot-state="sit"] .mascot-sprite { --bunny-y:40%; animation:bunny-10 1.7s steps(9,end) 1 both; }
.app-mascot[data-mascot-type="bunny"][data-mascot-state="sleep-enter"] .mascot-sprite,.app-mascot[data-mascot-type="bunny"][data-mascot-state="sleep"] .mascot-sprite { --bunny-y:0%; background-position:100% var(--bunny-y); animation:none; }
.app-mascot[data-mascot-type="bunny"] .mascot-sleep-marks { left:55px; top:-7px; }
.app-mascot[data-mascot-type="bunny"] .mascot-speech { bottom:72px; }
.app-mascot[data-mascot-type="penguin"] { width:76px; height:76px; contain:layout style; }
.app-mascot[data-mascot-type="penguin"] .mascot-stage { transform:translate3d(0,4px,0) scale(1.12); transform-origin:50% 100%; mix-blend-mode:normal; }
.app-mascot[data-mascot-type="penguin"] .mascot-sprite { --penguin-y:0%; background-image:url('images/mascot/ailece-penguin-v1.webp'); background-size:1200% 600%; background-position:0 var(--penguin-y); filter:drop-shadow(0 6px 5px rgba(33,55,89,.2)); mix-blend-mode:normal; transform:scaleX(-1); animation:penguin-12 2.8s steps(11,end) infinite; }
.app-mascot[data-mascot-type="penguin"].is-facing-left .mascot-sprite { transform:scaleX(1); }
.app-mascot[data-mascot-type="penguin"][data-mascot-state="walk"] .mascot-sprite { --penguin-y:40%; animation:penguin-12 var(--mascot-step-duration) steps(11,end) infinite; }
.app-mascot[data-mascot-type="penguin"][data-mascot-state="run"] .mascot-sprite { --penguin-y:60%; animation:penguin-10 var(--mascot-step-duration) steps(9,end) infinite; }
.app-mascot[data-mascot-type="penguin"][data-mascot-state="jump"] .mascot-sprite { --penguin-y:80%; animation:penguin-10 1s steps(9,end) 1 both; }
.app-mascot[data-mascot-type="penguin"][data-mascot-state="wave"] .mascot-sprite { --penguin-y:100%; animation:penguin-8 1.05s steps(7,end) 1 both; }
.app-mascot[data-mascot-type="penguin"][data-mascot-state="waiting"] .mascot-sprite,.app-mascot[data-mascot-type="penguin"][data-mascot-state="look"] .mascot-sprite,.app-mascot[data-mascot-type="penguin"][data-mascot-state="scratch"] .mascot-sprite,.app-mascot[data-mascot-type="penguin"][data-mascot-state="groom"] .mascot-sprite,.app-mascot[data-mascot-type="penguin"][data-mascot-state="sit"] .mascot-sprite { --penguin-y:20%; animation:penguin-12 1.85s steps(11,end) 1 both; }
.app-mascot[data-mascot-type="penguin"][data-mascot-state="sleep-enter"] .mascot-sprite,.app-mascot[data-mascot-type="penguin"][data-mascot-state="sleep"] .mascot-sprite { --penguin-y:20%; background-position:100% var(--penguin-y); animation:none; }
.app-mascot[data-mascot-type="penguin"] .mascot-sleep-marks { left:55px; top:-7px; }
.app-mascot[data-mascot-type="penguin"] .mascot-speech { bottom:72px; }
.app-mascot[data-mascot-type="ducky"] { width:76px; height:76px; contain:layout style; }
.app-mascot[data-mascot-type="ducky"] .mascot-stage { transform:translate3d(0,4px,0) scale(1.12); transform-origin:50% 100%; mix-blend-mode:normal; }
.app-mascot[data-mascot-type="ducky"] .mascot-sprite { --ducky-y:0%; background-image:url('images/mascot/ailece-ducky-v1.webp'); background-size:1200% 600%; background-position:0 var(--ducky-y); filter:drop-shadow(0 6px 5px rgba(67,53,40,.18)); mix-blend-mode:normal; transform:scaleX(-1); animation:ducky-12 2.8s steps(11,end) infinite; }
.app-mascot[data-mascot-type="ducky"].is-facing-left .mascot-sprite { transform:scaleX(1); }
.app-mascot[data-mascot-type="ducky"][data-mascot-state="walk"] .mascot-sprite { --ducky-y:40%; animation:ducky-12 var(--mascot-step-duration) steps(11,end) infinite; }
.app-mascot[data-mascot-type="ducky"][data-mascot-state="run"] .mascot-sprite { --ducky-y:60%; animation:ducky-10 var(--mascot-step-duration) steps(9,end) infinite; }
.app-mascot[data-mascot-type="ducky"][data-mascot-state="jump"] .mascot-sprite { --ducky-y:80%; animation:ducky-10 1s steps(9,end) 1 both; }
.app-mascot[data-mascot-type="ducky"][data-mascot-state="wave"] .mascot-sprite { --ducky-y:100%; animation:ducky-8 1.05s steps(7,end) 1 both; }
.app-mascot[data-mascot-type="ducky"][data-mascot-state="waiting"] .mascot-sprite,.app-mascot[data-mascot-type="ducky"][data-mascot-state="look"] .mascot-sprite,.app-mascot[data-mascot-type="ducky"][data-mascot-state="scratch"] .mascot-sprite,.app-mascot[data-mascot-type="ducky"][data-mascot-state="groom"] .mascot-sprite,.app-mascot[data-mascot-type="ducky"][data-mascot-state="sit"] .mascot-sprite { --ducky-y:20%; animation:ducky-12 1.85s steps(11,end) 1 both; }
.app-mascot[data-mascot-type="ducky"][data-mascot-state="sleep-enter"] .mascot-sprite,.app-mascot[data-mascot-type="ducky"][data-mascot-state="sleep"] .mascot-sprite { --ducky-y:20%; background-position:100% var(--ducky-y); animation:none; }
.app-mascot[data-mascot-type="ducky"] .mascot-sleep-marks { left:55px; top:-7px; }
.app-mascot[data-mascot-type="ducky"] .mascot-speech { bottom:72px; }
.app-mascot:is([data-mascot-type="tanuki"],[data-mascot-type="chicken"],[data-mascot-type="reindeer"],[data-mascot-type="skeleton"],[data-mascot-type="zombie"],[data-mascot-type="chillboy"]) { width:76px; height:76px; contain:layout style; }
.app-mascot:is([data-mascot-type="tanuki"],[data-mascot-type="chicken"],[data-mascot-type="reindeer"],[data-mascot-type="skeleton"],[data-mascot-type="zombie"],[data-mascot-type="chillboy"]) .mascot-stage { transform:translate3d(0,4px,0) scale(1.12); transform-origin:50% 100%; mix-blend-mode:normal; }
.app-mascot[data-mascot-type="tanuki"] .mascot-sprite { background-image:url('images/mascot/ailece-tanuki-v1.webp'); filter:drop-shadow(0 6px 5px rgba(72,45,26,.2)); }
.app-mascot[data-mascot-type="chicken"] .mascot-sprite { background-image:url('images/mascot/ailece-chicken-v1.webp'); filter:drop-shadow(0 6px 5px rgba(96,67,21,.18)); }
.app-mascot[data-mascot-type="reindeer"] .mascot-sprite { background-image:url('images/mascot/ailece-reindeer-v1.webp'); filter:drop-shadow(0 6px 5px rgba(72,45,26,.2)); }
.app-mascot[data-mascot-type="skeleton"] .mascot-sprite { background-image:url('images/mascot/ailece-skeleton-v1.webp'); filter:drop-shadow(0 6px 5px rgba(47,47,47,.2)); }
.app-mascot[data-mascot-type="zombie"] .mascot-sprite { background-image:url('images/mascot/ailece-zombie-v1.webp'); filter:drop-shadow(0 6px 5px rgba(42,82,38,.2)); }
.app-mascot[data-mascot-type="chillboy"] .mascot-sprite { background-image:url('images/mascot/ailece-chillboy-v1.webp'); filter:drop-shadow(0 6px 5px rgba(40,52,69,.2)); }
.app-mascot:is([data-mascot-type="tanuki"],[data-mascot-type="chicken"],[data-mascot-type="reindeer"],[data-mascot-type="skeleton"],[data-mascot-type="zombie"],[data-mascot-type="chillboy"]) .mascot-sprite { --atlas-y:0%; background-size:1200% 600%; background-position:0 var(--atlas-y); mix-blend-mode:normal; transform:scaleX(-1); animation:atlas-12 2.8s steps(11,end) infinite; }
.app-mascot:is([data-mascot-type="tanuki"],[data-mascot-type="chicken"],[data-mascot-type="reindeer"],[data-mascot-type="skeleton"],[data-mascot-type="zombie"],[data-mascot-type="chillboy"]).is-facing-left .mascot-sprite { transform:scaleX(1); }
.app-mascot:is([data-mascot-type="tanuki"],[data-mascot-type="chicken"],[data-mascot-type="reindeer"],[data-mascot-type="skeleton"],[data-mascot-type="zombie"],[data-mascot-type="chillboy"])[data-mascot-state="walk"] .mascot-sprite { --atlas-y:40%; animation:atlas-12 var(--mascot-step-duration) steps(11,end) infinite; }
.app-mascot:is([data-mascot-type="tanuki"],[data-mascot-type="chicken"],[data-mascot-type="reindeer"],[data-mascot-type="skeleton"],[data-mascot-type="zombie"],[data-mascot-type="chillboy"])[data-mascot-state="run"] .mascot-sprite { --atlas-y:60%; animation:atlas-10 var(--mascot-step-duration) steps(9,end) infinite; }
.app-mascot:is([data-mascot-type="tanuki"],[data-mascot-type="chicken"],[data-mascot-type="reindeer"],[data-mascot-type="skeleton"],[data-mascot-type="zombie"],[data-mascot-type="chillboy"])[data-mascot-state="jump"] .mascot-sprite { --atlas-y:80%; animation:atlas-10 1s steps(9,end) 1 both; }
.app-mascot:is([data-mascot-type="tanuki"],[data-mascot-type="chicken"],[data-mascot-type="reindeer"],[data-mascot-type="skeleton"],[data-mascot-type="zombie"],[data-mascot-type="chillboy"])[data-mascot-state="wave"] .mascot-sprite { --atlas-y:100%; animation:atlas-8 1.05s steps(7,end) 1 both; }
.app-mascot:is([data-mascot-type="tanuki"],[data-mascot-type="chicken"],[data-mascot-type="reindeer"],[data-mascot-type="skeleton"],[data-mascot-type="zombie"],[data-mascot-type="chillboy"])[data-mascot-state="waiting"] .mascot-sprite,.app-mascot:is([data-mascot-type="tanuki"],[data-mascot-type="chicken"],[data-mascot-type="reindeer"],[data-mascot-type="skeleton"],[data-mascot-type="zombie"],[data-mascot-type="chillboy"])[data-mascot-state="look"] .mascot-sprite,.app-mascot:is([data-mascot-type="tanuki"],[data-mascot-type="chicken"],[data-mascot-type="reindeer"],[data-mascot-type="skeleton"],[data-mascot-type="zombie"],[data-mascot-type="chillboy"])[data-mascot-state="scratch"] .mascot-sprite,.app-mascot:is([data-mascot-type="tanuki"],[data-mascot-type="chicken"],[data-mascot-type="reindeer"],[data-mascot-type="skeleton"],[data-mascot-type="zombie"],[data-mascot-type="chillboy"])[data-mascot-state="groom"] .mascot-sprite,.app-mascot:is([data-mascot-type="tanuki"],[data-mascot-type="chicken"],[data-mascot-type="reindeer"],[data-mascot-type="skeleton"],[data-mascot-type="zombie"],[data-mascot-type="chillboy"])[data-mascot-state="sit"] .mascot-sprite { --atlas-y:20%; animation:atlas-12 1.85s steps(11,end) 1 both; }
.app-mascot:is([data-mascot-type="tanuki"],[data-mascot-type="chicken"],[data-mascot-type="reindeer"],[data-mascot-type="skeleton"],[data-mascot-type="zombie"],[data-mascot-type="chillboy"])[data-mascot-state="sleep-enter"] .mascot-sprite,.app-mascot:is([data-mascot-type="tanuki"],[data-mascot-type="chicken"],[data-mascot-type="reindeer"],[data-mascot-type="skeleton"],[data-mascot-type="zombie"],[data-mascot-type="chillboy"])[data-mascot-state="sleep"] .mascot-sprite { --atlas-y:20%; background-position:100% var(--atlas-y); animation:none; }
.app-mascot:is([data-mascot-type="tanuki"],[data-mascot-type="chicken"],[data-mascot-type="reindeer"],[data-mascot-type="skeleton"],[data-mascot-type="zombie"],[data-mascot-type="chillboy"]) .mascot-sleep-marks { left:55px; top:-7px; }
.app-mascot:is([data-mascot-type="tanuki"],[data-mascot-type="chicken"],[data-mascot-type="reindeer"],[data-mascot-type="skeleton"],[data-mascot-type="zombie"],[data-mascot-type="chillboy"]) .mascot-speech { bottom:72px; }
.app-mascot[data-mascot-size="small"] { width:64px; height:64px; }.app-mascot[data-mascot-size="medium"] { width:76px; height:76px; }.app-mascot[data-mascot-size="large"] { width:88px; height:88px; }
.app-mascot[data-mascot-type="bird"][data-mascot-size="small"],.app-mascot[data-mascot-type="pixelcat"][data-mascot-size="small"] { width:64px; height:64px; }.app-mascot[data-mascot-type="bird"][data-mascot-size="medium"],.app-mascot[data-mascot-type="pixelcat"][data-mascot-size="medium"] { width:76px; height:76px; }.app-mascot[data-mascot-type="bird"][data-mascot-size="large"],.app-mascot[data-mascot-type="pixelcat"][data-mascot-size="large"] { width:88px; height:88px; }
@keyframes maodie-8 { from{background-position:0 var(--sprite-y)}to{background-position:100% var(--sprite-y)} }
@keyframes maodie-7 { from{background-position:0 var(--sprite-y)}to{background-position:85.714% var(--sprite-y)} }
@keyframes maodie-6 { from{background-position:0 var(--sprite-y)}to{background-position:71.429% var(--sprite-y)} }
@keyframes maodie-5 { from{background-position:0 var(--sprite-y)}to{background-position:57.143% var(--sprite-y)} }
@keyframes maodie-4 { from{background-position:0 var(--sprite-y)}to{background-position:42.857% var(--sprite-y)} }
@keyframes mascot-heart-pop { 0%{opacity:0;transform:translateY(8px) scale(.5)}25%{opacity:1;transform:translateY(0) scale(1.2)}100%{opacity:0;transform:translateY(-25px) scale(.85)} }
@keyframes mascot-zzz { 0%,100%{transform:translateY(3px);opacity:.35}50%{transform:translateY(-3px);opacity:1} }
@keyframes bird-flap { 0%,100%{background-position:100% 0}50%{background-position:0 100%} }
@keyframes bird-look { 0%,100%{transform:rotate(0)}45%{transform:rotate(5deg)} }
@keyframes bird-wing-pop { 0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)} }
@keyframes bird-land { 0%{transform:translateY(-8px) scale(.92)}65%{transform:translateY(2px) scale(1.03)}100%{transform:translateY(0) scale(1)} }
@keyframes bird-happy { 0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-4px) rotate(3deg)} }
@keyframes pixelcat-frames { from{background-position:0 var(--pixelcat-y)}to{background-position:100% var(--pixelcat-y)} }
@keyframes pixelcat-sleep { 0%,100%{transform:translateY(0)}50%{transform:translateY(1px)} }
@keyframes pixelcat-wave { 0%,100%{background-position:16.667% var(--pixelcat-y)}50%{background-position:33.333% var(--pixelcat-y)} }
@keyframes teddy-12 { from{background-position:0 var(--teddy-y)}to{background-position:100% var(--teddy-y)} }
@keyframes teddy-10 { from{background-position:0 var(--teddy-y)}to{background-position:81.818% var(--teddy-y)} }
@keyframes teddy-8 { from{background-position:0 var(--teddy-y)}to{background-position:63.636% var(--teddy-y)} }
@keyframes teddy-sleep { 0%,100%{transform:translateY(0)}50%{transform:translateY(1px)} }
@keyframes bunny-10 { from{background-position:0 var(--bunny-y)}to{background-position:100% var(--bunny-y)} }
@keyframes penguin-12 { from{background-position:0 var(--penguin-y)}to{background-position:100% var(--penguin-y)} }
@keyframes penguin-10 { from{background-position:0 var(--penguin-y)}to{background-position:81.818% var(--penguin-y)} }
@keyframes penguin-8 { from{background-position:0 var(--penguin-y)}to{background-position:63.636% var(--penguin-y)} }
@keyframes ducky-12 { from{background-position:0 var(--ducky-y)}to{background-position:100% var(--ducky-y)} }
@keyframes ducky-10 { from{background-position:0 var(--ducky-y)}to{background-position:81.818% var(--ducky-y)} }
@keyframes ducky-8 { from{background-position:0 var(--ducky-y)}to{background-position:63.636% var(--ducky-y)} }
@keyframes atlas-12 { from{background-position:0 var(--atlas-y)}to{background-position:100% var(--atlas-y)} }
@keyframes atlas-10 { from{background-position:0 var(--atlas-y)}to{background-position:81.818% var(--atlas-y)} }
@keyframes atlas-8 { from{background-position:0 var(--atlas-y)}to{background-position:63.636% var(--atlas-y)} }

.friend-upcoming-panel { margin-bottom: 1rem; }
.friend-day-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .6rem; }
.friend-day-list > span { padding: .8rem; display: grid; gap: .2rem; border-radius: 14px; background: var(--cream-100); }
.friend-day-list time { color: var(--coral-500); font-size: .7rem; font-weight: 800; }.friend-day-list strong { color: var(--plum-900); }.friend-day-list small { color: var(--muted); }
.enhanced-friends-layout { grid-template-columns: minmax(0, 1fr) minmax(340px, .55fr); }
.enhanced-friends-layout > aside { position: static; }
.friend-card { position: relative; }
.friend-theme-line { width: 100%; height: 5px; background: var(--plum-700); }
.friend-card .person-body { padding-top: 1rem; }
.friend-card-days { display: grid; gap: .45rem; margin-top: .8rem; }
.friend-card-days > span { padding: .6rem; display: grid; gap: .1rem; border-radius: 11px; background: var(--cream-100); }
.friend-card-days strong { color: var(--plum-900); font-size: .72rem; }.friend-card-days small { color: var(--muted); font-size: .64rem; }
.mini-actions { display: flex; gap: .5rem; margin-top: .3rem; }.mini-actions a, .mini-actions button { border: 0; padding: 0; color: var(--plum-600); background: transparent; font-size: .64rem; font-weight: 800; }.mini-actions form { margin: 0; }.mini-actions button { color: #a13443; }
.friend-note { margin-top: .8rem !important; padding: .6rem; border-left: 3px solid var(--coral-300); background: var(--cream-50); overflow-wrap: anywhere; }
.friend-send-fields { display: grid; gap: .7rem; padding: .8rem; border: 1px dashed var(--border); border-radius: 14px; background: var(--cream-50); }
.friend-send-fields[hidden] { display: none; }
.consent-confirm { display: grid !important; grid-template-columns: auto 1fr; align-items: start; gap: .6rem !important; padding: .7rem; border-radius: 12px; color: var(--muted) !important; background: #fff; font-size: .67rem !important; }
.consent-confirm input { width: 18px !important; min-width: 18px; height: 18px !important; min-height: 18px; margin: .05rem 0 0; padding: 0; align-self: start; border: 0; border-radius: 4px; outline: 0; box-shadow: none !important; accent-color: var(--plum-700); }
.consent-confirm input:focus, .consent-confirm input:focus-visible, .consent-confirm input:checked { outline: 0; box-shadow: none !important; }
.consent-confirm > span { padding-top: 0; line-height: 1.4; }

.subscription-hero { padding: clamp(1.5rem, 4vw, 3rem); display: flex; align-items: center; justify-content: space-between; border-radius: 28px; color: #fff; background: linear-gradient(135deg, var(--plum-900), var(--plum-950)); box-shadow: var(--shadow-lg); }.subscription-hero .eyebrow { color: var(--coral-300); }.subscription-hero h2 { margin: .25rem 0; font-family: var(--serif); font-size: 2.4rem; }.subscription-hero p { color: rgba(255,255,255,.65); }.balance-ring { width: 140px; height: 140px; display: grid; place-content: center; text-align: center; border: 12px solid rgba(255,255,255,.12); border-top-color: var(--coral-500); border-radius: 50%; }.balance-ring strong { font-family: var(--serif); font-size: 2.4rem; line-height: 1; }.balance-ring span { color: rgba(255,255,255,.62); font-size: .65rem; }
.plans-app-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1rem; margin: 1rem 0; }.plan-app-card { transition: border-color .2s ease, transform .2s ease; }.plan-app-card.current, .plan-app-card.selected { border-color: var(--coral-500); transform: translateY(-3px); }.plan-app-card .price { display: flex; align-items: start; gap: .25rem; margin: .8rem 0; color: var(--plum-900); }.plan-app-card .price strong { font-family: var(--serif); font-size: 2.6rem; line-height: 1; }.plan-app-card .price span { font-weight: 800; }.plan-app-card .price small { color: var(--muted); font-weight: 400; }.plan-app-card ul { padding-left: 1.2rem; color: var(--muted); font-size: .8rem; }.payment-form-panel { max-width: 820px; margin: 1rem auto 0; }.payment-form-panel > small { display: block; margin-top: .8rem; color: var(--muted); text-align: center; }
.sms-purchase-section { margin: 2rem 0 1rem; }.section-copy { max-width: 680px; margin-bottom: 1rem; }.section-copy h2 { margin: .15rem 0 .35rem; color: var(--plum-900); font-family: var(--serif); font-size: clamp(1.65rem, 4vw, 2.35rem); }.section-copy p { margin: 0; color: var(--muted); }.sms-product-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .8rem; }.sms-product-card { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: .8rem; transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease; }.sms-product-card.selected { border-color: var(--coral-500); transform: translateY(-3px); box-shadow: var(--shadow-lg); }.sms-product-card .button { grid-column: 1 / -1; }.sms-pack-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; color: var(--coral-500); background: var(--cream-100); font-size: 1.25rem; }.sms-product-card strong,.sms-product-card small { display: block; }.sms-product-card > div small { margin-top: .1rem; color: var(--muted); font-size: .67rem; }.sms-pack-price { grid-column: 1 / -1; color: var(--plum-900); font-family: var(--serif); font-size: 1.55rem; font-weight: 800; }.compact-empty { padding: 1.25rem; }.compact-empty p { margin-bottom: 0; }.sms-quote-panel { margin-top: .85rem; padding: 0; overflow: hidden; }.sms-quote-panel summary { padding: 1rem 1.2rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; cursor: pointer; list-style: none; }.sms-quote-panel summary::-webkit-details-marker { display: none; }.sms-quote-panel summary strong,.sms-quote-panel summary small { display: block; }.sms-quote-panel summary small { margin-top: .2rem; color: var(--muted); font-size: .68rem; }.sms-quote-panel summary > span:last-child { color: var(--plum-700); font-size: .75rem; font-weight: 800; white-space: nowrap; }.sms-quote-form { padding: 1rem 1.2rem 1.2rem; border-top: 1px solid var(--border); }.quote-history { padding: 0 1.2rem 1.2rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: .55rem; }.quote-history > span { padding: .7rem; display: grid; gap: .15rem; border-radius: 11px; background: var(--cream-50); }.quote-history small { color: var(--muted); font-size: .65rem; }
.billing-source-options { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }.billing-source-choice { padding: .85rem; display: grid !important; grid-template-columns: auto 1fr; align-items: start; gap: .65rem !important; border: 1px solid var(--border); border-radius: 14px; background: var(--cream-50); cursor: pointer; }.billing-source-choice:has(input:checked) { border-color: var(--coral-500); background: color-mix(in srgb, var(--coral-100) 42%, white); }.billing-source-choice input { width: 18px; height: 18px; margin-top: .15rem; accent-color: var(--plum-700); }.billing-source-choice strong,.billing-source-choice small { display: block; }.billing-source-choice small { margin-top: .12rem; color: var(--muted); font-size: .65rem; }.saved-billing-card { padding: 1rem; display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: .8rem; align-items: start; border: 1px solid color-mix(in srgb, var(--coral-500) 42%, var(--border)); border-radius: 15px; background: color-mix(in srgb, var(--cream-100) 58%, white); }.saved-billing-check { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--plum-700); font-weight: 900; }.saved-billing-card strong,.saved-billing-card small { display: block; }.saved-billing-card small,.saved-billing-card p { color: var(--muted); font-size: .7rem; }.saved-billing-card p { margin: .3rem 0 0; overflow-wrap: anywhere; }.billing-new-fields > .form-grid { margin: 0; }.save-billing-choice { padding: .8rem; display: grid !important; grid-template-columns: auto 1fr; gap: .65rem !important; align-items: start; border: 1px dashed var(--border); border-radius: 13px; background: var(--cream-50); }.save-billing-choice input { width: 18px; height: 18px; margin-top: .1rem; accent-color: var(--plum-700); }.save-billing-choice strong,.save-billing-choice small { display: block; }.save-billing-choice small { color: var(--muted); font-size: .65rem; }.billing-new-fields[hidden],.saved-billing-card[hidden] { display: none !important; }
.payment-display-form { display: grid; grid-template-columns: 1fr 1fr auto; gap: .75rem; align-items: stretch; }.payment-display-form label { display: grid; grid-template-columns: auto 1fr; gap: .65rem; align-items: start; padding: .9rem; border: 1px solid var(--border); border-radius: 14px; background: var(--cream-50); cursor: pointer; }.payment-display-form input { margin-top: .25rem; accent-color: var(--plum-700); }.payment-display-form strong,.payment-display-form small { display: block; }.payment-display-form small { margin-top: .2rem; color: var(--muted); font-size: .67rem; }.payment-checkout-heading h1 { max-width: 100%; white-space: nowrap; font-size: clamp(1.55rem, 7vw, 3.25rem); }.embedded-payment-panel { position: relative; max-width: 960px; min-height: 732px; margin: 0 auto; padding: .6rem; overflow: hidden; }.embedded-payment-panel iframe { position: relative; z-index: 1; display: block; width: 100%; min-height: 720px; border: 0; border-radius: 17px; opacity: 0; background: #fff; transition: opacity .24s ease; }.embedded-payment-panel.is-ready iframe { opacity: 1; }.payment-embed-loader { position: absolute; z-index: 2; inset: .6rem; min-height: 720px; display: grid; place-content: center; justify-items: center; gap: .65rem; padding: 2rem; border-radius: 17px; color: var(--plum-900); text-align: center; background: radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--coral-100) 72%, white), var(--cream-50) 58%, color-mix(in srgb, var(--plum-100) 35%, white)); transition: opacity .2s ease, visibility .2s ease; }.payment-embed-loader strong { font-family: var(--serif); font-size: clamp(1.2rem, 4vw, 1.7rem); }.payment-embed-loader small { max-width: 360px; color: var(--muted); line-height: 1.55; }.embedded-payment-panel.is-ready .payment-embed-loader { opacity: 0; visibility: hidden; pointer-events: none; }.payment-loader-mark { position: relative; width: 58px; height: 58px; display: grid; place-items: center; border: 3px solid color-mix(in srgb, var(--plum-700) 16%, transparent); border-top-color: var(--plum-700); border-radius: 50%; animation: payment-loader-spin .8s linear infinite; }.payment-loader-mark i { width: 26px; height: 22px; display: block; transform: rotate(-45deg); border-radius: 50% 50% 45% 45%; background: var(--coral-500); }.payment-loader-mark i::before { content: ''; position: absolute; width: 26px; height: 22px; transform: translate(12px,0); border-radius: 50% 50% 45% 45%; background: var(--coral-500); }.payment-loader-mark i::after { content: ''; position: absolute; width: 26px; height: 22px; transform: translate(6px,6px); background: var(--coral-500); }.payment-loader-mark i, .payment-loader-mark i::before, .payment-loader-mark i::after { animation: payment-loader-heart .8s linear infinite reverse; }.payment-loader-mark i::before, .payment-loader-mark i::after { display: none; }.payment-loader-mark i { transform: none; clip-path: path('M13 22C11 19 2 14 2 7.5 2 3.8 6.6 1.7 9.5 4.5L13 8l3.5-3.5C19.4 1.7 24 3.8 24 7.5 24 14 15 19 13 22Z'); }.payment-loader-mark i::before, .payment-loader-mark i::after { content: none; }.payment-loader-mark { box-shadow: 0 10px 30px color-mix(in srgb, var(--plum-700) 18%, transparent); }@keyframes payment-loader-spin { to { transform: rotate(360deg); } }@keyframes payment-loader-heart { to { transform: rotate(-360deg); } }

.admin-links { display: grid; gap: .7rem; }.admin-links a { padding: 1rem; display: flex; justify-content: space-between; gap: 1rem; border: 1px solid var(--border); border-radius: 14px; }.admin-links a:hover { border-color: var(--coral-500); background: var(--cream-50); }.admin-links strong { color: var(--plum-900); }.admin-links span { color: var(--muted); font-size: .75rem; }
.admin-provider-settings .form-panel { padding: clamp(1.2rem, 3vw, 2rem); }.provider-config-options { display: grid; gap: .7rem; }.provider-config-choice { padding: .85rem; display: grid !important; grid-template-columns: auto 1fr; align-items: start; gap: .7rem !important; border: 1px solid var(--border); border-radius: 14px; background: var(--cream-50); cursor: pointer; }.provider-config-choice:has(input:checked) { border-color: var(--coral-500); background: color-mix(in srgb, var(--coral-100) 42%, white); }.provider-config-choice input { width: 19px !important; min-height: 19px !important; height: 19px; margin-top: .1rem; accent-color: var(--plum-700); }.provider-config-choice strong,.provider-config-choice small { display: block; }.provider-config-choice small,.admin-provider-settings .form-grid label > small { margin-top: .18rem; color: var(--muted); font-size: .66rem; font-weight: 500; }.provider-config-danger:has(input:checked) { border-color: #b14949; background: #fff1f1; }.admin-provider-settings .button[type="submit"] { justify-self: start; }
.admin-billing-section { margin-bottom: 1rem; }.admin-plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; }.admin-plan-card { display: grid; gap: .9rem; padding: 1rem; border: 1px solid var(--border); border-radius: 16px; background: var(--cream-50); }.admin-plan-card label, .admin-inline-form { color: var(--plum-900); font-size: .72rem; font-weight: 700; }.admin-plan-card label { display: grid; gap: .35rem; }.admin-compact-fields { display: grid; grid-template-columns: 1fr 1fr; gap: .65rem; }.admin-table-heading { padding: 1.2rem 1rem; display: flex; align-items: end; justify-content: space-between; gap: 1rem; }.admin-table-heading h2 { margin: .1rem 0 0; color: var(--plum-900); font-family: var(--serif); }.admin-table-heading p { max-width: 560px; margin: 0; color: var(--muted); font-size: .72rem; }.admin-family-billing { margin-bottom: 1rem; }.admin-inline-form { display: grid; grid-template-columns: minmax(130px, 1fr) minmax(140px, 1fr) auto; gap: .45rem; align-items: center; min-width: 410px; }.admin-credit-form { grid-template-columns: 78px 90px minmax(150px, 1fr) auto; margin-top: .45rem; }.admin-inline-form .field { min-height: 40px; padding: .5rem .65rem; }.admin-inline-form .button { min-height: 40px; padding: .65rem .9rem; }.admin-balance { color: var(--plum-700); }.admin-sms-product-grid { padding: 0 1rem 1.2rem; }.quote-status-form { min-width: 240px; display: grid; grid-template-columns: minmax(120px, 1fr) auto; gap: .45rem; }.quote-status-form .field,.quote-status-form .button { min-height: 40px; padding: .55rem .65rem; }
.admin-impersonation-bar { position: relative; z-index: 49; min-height: 42px; padding: .45rem clamp(1rem,5vw,5.5rem); display: flex; align-items: center; justify-content: center; gap: 1rem; color: #fff; background: linear-gradient(90deg,var(--plum-950),var(--plum-700)); font-size: .72rem; }.admin-impersonation-bar form { margin: 0; }.admin-impersonation-bar button { padding: .25rem .65rem; border: 1px solid rgba(255,255,255,.45); border-radius: 999px; color: #fff; background: rgba(255,255,255,.12); font-size: .68rem; font-weight: 800; }
.admin-family-heading { align-items: center; }.admin-family-heading form { flex: 0 0 auto; }.admin-family-summary { margin-bottom: 1rem; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: .8rem; }.admin-family-summary article { min-height: 112px; padding: 1rem; display: grid; align-content: center; gap: .25rem; border: 1px solid var(--border); border-radius: 18px; background: var(--cream-50); box-shadow: var(--shadow-sm); }.admin-family-summary small,.admin-family-summary span { color: var(--muted); font-size: .68rem; }.admin-family-summary strong { color: var(--plum-900); font-size: 1.15rem; }.admin-action-grid { margin-bottom: 1rem; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem; }.admin-action-card { min-height: 310px; padding: 1.2rem; display: flex; flex-direction: column; }.admin-action-card h2 { margin: .2rem 0; color: var(--plum-900); font-family: var(--serif); }.admin-action-card > p { margin: 0 0 1rem; color: var(--muted); font-size: .76rem; }.admin-action-card form { margin-top: auto; display: grid; gap: .7rem; }.admin-action-card label { display: grid; gap: .3rem; color: var(--plum-900); font-size: .7rem; font-weight: 800; }.admin-credit-fields { display: grid; grid-template-columns: 110px 1fr; gap: .55rem; }.admin-family-members,.admin-family-credits { margin-bottom: 1rem; }.admin-manage-button { min-height: 38px; padding: .55rem .8rem; }.credit-positive { color: #25604c; }.credit-negative { color: #8d2f3e; }.account-paused-page p { max-width: 620px; }
.admin-family-audits,.admin-history-panel { margin-bottom: 1rem; }.admin-member-form { min-width: 600px; display: grid; grid-template-columns: 155px 145px 125px auto; align-items: center; gap: .45rem; }.admin-member-form .field,.admin-member-form .button { min-height: 40px; padding: .5rem .65rem; }.admin-member-active { display: inline-flex; align-items: center; gap: .35rem; color: var(--plum-900); font-size: .7rem; font-weight: 800; white-space: nowrap; }.admin-session-form { margin-top: .35rem; }.admin-session-form button,.admin-notification-actions button { padding: 0; border: 0; background: transparent; color: var(--plum-700); font: inherit; font-weight: 800; cursor: pointer; }.admin-session-form button:hover,.admin-notification-actions button:hover { text-decoration: underline; }.admin-audit-table td:nth-child(3) { min-width: 260px; white-space: normal; }.admin-audit-table form { margin: 0; }.admin-undo-button { min-height: 36px; padding: .5rem .7rem; }.admin-notification-filters { margin-bottom: 1rem; padding: 1rem; display: grid; grid-template-columns: minmax(210px,2fr) minmax(160px,1fr) 150px 165px auto auto; gap: .55rem; align-items: center; }.admin-notification-filters .field,.admin-notification-filters .button { min-height: 42px; }.admin-notification-table td:nth-child(4) { min-width: 330px; max-width: 440px; white-space: normal; }.admin-notification-detail summary { color: var(--plum-900); font-weight: 800; cursor: pointer; }.admin-notification-detail p { margin: .65rem 0; line-height: 1.55; }.admin-error-detail { padding: .65rem; border-radius: 10px; background: #fbe7e9; color: #8d2f3e; }.admin-notification-actions { min-width: 110px; display: grid; gap: .45rem; }.admin-notification-actions form { margin: 0; }.admin-notification-actions .button-link-danger { color: #8d2f3e; }
.button-danger { color: #fff; background: linear-gradient(135deg,#a52f43,#7d2032); box-shadow: 0 9px 20px rgba(125,32,50,.2); }.button-danger:hover { color: #fff; transform: translateY(-1px); box-shadow: 0 12px 24px rgba(125,32,50,.26); }.status-partially-refunded { color: #78541f; background: #fff1d8; }.status-refunded { color: #5c3f87; background: #f0eafb; }.admin-payment-stats { margin-bottom: 1rem; }.admin-payment-filters { margin-bottom: 1rem; padding: 1rem; display: grid; grid-template-columns: minmax(230px,2fr) minmax(160px,1fr) 155px 145px auto auto; gap: .55rem; align-items: center; }.admin-payment-filters .field,.admin-payment-filters .button { min-height: 42px; }.admin-payment-table td { vertical-align: top; }.admin-payment-table td:nth-child(4) { min-width: 235px; white-space: normal; }.admin-payment-detail { min-width: 190px; }.admin-payment-detail > summary { color: var(--plum-700); font-size: .7rem; font-weight: 900; cursor: pointer; white-space: nowrap; }.admin-payment-detail-body { width: min(440px,80vw); margin-top: .65rem; padding: .8rem; display: grid; gap: .75rem; border: 1px solid var(--border); border-radius: 14px; background: #fff; box-shadow: var(--shadow-lg); }.admin-payment-detail dl { margin: 0; display: grid; gap: .35rem; }.admin-payment-detail dl div { display: grid; grid-template-columns: 90px minmax(0,1fr); gap: .5rem; }.admin-payment-detail dt { color: var(--muted); font-size: .65rem; }.admin-payment-detail dd { margin: 0; overflow-wrap: anywhere; color: var(--plum-900); font-size: .68rem; font-weight: 750; }.admin-refund-history { display: grid; gap: .45rem; }.admin-refund-history > strong { color: var(--plum-900); font-size: .7rem; }.admin-refund-history article { padding: .6rem; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: .2rem .45rem; border-radius: 11px; background: var(--cream-50); }.admin-refund-history article b { color: var(--plum-900); text-align: right; }.admin-refund-history article small { grid-column: 1 / -1; color: var(--muted); font-size: .62rem; line-height: 1.4; }.admin-refund-form { padding-top: .7rem; display: grid; gap: .65rem; border-top: 1px solid var(--border); }.admin-refund-form > label { display: grid; gap: .3rem; color: var(--plum-900); font-size: .68rem; font-weight: 800; }.admin-refund-form textarea.field { min-height: 76px; resize: vertical; }.admin-refund-entitlement { padding: .65rem; grid-template-columns: auto 1fr !important; align-items: start; border: 1px dashed color-mix(in srgb,var(--coral-500) 45%,var(--border)); border-radius: 12px; background: var(--cream-50); }.admin-refund-entitlement input { width: 18px; height: 18px; margin-top: .1rem; accent-color: var(--plum-700); }.admin-refund-entitlement strong,.admin-refund-entitlement small { display: block; }.admin-refund-entitlement small { margin-top: .15rem; color: var(--muted); font-size: .62rem; font-weight: 500; line-height: 1.4; }.admin-payment-warning { margin: 0; padding: .65rem; border-radius: 10px; color: #78541f; background: #fff1d8; font-size: .67rem; line-height: 1.45; }
.legal-shell { width: min(960px, calc(100% - 2rem)); margin: auto; padding: clamp(3rem, 8vw, 7rem) 0; }.legal-shell header { max-width: 760px; }.legal-shell h1 { margin: .5rem 0; color: var(--plum-950); font-family: var(--serif); font-size: clamp(2.7rem, 6vw, 5rem); line-height: 1; }.legal-shell header p { color: var(--muted); font-size: 1.05rem; }.legal-shell header small { color: var(--coral-500); }.legal-shell article { margin-top: 3rem; border-top: 1px solid var(--border); }.legal-shell article section { padding: 1.5rem 0; display: grid; grid-template-columns: 48px 1fr; gap: 1rem; border-bottom: 1px solid var(--border); }.legal-shell article section > span { color: var(--coral-500); font-family: var(--serif); font-size: 1.2rem; }.legal-shell h2 { margin: 0; color: var(--plum-900); font-family: var(--serif); }.legal-shell article p { margin: .4rem 0 0; color: var(--muted); }.legal-shell aside { margin-top: 2rem; padding: 1rem 1.2rem; border-left: 3px solid var(--gold); color: var(--muted); background: #fff7e7; font-size: .78rem; }
.error-page { min-height: 65vh; display: grid; place-content: center; justify-items: center; text-align: center; }.error-page > span { color: var(--coral-500); font-family: var(--serif); font-size: 5rem; line-height: 1; }.error-page h1 { margin: .6rem 0; color: var(--plum-950); font-family: var(--serif); font-size: 2.6rem; }.error-page p { color: var(--muted); }
.page-hero { max-width: 860px; margin: 0 auto; padding: clamp(4rem, 9vw, 8rem) 1rem 3rem; text-align: center; }.page-hero h1 { margin: .6rem 0; color: var(--plum-950); font-family: var(--serif); font-size: clamp(2.8rem, 6vw, 5.4rem); line-height: 1; }.page-hero p { max-width: 650px; margin: 1rem auto; color: var(--muted); }
.pricing-grid { width: min(1180px, calc(100% - 2rem)); margin: 0 auto 2rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; align-items: stretch; }.price-card { position: relative; padding: 2rem; border: 1px solid var(--border); border-radius: 24px; background: #fff; box-shadow: var(--shadow-sm); }.price-card.featured { border-color: var(--coral-500); box-shadow: var(--shadow-lg); transform: translateY(-10px); }.price-card h2 { margin: .3rem 0; color: var(--plum-900); font-family: var(--serif); font-size: 1.8rem; }.price-card > p { min-height: 52px; color: var(--muted); font-size: .8rem; }.price-card .price { display: flex; align-items: start; gap: .25rem; margin: 1.2rem 0; color: var(--plum-900); }.price-card .price strong { font-family: var(--serif); font-size: 3rem; line-height: 1; }.price-card .price span { font-weight: 800; }.price-card .price small { color: var(--muted); font-weight: 400; }.price-card ul { min-height: 180px; padding-left: 1.2rem; color: var(--muted); font-size: .78rem; }.price-card li { margin: .45rem 0; }.popular { position: absolute; right: 1rem; top: 1rem; padding: .35rem .6rem; border-radius: 999px; color: #fff; background: var(--coral-500); font-size: .62rem; font-weight: 800; }.pricing-note { width: min(760px, calc(100% - 2rem)); margin: 0 auto 6rem; padding: 1rem 1.2rem; display: grid; grid-template-columns: auto 1fr; gap: 1rem; border-radius: 16px; color: var(--muted); background: var(--cream-100); font-size: .75rem; }.pricing-note strong { color: var(--plum-800); }
.consent-check { padding: .8rem; grid-template-columns: auto 1fr !important; align-items: start; border: 1px solid var(--border); border-radius: 12px; color: var(--muted) !important; background: var(--cream-50); font-size: .7rem !important; font-weight: 400 !important; }.consent-check input { width: 18px; height: 18px; margin-top: .1rem; accent-color: var(--plum-700); }

.flash { width: min(720px, calc(100% - 2rem)); margin: 0 auto 1rem; padding: .8rem 1rem; border-radius: 14px; display: flex; align-items: center; justify-content: space-between; gap: 1rem; box-shadow: var(--shadow-sm); }.flash-success { background: #e8f5ef; color: #25604c; }.flash-warning { background: #fff3d9; color: #7a551d; }.flash-error { background: #fde8e8; color: #8d2f3e; }.flash-info { background: #eef2fb; color: #394f80; }.flash button { border: 0; background: transparent; color: inherit; font-size: 1.2rem; }
.auth-shell { width: min(1120px, calc(100% - 2rem)); min-height: calc(100vh - 79px); margin: auto; display: grid; grid-template-columns: 1fr 480px; gap: clamp(2rem, 8vw, 8rem); align-items: center; padding: 4rem 0; }.auth-shell.auth-centered { grid-template-columns: minmax(0, 520px); justify-content: center; }.auth-intro h1, .auth-card h1 { font-family: var(--serif); color: var(--plum-950); font-size: clamp(2.7rem, 5vw, 5rem); line-height: 1.03; margin: .8rem 0; }.auth-intro > p { color: var(--muted); max-width: 500px; }.auth-quote { max-width: 480px; margin-top: 2.5rem; padding: 1.2rem 1.4rem; border-left: 3px solid var(--coral-500); background: rgba(255,255,255,.5); font-family: var(--serif); color: var(--plum-700); font-size: 1.05rem; }.auth-card { padding: clamp(1.6rem, 4vw, 2.8rem); border: 1px solid var(--border); border-radius: 28px; background: rgba(255,255,255,.85); box-shadow: var(--shadow-lg); }.auth-card.wide-card { width: min(620px, 100%); }.auth-card h2 { font-family: var(--serif); color: var(--plum-900); font-size: 1.8rem; margin: .8rem 0 .3rem; }.auth-card > p { color: var(--muted); font-size: .9rem; }.auth-card > .otp-help { margin-top: .8rem; padding: .8rem .9rem; border-radius: 12px; background: rgba(79, 130, 182, .1); color: var(--plum-800); line-height: 1.55; }.stack-form { display: grid; gap: 1.15rem; margin-top: 1.4rem; }.stack-form label { display: grid; gap: .4rem; color: var(--plum-900); font-size: .82rem; font-weight: 700; }.stack-form input, .stack-form select, .stack-form textarea, .field { width: 100%; min-height: 50px; padding: .75rem .9rem; border: 1px solid var(--border); border-radius: 12px; background: #fff; outline: none; color: var(--ink); }.stack-form textarea { min-height: 110px; resize: vertical; }.stack-form input:focus, .stack-form select:focus, .stack-form textarea:focus, .field:focus { border-color: var(--coral-500); box-shadow: 0 0 0 4px rgba(236,125,92,.12); }.phone-input { display: flex; align-items: center; border: 1px solid var(--border); border-radius: 12px; background: #fff; overflow: hidden; }.phone-input:focus-within { border-color: var(--coral-500); box-shadow: 0 0 0 4px rgba(236,125,92,.12); }.phone-input span { padding: 0 .9rem; color: var(--plum-700); font-weight: 700; border-right: 1px solid var(--border); }.phone-input input { border: 0; box-shadow: none !important; }.otp-input { text-align: center; font-size: 1.8rem; letter-spacing: .5em; font-weight: 700; }.otp-resend-form { display: grid; gap: .45rem; margin-top: .85rem; }.otp-resend-form small { min-height: 1em; color: var(--muted); font-size: .7rem; text-align: center; }.otp-resend-form .button:disabled { cursor: wait; opacity: .62; }.form-note { display: block; color: var(--muted); font-size: .68rem; text-align: center; margin-top: 1.2rem; }.form-note a { text-decoration: underline; }.account-list { display: grid; gap: .7rem; margin-top: 1.5rem; }.account-list form button { width: 100%; border: 1px solid var(--border); border-radius: 16px; background: #fff; padding: .9rem; display: flex; align-items: center; gap: .8rem; text-align: left; }.account-list form button:hover { border-color: var(--coral-500); background: var(--cream-50); }.account-list button span:nth-child(2) { margin-right: auto; }.account-list strong, .account-list small { display: block; }.account-list small { color: var(--muted); }

@media (max-width: 1050px) {
  .public-nav { display: none; }
  .hero { grid-template-columns: 1fr; padding-top: 4rem; }
  .hero-copy { text-align: center; }.hero-copy > p { margin-inline: auto; }.hero-actions, .trust-row { justify-content: center; }
  .hero-visual { min-height: 480px; }
  .channel-section { grid-template-columns: 1fr; }.security-points { grid-template-columns: repeat(2, 1fr); }
  .site-footer { grid-template-columns: 1.5fr 1fr 1fr; }.site-footer > div:nth-child(4) { grid-column: 2 / 4; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }.dashboard-grid { grid-template-columns: 1fr; }
  .app-nav { gap: .65rem; }.app-nav a { font-size: .74rem; }.theme-heart { flex-basis: 27px; width: 27px; }
  .editor-grid { grid-template-columns: 1fr; }.editor-aside { grid-column: 1; grid-row: auto; }.sticky-card { position: static; }.archive-form { max-width: 100%; }
  .settings-grid { grid-template-columns: 1fr; }
  .profile-layout { grid-template-columns: 1fr; }.profile-side-stack { position: static; }
  .friends-layout { grid-template-columns: 1fr; }.friends-layout > aside { position: static; }.relation-form { grid-template-columns: 1fr 1fr; }
  .payment-display-form { grid-template-columns: 1fr; }.payment-display-form .button { justify-self: start; }
  .pricing-grid { grid-template-columns: 1fr; max-width: 620px; }.price-card.featured { transform: none; }.price-card ul { min-height: auto; }
}

@media (max-width: 760px) {
  body.is-app { position: relative; height: 100vh; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }
  body.is-app > .site-header { position: relative; top: auto; flex: 0 0 auto; }
  body.is-app > .app-main { width: 100%; min-height: 0; flex: 1 1 auto; overflow-x: hidden; overflow-y: auto; overflow-anchor: none; scroll-behavior: auto; overscroll-behavior-y: contain; -webkit-overflow-scrolling: touch; }
  html.is-shell-loading body.is-app::before { top: 65px; }
  .site-header { min-height: 66px; padding: 0 1rem; gap: .35rem; }.brand-mark { transform: scale(.85); transform-origin: left center; }.brand { gap: .35rem; }.brand > span:last-child { display: none; }.header-actions { gap: .4rem; }.header-actions .button-ghost { display: inline-flex; }.header-actions .button { min-height: 40px; padding: .65rem 1rem; font-size: .8rem; }.theme-picker { flex: 0 1 auto; max-width: none; gap: clamp(0rem, .45vw, .1rem); }.theme-heart, .theme-custom-picker { flex-basis: clamp(22px, 7.2vw, 27px); width: clamp(22px, 7.2vw, 27px); height: 29px; }.theme-heart { font-size: .98rem; }
  .hero { min-height: auto; padding: 4rem 1.1rem 3rem; }.hero h1 { font-size: clamp(2.8rem, 13vw, 4.6rem); }.hero-actions { flex-direction: column; }.hero-visual { min-height: 410px; }.hero-visual::before { width: 280px; height: 280px; }.orbit-one { width: 340px; height: 340px; }.orbit-two { width: 380px; height: 260px; }.moment-main { width: 94%; }.moment-top { top: 25px; right: -25px; }.moment-bottom { bottom: 30px; left: -25px; }.family-dots { right: 20px; }
  .statement { padding: 5rem 1.1rem; }.steps-section, .channel-section, .security-section { padding: 4.5rem 1.1rem; }.steps-grid { grid-template-columns: 1fr; }.steps-grid article { min-height: auto; }.security-card { grid-template-columns: 1fr; }.security-points { grid-template-columns: 1fr 1fr; }.site-footer { grid-template-columns: 1fr 1fr; padding: 3rem 1.1rem 1.5rem; }.footer-brand { grid-column: 1 / -1; }.site-footer > div:nth-child(4) { grid-column: 1 / -1; }.footer-support { grid-template-columns: 72px minmax(0, 1fr); }.footer-support img { width: 72px; }.footer-note { grid-column: 1 / -1; }
  .app-nav, .profile-menu > summary span:last-child { display: none; }.mobile-app-nav { position: fixed; z-index: 60; left: .65rem; right: .65rem; bottom: max(.65rem, env(safe-area-inset-bottom)); display: grid; grid-template-columns: repeat(6, 1fr); border: 1px solid color-mix(in srgb, var(--cream-50) 34%, transparent); border-radius: 20px; padding: calc(.45rem * var(--app-nav-scale, 1)); background: rgba(53,19,33,.9); background: linear-gradient(135deg, color-mix(in srgb, var(--plum-950) 88%, transparent), color-mix(in srgb, var(--plum-800) 82%, transparent)); box-shadow: 0 16px 38px color-mix(in srgb, var(--plum-950) 35%, transparent), inset 0 1px 0 rgba(255,255,255,.11); backdrop-filter: blur(20px) saturate(145%); -webkit-backdrop-filter: blur(20px) saturate(145%); contain: layout paint; isolation: isolate; transform: translate3d(0, 0, 0); will-change: transform; backface-visibility: hidden; }.mobile-app-nav a { min-width: 0; padding: .22rem .08rem; display: grid; place-items: center; border: 1px solid transparent; border-radius: 14px; color: rgba(255,255,255,.68); font-size: calc(.62rem * var(--app-nav-scale, 1)); font-weight: 700; transition: color .18s ease, background .18s ease, border-color .18s ease; }.mobile-app-nav .nav-icon { width: calc(22px * var(--app-nav-scale, 1)); height: calc(22px * var(--app-nav-scale, 1)); display: grid; place-items: center; line-height: 1; transform: none; transition: color .18s ease, background .18s ease, border-color .18s ease; }.mobile-app-nav .nav-icon::after { display: none; }.mobile-app-nav .nav-icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }.mobile-app-nav a.is-active, .mobile-app-nav a.is-pending { border-color: rgba(255,255,255,.1); color: #fff; background: rgba(255,255,255,.11); box-shadow: inset 0 1px 0 rgba(255,255,255,.08); }.mobile-app-nav a.is-active .nav-icon, .mobile-app-nav a.is-pending .nav-icon { color: var(--coral-300); transform: none; }
  body[data-nav-icons="rounded"] .mobile-app-nav .nav-icon { width: calc(27px * var(--app-nav-scale, 1)); height: calc(27px * var(--app-nav-scale, 1)); padding: calc(4px * var(--app-nav-scale, 1)); border-radius: 50%; background: rgba(255,255,255,.1); }
  body[data-nav-icons="bold"] .mobile-app-nav .nav-icon svg { stroke-width: 2.8; }
  body[data-nav-icons="bold"] .mobile-app-nav a.is-active .nav-icon { transform: none; }
  body[data-nav-icons="duotone"] .mobile-app-nav .nav-icon { width: calc(27px * var(--app-nav-scale, 1)); height: calc(27px * var(--app-nav-scale, 1)); padding: calc(4px * var(--app-nav-scale, 1)); border: 1px solid rgba(255,255,255,.16); border-radius: 9px; color: rgba(255,255,255,.82); background: linear-gradient(145deg, rgba(236,125,92,.45), rgba(125,41,70,.65)); }
  body[data-nav-icons="duotone"] .mobile-app-nav a.is-active .nav-icon { color: #fff; background: linear-gradient(145deg, var(--coral-500), var(--plum-700)); }
  body[data-nav-icons="emoji"] .mobile-app-nav .nav-icon svg { display: none; }
  body[data-nav-icons="emoji"] .mobile-app-nav .nav-icon::after { display: block; font-size: calc(1.08rem * var(--app-nav-scale, 1)); }
  body[data-nav-icons="emoji"] .mobile-app-nav a:nth-child(1) .nav-icon::after { content: '🏠'; }
  body[data-nav-icons="emoji"] .mobile-app-nav a:nth-child(2) .nav-icon::after { content: '👨‍👩‍👧'; font-size: calc(.92rem * var(--app-nav-scale, 1)); }
  body[data-nav-icons="emoji"] .mobile-app-nav a:nth-child(3) .nav-icon::after { content: '👥'; }
  body[data-nav-icons="emoji"] .mobile-app-nav a:nth-child(4) .nav-icon::after { content: '📅'; }
  body[data-nav-icons="emoji"] .mobile-app-nav a:nth-child(5) .nav-icon::after { content: '💬'; }
  body[data-nav-icons="emoji"] .mobile-app-nav a:nth-child(6) .nav-icon::after { content: '👤'; }
  .app-mascot { --mascot-x:calc(100vw - 84px); --mascot-bottom:calc(4.25rem + env(safe-area-inset-bottom)); width:72px; height:78px; }
  .app-install-banner { left: .65rem; right: .65rem; bottom: calc(6.7rem + env(safe-area-inset-bottom)); width: auto; grid-template-columns: 46px minmax(0, 1fr) 30px; gap: .65rem; padding: .7rem; border-radius: 17px; }.app-install-banner img { width: 46px; height: 46px; border-radius: 13px; }.app-install-banner .button { grid-column: 2; width: max-content; min-height: 36px; margin-top: .25rem; padding: .48rem .75rem; font-size: .72rem; }.app-install-copy strong { font-size: .88rem; }.app-install-copy small { white-space: normal; }.app-install-dismiss { grid-column: 3; grid-row: 1; align-self: start; width: 28px; height: 28px; }
  .app-main { padding: 1.2rem .8rem 7rem; }.dashboard-hero { align-items: flex-start; }.dashboard-hero h1 { font-size: 2.3rem; }.dashboard-hero .button { padding: .7rem .9rem; font-size: .75rem; }.stats-grid { grid-template-columns: 1fr 1fr; gap: .6rem; }.stats-grid article { min-height: 92px; padding: .75rem; }.stats-grid article > a { display: none; }.stat-icon { width: 40px; height: 40px; }.stats-grid strong { font-size: 1.25rem; }.stats-grid small { font-size: .68rem; }.panel { padding: 1rem; }.timeline article { grid-template-columns: 50px 1fr 26px; gap: .65rem; }.timeline time { width: 48px; height: 54px; }.timeline h3 { font-size: .95rem; }
  .auth-shell { min-height: calc(100vh - 66px); width: min(100% - 1.4rem, 600px); grid-template-columns: 1fr; gap: 2rem; padding: 2rem 0 4rem; }.auth-intro { text-align: center; }.auth-intro h1 { font-size: 3rem; }.auth-quote { display: none; }.auth-card { border-radius: 22px; }.auth-centered .auth-card h1 { font-size: 2.4rem; }
  .page-heading { min-height: 125px; align-items: flex-start; flex-direction: column; }.page-heading .button { width: 100%; }.people-grid { grid-template-columns: 1fr 1fr; gap: .65rem; }.family-people-grid { grid-template-columns: 1fr; gap: .85rem; }.family-person-card[open] { grid-column: 1; }.person-summary { min-height: 88px; padding: .8rem .9rem; grid-template-columns: 54px minmax(0, 1fr) 30px; }.person-avatar { width: 54px; height: 54px; }.family-person-card[open] .person-summary { padding: .9rem 1rem; }.person-details { padding: 1.1rem 1rem 1.25rem; }.person-details .person-meta { grid-template-columns: 1fr; padding: .9rem; }.person-cover { min-height: 95px; }.person-body { padding: 1rem; }.person-body h2 { font-size: 1.18rem; }
  .form-grid { grid-template-columns: 1fr; }.form-grid .full { grid-column: auto; }.permission-cards > label { grid-template-columns: 22px 40px 1fr; }.recipient-grid { grid-template-columns: 1fr 1fr; }
  .privacy-grid { grid-template-columns: 1fr; }.profile-autosave-status { position: fixed; left: 50%; top: auto; bottom: calc(3.6rem + 5px); width: max-content; max-width: calc(100% - 1.6rem); margin: 0; padding: 0; transform: translateX(-50%); text-shadow: 0 1px 7px var(--cream-50), 0 1px 3px var(--cream-50); }.enhanced-friends-layout { grid-template-columns: 1fr; }
  .calendar-list article { grid-template-columns: 55px 7px minmax(0, 1fr) 36px; gap: .6rem; padding: .8rem; }.calendar-list time strong { font-size: 1.55rem; }.event-copy h2 { font-size: 1.05rem; }.event-badges { display: none; }
  .inline-test-form { width: 100%; }.inline-test-form .field { min-width: 0; }.emergency-panel, .emergency-panel form { grid-template-columns: 1fr; }.emergency-intro { position: static; }.hold-submit { width: 100%; }.subscription-hero { align-items: flex-start; }.balance-ring { width: 95px; height: 95px; border-width: 8px; }.balance-ring strong { font-size: 1.7rem; }.billing-source-options { grid-template-columns: 1fr; }.sms-product-grid { grid-template-columns: 1fr 1fr; }.sms-quote-panel summary { align-items: flex-start; }.admin-links a { display: grid; }.admin-table-heading { align-items: flex-start; flex-direction: column; }.admin-family-summary { grid-template-columns: 1fr 1fr; }.admin-action-grid { grid-template-columns: 1fr; }.admin-family-heading form,.admin-family-heading form .button { width: 100%; }.admin-impersonation-bar { justify-content: space-between; }.admin-notification-filters,.admin-payment-filters { grid-template-columns: 1fr 1fr; }.admin-notification-filters > :first-child,.admin-payment-filters > :first-child { grid-column: 1 / -1; }.admin-member-form { min-width: 520px; grid-template-columns: 145px 135px 120px auto; }.legal-shell article section { grid-template-columns: 34px 1fr; }.relation-form { grid-template-columns: 1fr; }
  .pricing-note { grid-template-columns: 1fr; }.page-hero { padding-top: 3rem; }
}

@media (max-width: 1180px) {
  .mascot-showcase { grid-template-columns: minmax(280px,.7fr) minmax(470px,1.3fr); padding-inline: clamp(1.25rem,4vw,4rem); }
  .public-mascot-bunny,.public-mascot-reindeer { width: 132px; }.public-mascot-tanuki,.public-mascot-penguin { width: 138px; }.public-mascot-bear { width: 178px; }
  .public-mascot-tanuki { left: 17%; }.public-mascot-penguin { right: 17%; }
}

@media (max-width: 1050px) {
  .voice-showcase { grid-template-columns: 1fr; }.voice-showcase-copy { max-width: 760px; margin: auto; text-align: center; }.voice-showcase-copy > p,.voice-trust-note { margin-inline: auto; }.voice-benefits { width: min(610px,100%); margin-inline: auto; text-align: left; }.voice-demo { width: min(760px,100%); margin: auto; }
  .mascot-showcase { grid-template-columns: 1fr; }.mascot-showcase-copy { max-width: 760px; text-align: center; margin: auto; }.mascot-showcase-copy > p { margin-inline: auto; }.mascot-benefits { width: max-content; max-width: 100%; margin-inline: auto; text-align: left; }.mascot-world { width: min(800px,100%); margin: auto; }.mascot-roster,.mascot-public-credits { grid-column: 1; }
  .shopping-showcase { grid-template-columns: 1fr; }.shopping-showcase-copy { max-width: 760px; margin: auto; text-align: center; }.shopping-showcase h2 { margin-inline: auto; }.shopping-points { width: max-content; max-width: 100%; margin-inline: auto; text-align: left; }.privacy-note { justify-content: center; }
  .atmosphere-showcase-grid { grid-template-columns: repeat(3,1fr); }.public-weather:nth-child(4) { grid-column: 1 / 2; }.public-weather:nth-child(5) { grid-column: 2 / 3; }
}

@media (max-width: 760px) {
  .home-feature-ribbon { gap: .4rem; }.home-feature-ribbon span { padding: .42rem .65rem; font-size: .61rem; }
  .voice-showcase { padding: 4.8rem 1rem 3.5rem; gap: 1.8rem; }.voice-showcase h2 { font-size: clamp(2.6rem,12vw,4.1rem); }.voice-showcase-copy > p:not(.voice-trust-note) { font-size: .86rem; }.voice-demo { min-height: 620px; }.voice-demo-orbit-one { width: 430px; height: 430px; }.voice-demo-orbit-two { width: 500px; height: 320px; }.voice-phone { width: min(310px,78vw); min-height: 560px; }.voice-demo-card { min-width: 205px; }.voice-demo-consent { right: -.5rem; top: 75px; }.voice-demo-date { left: -.5rem; bottom: 70px; }
  .mascot-showcase { padding: 4.5rem .8rem 2.5rem; gap: 2.4rem; }.mascot-showcase-copy { padding-inline: .45rem; }.mascot-showcase h2 { font-size: clamp(2.6rem,12vw,4.1rem); }.mascot-world { min-height: 460px; border-radius: 28px; }.mascot-world::after { left: 5%; right: 5%; bottom: 92px; height: 142px; }.mascot-world-ground { height: 76px; }.mascot-world-moon { width: 58px; height: 58px; }.mascot-speech-demo { top: 6%; max-width: 220px; font-size: .61rem; }
  .public-mascot-bear { width: 150px; bottom: 22px; }.public-mascot-bunny,.public-mascot-reindeer { width: 103px; bottom: 35px; }.public-mascot-tanuki,.public-mascot-penguin { width: 112px; bottom: 27px; }.public-mascot-tanuki { left: 15%; }.public-mascot-penguin { right: 15%; }.public-mascot strong { padding: .22rem .4rem; font-size: .5rem; }
  .mascot-roster { gap: .38rem; }.mascot-roster span { padding: .42rem .58rem; font-size: .58rem; }
  .shopping-showcase { padding: 4.8rem 1rem; gap: 2.3rem; }.shopping-demo { padding: .78rem; border-radius: 24px; transform: none; }.shopping-demo::before { inset: 16px -8px -12px 14px; }.shopping-demo-list article { grid-template-columns: 29px minmax(0,1fr); }.shopping-demo-list article > b { grid-column: 2; }.shopping-demo-person { grid-template-columns: 42px 1fr; }.shopping-demo-person > b { grid-column: 2; width: max-content; }
  .atmosphere-showcase { padding: 4.8rem 1rem; }.atmosphere-showcase-grid { grid-template-columns: 1fr 1fr; gap: .65rem; }.public-weather:nth-child(4),.public-weather:nth-child(5) { grid-column: auto; }.public-weather:nth-child(5) { grid-column: 1 / -1; }.public-weather > div { height: 145px; }.public-weather:nth-child(5) > div { height: 130px; }
  .feature-mosaic-section { padding: 4.8rem 1rem; }.feature-mosaic { grid-template-columns: 1fr; }.feature-mosaic-large { grid-column: 1; min-height: 310px !important; grid-template-columns: 58px minmax(0,1fr) !important; align-content: center; }.feature-mosaic-large .install-pill { grid-column: 1 / -1; }.feature-mosaic article { min-height: 220px; }
}

@media (max-width: 470px) {
  body.is-public .site-header { padding-inline: .65rem; }.header-actions { gap: .3rem; }.header-actions .button { min-height: 38px; padding: .58rem .72rem; font-size: .71rem; }
  .voice-benefits article { grid-template-columns: 38px minmax(0,1fr); }.voice-benefits article > span { width: 38px; height: 38px; }.voice-benefits strong { font-size: .8rem; }.voice-benefits small { font-size: .64rem; }.voice-demo { min-height: 585px; }.voice-phone { width: min(288px,79vw); min-height: 540px; border-width: 6px; }.voice-call-state { padding-top: 2.75rem; }.voice-call-avatar { width: 92px; height: 92px; }.voice-demo-card { min-width: 0; width: 182px; padding: .7rem .75rem; }.voice-demo-consent { right: -.6rem; top: 63px; }.voice-demo-date { left: -.6rem; bottom: 58px; }
  .people-grid, .recipient-grid { grid-template-columns: 1fr; }.stats-grid,.sms-product-grid,.admin-family-summary { grid-template-columns: 1fr; }.subscription-hero { gap: .8rem; }.subscription-hero h2 { font-size: 1.8rem; }.balance-ring { width: 84px; height: 84px; }.sms-quote-panel summary { display: grid; }.sms-quote-panel summary > span:last-child { white-space: normal; }.admin-impersonation-bar { align-items: flex-start; flex-direction: column; gap: .35rem; }.admin-notification-filters,.admin-payment-filters { grid-template-columns: 1fr; }.admin-notification-filters > :first-child,.admin-payment-filters > :first-child { grid-column: auto; }.admin-payment-detail-body { width: 86vw; }
  .mascot-world { min-height: 410px; }.public-mascot-bear { width: 132px; }.public-mascot-bunny,.public-mascot-reindeer { width: 88px; }.public-mascot-tanuki,.public-mascot-penguin { width: 94px; }.public-mascot-tanuki { left: 14%; }.public-mascot-penguin { right: 14%; }.mascot-speech-demo { width: max-content; max-width: 205px; }
  .shopping-demo-top { align-items: flex-start; flex-direction: column; gap: .2rem; }.shopping-demo-add { grid-template-columns: 1fr; }.shopping-demo-add button { width: 100%; }
}

.profile-social-accounts > summary { cursor: pointer; list-style: none; border-radius: 8px; }
.profile-social-accounts > summary::-webkit-details-marker { display: none; }
.profile-social-accounts > summary:focus-visible { outline: 3px solid var(--plum-700); outline-offset: 6px; }
.profile-social-accounts > summary h2 { margin: 0; display: flex; align-items: center; gap: .8rem; font-size: 1.25rem; }
.profile-social-icon { flex: 0 0 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; color: var(--plum-700); background: var(--cream-50); }
.profile-social-chevron { margin-left: auto; flex-shrink: 0; transition: transform .2s ease; }
.profile-social-accounts[open] .profile-social-chevron { transform: rotate(180deg); }
.profile-social-accounts > .field-note { margin: 1rem 0; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }