:root{
  --bg:#F2F7F6;
  --primary:#84B9AF;
  --primary-dark:#2C6E6B;
  --ink:#22444D;
  --card:#FFFFFF;
  --muted:#6A8B8F;
  --accent:#DCD8EE;
}
*{box-sizing:border-box}
html, body { margin:0; padding:0; height:100%; -webkit-text-size-adjust:100%; background:var(--bg); color:var(--ink); font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Inter,Arial; }
body{ overflow-x:hidden; }
header{position:sticky;top:0;background:linear-gradient(180deg,var(--primary),#9ed0c7);padding:16px 20px;color:#fff;z-index:10}
header h1{margin:0;font-size:24px}
header small{opacity:.9}
.container{
  max-width: 720px;
  margin: 0 auto;
  padding-left: calc(env(safe-area-inset-left, 0px) + 16px);
  padding-right: calc(env(safe-area-inset-right, 0px) + 16px);
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 96px);
  padding-top: 16px;
}
.card{background:var(--card);border-radius:14px;padding:14px 16px;margin:10px 0;box-shadow:0 6px 18px rgba(0,0,0,0.06)}
.card h3{margin:.25rem 0}
button, .btn{background:var(--primary);color:#fff;border:none;border-radius:12px;padding:12px 16px;font-size:16px;cursor:pointer}
.btn-secondary{background:var(--primary-dark)}
.row{display:flex;gap:10px;flex-wrap:wrap}
.tag{display:inline-block;background:var(--accent);color:var(--ink);padding:6px 10px;border-radius:999px;font-size:12px;margin-right:6px}
nav.bottom{position:fixed;bottom:0;left:0;right:0;background:#fff;border-top:1px solid #E5EFEF;display:flex;justify-content:space-around;padding:10px 0; padding-bottom: calc(10px + env(safe-area-inset-bottom,0px));}
nav.bottom button{background:none;color:var(--ink);padding:10px;border-radius:10px}
.active{color:var(--primary-dark);font-weight:600}
h2{margin:8px 0 0}
input, select, textarea{width:100%;padding:12px;border:1px solid #dfe7e7;border-radius:10px}
label{font-size:14px;color:var(--muted)}
.footer{font-size:12px;color:var(--muted);text-align:center;margin:16px 0}
.mood-emoji{font-size:28px;cursor:pointer;filter:grayscale(40%)}
.mood-emoji.selected{filter:none;transform:scale(1.08)}
.progress{height:10px;background:#e7f2f1;border-radius:12px;overflow:hidden}
.progress > div{height:100%;background:var(--primary);width:0%}
.notice{background:#fff4e5;color:#7a4d00;padding:10px;border-radius:10px}
.badge{background:var(--primary-dark);color:#fff;font-size:12px;padding:4px 8px;border-radius:8px}
.grid{display:grid;grid-template-columns:1fr;gap:12px}
@media(min-width:700px){.grid{grid-template-columns:repeat(2,1fr)}}
.videoWrap{position:relative;width:100%;padding-top:56.25%;border-radius:12px;overflow:hidden}
.videoWrap iframe{position:absolute;top:0;left:0;width:100%;height:100%}
img, video, iframe { max-width:100%; height:auto; }


/* Built-in Breathing Coach */
.breath-wrap{display:flex;flex-direction:column;align-items:center;gap:12px;margin:16px 0}
.breath-circle{width:160px;height:160px;border-radius:50%;background:radial-gradient(circle at 30% 30%, #9ed0c7, #84B9AF); box-shadow:0 8px 24px rgba(0,0,0,0.12); transform:scale(1);}
.breath-label{font-size:18px;color:#2C6E6B;font-weight:600}
.breath-timer{font-variant-numeric:tabular-nums;font-size:20px;color:#22444D}
@keyframes inhale { from{transform:scale(1)} to{transform:scale(1.25)} }
@keyframes exhale { from{transform:scale(1.25)} to{transform:scale(1)} }
.breath-inhale{ animation: inhale 4s ease-in forwards; }
.breath-hold{ animation: none; }
.breath-exhale{ animation: exhale 6s ease-out forwards; }
.muted{color:#6A8B8F;font-size:12px}

.card h3{margin:0 0 8px 0}