:root {
  --ink: #0b2b4e;
  --muted: #5c6073;
  --cream: #fbf4e5;
  --paper: rgba(255, 251, 241, .92);
  --gold: #b78936;
  --line: rgba(137, 99, 40, .25);
  --blue: #0c4f7e;
  --shadow: 0 18px 55px rgba(67, 45, 12, .13);
  --radius: 28px;
}
* { box-sizing: border-box; }
html { background: var(--cream); }
body { margin: 0; min-height: 100vh; color: var(--ink); font-family: Manrope, system-ui, sans-serif; background: radial-gradient(circle at 20% 0%, #fffaf0 0 26%, transparent 48%), linear-gradient(145deg, #f7ead2, #fffaf1 45%, #f1e4ca); }
button, input, textarea, select { font: inherit; }
button { color: inherit; }
.ambient { position: fixed; border-radius: 50%; filter: blur(40px); opacity: .33; pointer-events: none; animation: drift 12s ease-in-out infinite alternate; }
.ambient-one { width: 310px; height: 310px; background: #8ed9e3; top: -120px; right: -100px; }
.ambient-two { width: 240px; height: 240px; background: #f5c088; bottom: -90px; left: -70px; animation-delay: -4s; }
@keyframes drift { to { transform: translate3d(-18px, 24px, 0) scale(1.08); } }
.app-shell { position: relative; width: min(100%, 520px); min-height: 100dvh; margin: 0 auto; background: var(--paper); box-shadow: var(--shadow); overflow: hidden; padding-bottom: 92px; }
.screen { min-height: calc(100dvh - 82px); padding: 22px 20px 30px; animation: appear .35s ease; }
@keyframes appear { from { opacity: 0; transform: translateY(8px); } }
.topbar { display: flex; align-items: center; justify-content: space-between; min-height: 42px; gap: 12px; }
.brand { font-family: Prata, serif; letter-spacing: .18em; font-size: 28px; }
.brand::after { content: '✦'; font-family: serif; font-size: 12px; margin-left: 7px; color: var(--gold); }
.icon-btn { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line); background: rgba(255,255,255,.58); display: grid; place-items: center; cursor: pointer; }
.hero { position: relative; margin: 12px -20px 0; height: 50vh; min-height: 390px; overflow: hidden; }
.hero img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%; }
.hero::after { content: ''; position: absolute; inset: auto 0 0; height: 42%; background: linear-gradient(transparent, #fbf4e5); }
.hero-copy { position: relative; z-index: 2; margin-top: -120px; text-align: center; padding: 0 12px; }
h1,h2,h3 { font-family: Prata, serif; font-weight: 400; margin: 0; }
h1 { font-size: clamp(34px, 10vw, 48px); line-height: 1.07; }
h2 { font-size: 30px; line-height: 1.12; }
h3 { font-size: 21px; }
p { line-height: 1.55; }
.eyebrow { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #8b6932; font-weight: 700; }
.subtitle { color: var(--muted); margin: 10px 0 22px; }
.btn { width: 100%; min-height: 56px; border: 0; border-radius: 999px; padding: 14px 20px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 10px; font-weight: 700; transition: .2s ease; }
.btn:active { transform: scale(.985); }
.btn-primary { color: white; background: linear-gradient(135deg, #163f67, #07517d); box-shadow: 0 10px 28px rgba(8,69,108,.24); }
.btn-secondary { background: rgba(255,255,255,.52); border: 1px solid var(--line); }
.btn-quiet { background: transparent; border: 1px solid var(--line); }
.card { background: rgba(255,255,255,.48); border: 1px solid var(--line); border-radius: 22px; padding: 18px; box-shadow: 0 10px 32px rgba(80,50,10,.06); }
.quick-card { margin-top: 12px; display: grid; grid-template-columns: 64px 1fr 28px; align-items: center; gap: 12px; text-align: left; cursor: pointer; width: 100%; }
.quick-card img { width: 64px; height: 64px; border-radius: 17px; object-fit: cover; }
.quick-card small { color: var(--muted); display: block; margin-top: 3px; }
.section-title { margin: 10px 0 20px; text-align: center; }
.progress { display: flex; gap: 8px; margin: 18px 0 24px; }
.progress i { height: 5px; flex: 1; background: #e7dcc9; border-radius: 99px; }
.progress i.done { background: linear-gradient(90deg,#2c7b9d,#d9a441); }
.palette { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; }
.swatch { position: relative; border: 0; padding: 0; background: transparent; cursor: pointer; text-align: left; }
.swatch img { width: 100%; aspect-ratio: 1; object-fit: contain; display: block; filter: drop-shadow(0 9px 14px rgba(63,43,11,.15)); transition: .2s ease; }
.swatch.selected img { transform: scale(.96); filter: drop-shadow(0 0 0 #fff) drop-shadow(0 0 12px rgba(26,104,149,.45)); }
.swatch.selected::after { content: '✓'; position: absolute; top: 5px; right: 5px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items:center; background: #0c4f7e; color:#fff; border:2px solid #fff; }
.swatch span { display:block; text-align:center; font-weight:700; margin-top:4px; }
.swatch small { display:block; text-align:center; color:var(--muted); }
.selection-dock { position: sticky; bottom: 86px; margin: 18px -8px 0; padding: 10px; background: rgba(251,244,229,.88); backdrop-filter: blur(12px); border-radius: 24px; }
.mosaic { width: min(100%, 380px); aspect-ratio: 1; margin: 18px auto; border-radius: 50%; padding: 12px; background: conic-gradient(var(--c1,#1d6fa4) 0 33%, var(--c2,#39a9a7) 33% 66%, var(--c3,#edac71) 66%); border: 4px double #bb8735; box-shadow: inset 0 0 0 8px rgba(255,250,226,.42), 0 18px 35px rgba(62,44,18,.16); display:grid; place-items:center; overflow:hidden; }
.mosaic img { width: 45%; aspect-ratio:1; border-radius:50%; object-fit:cover; border:4px solid #b88635; }
.feedback-row,.chip-row { display:flex; flex-wrap:wrap; gap:8px; }
.chip { border:1px solid var(--line); background:#fffaf0; border-radius:999px; padding:10px 13px; cursor:pointer; }
.chip.active { background:var(--ink); color:white; }
.stack { display:grid; gap:12px; }
.field { display:grid; gap:7px; }
.field label { font-size:13px; font-weight:700; }
.field input,.field textarea,.field select { width:100%; border:1px solid var(--line); border-radius:16px; padding:14px; background:rgba(255,255,255,.72); color:var(--ink); }
.field textarea { min-height:100px; resize:vertical; }
.practice-hero { margin: 16px 0; border-radius: 26px; overflow:hidden; position:relative; min-height: 330px; background:#0d4f76; }
.practice-hero img { width:100%; height:100%; position:absolute; object-fit:cover; filter:brightness(var(--brightness,1)); }
.practice-hero::after { content:''; position:absolute; inset:0; background:linear-gradient(transparent 45%,rgba(3,31,51,.72)); }
.practice-overlay { position:absolute; inset:auto 18px 18px; z-index:1; color:white; text-align:center; }
.timer { font: 42px Prata,serif; margin:8px; }
.breath-orb { width:110px; height:110px; margin:0 auto; border-radius:50%; background:rgba(226,247,255,.75); border:1px solid white; box-shadow:0 0 45px rgba(159,224,255,.75); animation:breathe 8s ease-in-out infinite; }
@keyframes breathe { 50% { transform:scale(1.18); opacity:.82; } }
.still .breath-orb { animation:none; }
.range-line { display:grid; grid-template-columns: 1fr auto; align-items:center; gap:12px; }
.range-line input { width:100%; accent-color:#17658d; }
.score { font: 38px Prata,serif; min-width:42px; text-align:center; }
.week-ring { display:grid; grid-template-columns:repeat(7,1fr); gap:7px; margin:16px 0; }
.day { aspect-ratio:1; border-radius:50%; border:2px solid #c59a52; background:#e9e3d7; position:relative; overflow:hidden; }
.day img { width:100%; height:100%; object-fit:cover; }
.day span { position:absolute; inset:auto 0 3px; text-align:center; font-size:9px; color:white; text-shadow:0 1px 4px #000; }
.history-item { display:grid; grid-template-columns:58px 1fr auto; align-items:center; gap:12px; }
.history-item img { width:58px; height:58px; object-fit:contain; }
.empty { text-align:center; color:var(--muted); padding:24px 10px; }
.notice { padding:12px 14px; border-radius:16px; background:#eef6f2; border:1px solid #cfe1d4; color:#2d6048; font-size:13px; }
.warning { background:#fff4df; border-color:#ead2a7; color:#7c5824; }
.toggle { display:flex; align-items:center; justify-content:space-between; gap:14px; }
.toggle input { width:20px; height:20px; accent-color:#17658d; }
.nav { position:fixed; z-index:10; bottom:0; left:50%; transform:translateX(-50%); width:min(100%,520px); display:grid; grid-template-columns:repeat(4,1fr); padding:10px 8px calc(10px + env(safe-area-inset-bottom)); background:rgba(255,249,237,.92); backdrop-filter:blur(16px); border-top:1px solid var(--line); }
.nav button { border:0; background:transparent; display:grid; gap:4px; justify-items:center; color:#6f6a67; font-size:11px; cursor:pointer; }
.nav button b { font-size:20px; line-height:1; font-weight:400; }
.nav button.active { color:var(--ink); font-weight:700; }
.toast { position:fixed; z-index:30; left:50%; bottom:100px; transform:translate(-50%,18px); width:min(88%,420px); padding:13px 16px; border-radius:16px; background:#0d2d4d; color:white; opacity:0; pointer-events:none; transition:.25s; text-align:center; }
.toast.show { opacity:1; transform:translate(-50%,0); }
.modal { position:fixed; z-index:20; inset:0; background:rgba(7,24,41,.45); display:grid; align-items:end; padding:12px; }
.sheet { width:min(100%,500px); margin:0 auto; max-height:90dvh; overflow:auto; background:#fffaf0; border-radius:28px 28px 18px 18px; padding:24px; box-shadow:var(--shadow); }
.share-card { aspect-ratio:4/5; border-radius:24px; padding:22px; color:white; background:linear-gradient(145deg,#0b365d,#1584a4 55%,#dfa65c); display:flex; flex-direction:column; justify-content:space-between; text-align:center; overflow:hidden; }
.share-card .mosaic { width:78%; border-color:#f1c56f; }
.admin-badge { display:inline-flex; padding:5px 9px; border-radius:99px; font-size:11px; background:#f2dfb7; color:#65450d; }
.small { font-size:13px; color:var(--muted); }
.actions { display:grid; gap:10px; margin-top:18px; }
.spacer { height:8px; }
@media (min-width: 800px) { .app-shell { margin:30px auto; min-height:calc(100vh - 60px); border-radius:36px; } .nav { bottom:30px; border-radius:0 0 36px 36px; } }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; scroll-behavior:auto!important; } }