:root{
  /* 淡い水色テーマ（変数名は据え置き） */
  --pink:#8fd3ea;       /* メインの淡い水色 */
  --pink-d:#4fb0d4;     /* 濃いめのアクセント水色 */
  --pink-l:#d4edf7;     /* 薄い水色 */
  --cream:#f3fbfe;      /* 背景の生成り→淡い水色白 */
  --cream-d:#e6f4fb;
  --ink:#3f5765;        /* やわらかい青みグレー */
  --ink-l:#89a6b4;
  --mint:#bfe9dd;
  --gold:#ffe1a8;       /* ベル・差し色の暖色 */
  --shadow:0 6px 18px rgba(79,176,212,.25);
  --radius:22px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;}
body{
  font-family:"Hiragino Maru Gothic ProN","Yu Gothic UI","Segoe UI",sans-serif;
  background:linear-gradient(160deg,#eaf7fc 0%,var(--cream) 60%);
  color:var(--ink);
  padding-bottom:84px;
  min-height:100vh;
  overscroll-behavior:none;
}
h1{font-size:1.25rem;margin:0;font-weight:800;letter-spacing:.02em;}

/* 画面切替 */
.screen{display:none;animation:fade .25s ease;}
.screen.active{display:block;}
@keyframes fade{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}

.app-header{
  position:sticky;top:0;z-index:5;
  padding:calc(env(safe-area-inset-top) + 14px) 18px 14px;
  background:linear-gradient(120deg,var(--pink) 0%,var(--pink-d) 100%);
  color:#fff;border-radius:0 0 26px 26px;
  box-shadow:var(--shadow);text-align:center;
}
.content{padding:16px;max-width:520px;margin:0 auto;}

/* カード */
.card{
  background:#fff;border-radius:var(--radius);padding:16px;margin:14px 0;
  box-shadow:0 4px 14px rgba(170,130,150,.12);
}
.card-title{font-weight:800;margin-bottom:12px;display:flex;align-items:center;justify-content:space-between;gap:8px;}

/* 継続日数ピル（瞑想画面） */
.streak-pill{display:inline-block;margin:14px auto 0;padding:9px 18px;border-radius:999px;
  background:linear-gradient(120deg,var(--gold),#ffcf7a);color:#7a5a1a;font-weight:800;
  box-shadow:0 4px 12px rgba(255,200,120,.45);width:100%;text-align:center;}

/* 継続日数カード（記録画面） */
.streak-card{display:flex;align-items:center;gap:16px;background:linear-gradient(120deg,#fff6e3,#fffdf8);}
.streak-flame{font-size:2.6rem;}
.streak-main{flex:1;}
.streak-num{font-size:1.2rem;color:var(--ink-l);font-weight:700;}
.streak-num span{font-size:2.6rem;font-weight:900;color:#f0993a;margin-right:2px;}
.streak-sub{color:var(--ink-l);font-weight:700;font-size:.85rem;margin-top:2px;}

/* モード切替 */
.mode-switch{display:flex;gap:6px;background:var(--cream-d);padding:6px;border-radius:18px;margin-top:16px;}
.mode-btn{flex:1;border:none;background:transparent;padding:9px 4px;border-radius:14px;font-weight:800;color:var(--ink-l);font-size:1.2rem;transition:.2s;display:flex;flex-direction:column;align-items:center;gap:2px;}
.mode-btn span{font-size:.66rem;font-weight:800;}
.mode-btn.active{background:#fff;color:var(--pink-d);box-shadow:0 2px 8px rgba(79,176,212,.3);}

/* ボディスキャン */
.bs-note{color:var(--ink-l);font-size:.8rem;margin:8px 0 0;}
.bodyscan-caption{background:#fff;border-radius:16px;padding:14px 18px;margin:6px auto 14px;max-width:420px;text-align:center;font-weight:700;color:var(--ink);line-height:1.6;box-shadow:0 4px 14px rgba(170,130,150,.12);min-height:1.6em;}

/* 計測方式の切替 */
.meas-mode{display:flex;gap:6px;background:var(--cream-d);padding:5px;border-radius:14px;margin:0 0 12px;}
.meas-btn{flex:1;border:none;background:transparent;padding:9px;border-radius:11px;font-weight:800;color:var(--ink-l);font-size:.9rem;transition:.2s;}
.meas-btn.active{background:#fff;color:var(--pink-d);box-shadow:0 2px 8px rgba(79,176,212,.3);}

/* 時間設定 */
.duration-picker{margin:18px 0;text-align:center;}
.dp-label{font-weight:700;color:var(--ink-l);}
.dp-controls{display:flex;align-items:center;justify-content:center;gap:18px;margin:10px 0;}
.dp-step{width:54px;height:54px;border-radius:50%;border:none;background:var(--pink-l);color:var(--pink-d);font-size:1.8rem;font-weight:800;box-shadow:var(--shadow);}
.dp-step:active{transform:scale(.92);}
.dp-value{font-size:2.6rem;font-weight:900;color:var(--pink-d);}
.dp-value small{font-size:1rem;color:var(--ink-l);margin-left:2px;}
.dp-presets{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;}
.dp-presets button{border:none;background:var(--cream-d);color:var(--ink);padding:8px 14px;border-radius:14px;font-weight:700;}
.dp-presets button:active{background:var(--pink-l);}

/* タイマーリング */
.timer-ring-wrap{position:relative;width:240px;height:240px;margin:10px auto;}
.timer-ring{transform:rotate(-90deg);width:240px;height:240px;}
.ring-bg{fill:none;stroke:var(--pink-l);stroke-width:14;}
.ring-fg{fill:none;stroke:var(--pink);stroke-width:14;stroke-linecap:round;
  stroke-dasharray:628;stroke-dashoffset:0;transition:stroke-dashoffset .9s linear;}
.timer-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;}
.timer-time{font-size:3rem;font-weight:900;color:var(--ink);letter-spacing:.02em;}
.timer-state{color:var(--ink-l);font-weight:700;margin-top:4px;}

/* 操作ボタン */
.timer-controls{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:6px 0 4px;}
.btn-primary,.btn-secondary,.btn-ghost,.btn-danger{
  border:none;padding:15px 26px;border-radius:18px;font-weight:800;font-size:1.05rem;box-shadow:var(--shadow);
}
.btn-primary{background:linear-gradient(120deg,var(--pink),var(--pink-d));color:#fff;}
.btn-secondary{background:var(--gold);color:#7a5a1a;}
.btn-ghost{background:#fff;color:var(--ink-l);box-shadow:inset 0 0 0 2px var(--pink-l);}
.btn-danger{background:#ffe0e0;color:#d2554f;width:100%;box-shadow:none;}
.btn-primary:active,.btn-secondary:active,.btn-ghost:active{transform:scale(.96);}

/* 環境音 */
.sound-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;}
.sound-btn{border:none;background:var(--cream-d);border-radius:16px;padding:10px 4px;font-size:1.5rem;display:flex;flex-direction:column;align-items:center;gap:4px;transition:.2s;}
.sound-btn span{font-size:.7rem;font-weight:700;color:var(--ink-l);}
.sound-btn.active{background:var(--pink-l);box-shadow:0 2px 8px rgba(255,143,177,.35);}
.sound-btn.active span{color:var(--pink-d);}
.volume-row{display:flex;align-items:center;gap:10px;margin-top:14px;}
.volume-row input[type=range]{flex:1;accent-color:var(--pink);height:6px;}

/* スイッチ */
.switch{position:relative;display:inline-block;width:50px;height:28px;}
.switch input{display:none;}
.slider-sw{position:absolute;inset:0;background:var(--pink-l);border-radius:28px;transition:.25s;}
.slider-sw:before{content:"";position:absolute;width:22px;height:22px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.25s;box-shadow:0 1px 4px rgba(0,0,0,.2);}
.switch input:checked + .slider-sw{background:var(--pink-d);}
.switch input:checked + .slider-sw:before{transform:translateX(22px);}

/* HRV */
.hrv-hint{color:var(--ink-l);font-size:.85rem;line-height:1.5;}
.hrv-panel{margin-top:10px;}

/* 指モード：小さな丸／顔モード：大きめ枠＋楕円ガイド */
.hrv-cam-wrap{position:relative;float:left;margin:0 14px 8px 0;background:#000;overflow:hidden;}
.hrv-cam-wrap #hrv-video{width:100%;height:100%;object-fit:cover;display:block;}
.hrv-cam-wrap .face-guide{display:none;position:absolute;inset:0;pointer-events:none;}
.hrv-cam-wrap.finger{width:64px;height:64px;border-radius:50%;border:3px solid var(--pink-l);}
.hrv-cam-wrap.face{width:120px;height:150px;border-radius:18px;border:3px solid var(--pink-l);}
.hrv-cam-wrap.face #hrv-video{transform:scaleX(-1);} /* インカメラは鏡像に */
.hrv-cam-wrap.face .face-guide{display:block;border:3px dashed rgba(255,255,255,.85);border-radius:50%;margin:18px 28px;inset:0;}
.hrv-quality{font-weight:700;color:var(--ink-l);margin-bottom:8px;}
.hrv-numbers{display:flex;gap:18px;align-items:flex-end;}
.hrv-num{display:flex;flex-direction:column;}
.hrv-num span{font-size:1.6rem;font-weight:900;color:var(--ink);}
.hrv-num small{color:var(--ink-l);font-size:.7rem;}
.hrv-num.big span{font-size:2.4rem;color:var(--pink-d);}
.hrv-bar{clear:both;height:12px;background:var(--cream-d);border-radius:8px;margin-top:12px;overflow:hidden;}
.hrv-bar-fill{height:100%;width:0;background:linear-gradient(90deg,var(--gold),var(--mint),var(--pink));border-radius:8px;transition:width .6s;}

/* 記録 */
.stat-row{display:flex;gap:12px;}
.stat-card{flex:1;text-align:center;}
.stat-label{color:var(--ink-l);font-weight:700;font-size:.85rem;}
.stat-big{font-size:2rem;font-weight:900;color:var(--pink-d);margin:6px 0;}
.stat-sub{color:var(--ink-l);font-size:.78rem;}
#chart-week{width:100%;}
.history-list{display:flex;flex-direction:column;gap:8px;max-height:340px;overflow:auto;}
.history-item{display:flex;justify-content:space-between;align-items:center;background:var(--cream);border-radius:14px;padding:10px 14px;}
.history-item .hi-date{font-weight:700;}
.history-item .hi-sub{font-size:.78rem;color:var(--ink-l);}
.history-item .hi-score{font-weight:900;color:var(--pink-d);font-size:1.2rem;}
.history-empty{text-align:center;color:var(--ink-l);padding:20px;}

/* 設定 */
.setting-row{display:flex;justify-content:space-between;align-items:center;gap:10px;font-weight:700;}
.setting-note{color:var(--ink-l);font-size:.8rem;line-height:1.5;margin:10px 0 0;}

/* ナビ */
.bottom-nav{
  position:fixed;left:0;right:0;bottom:0;z-index:10;
  display:flex;background:#fff;border-radius:24px 24px 0 0;
  box-shadow:0 -4px 18px rgba(170,130,150,.18);
  padding:8px 6px calc(env(safe-area-inset-bottom) + 8px);
}
.nav-btn{flex:1;border:none;background:transparent;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:1.4rem;color:var(--ink-l);padding:4px;}
.nav-btn span{font-size:.7rem;font-weight:800;}
.nav-btn.active{color:var(--pink-d);}

/* モーダル */
.modal{position:fixed;inset:0;z-index:50;background:rgba(90,74,82,.45);display:flex;align-items:center;justify-content:center;padding:24px;backdrop-filter:blur(3px);}
.modal-box{background:#fff;border-radius:28px;padding:30px 24px;text-align:center;max-width:340px;width:100%;box-shadow:0 10px 40px rgba(0,0,0,.2);animation:pop .3s ease;}
@keyframes pop{from{transform:scale(.85);opacity:0;}to{transform:scale(1);opacity:1;}}
.modal-emoji{font-size:3rem;}
.modal-box h2{margin:8px 0 18px;color:var(--pink-d);}
.modal-stats{display:flex;justify-content:center;gap:30px;margin-bottom:22px;}
.modal-stats div{display:flex;flex-direction:column;}
.modal-stats span{font-size:1.8rem;font-weight:900;color:var(--ink);}
.modal-stats small{color:var(--ink-l);}

/* 没入画面（瞑想中：顔をフルスクリーン背景に、時計を前面に表示） */
.focus-screen{
  position:fixed;inset:0;z-index:100;
  background:linear-gradient(160deg,#1a3a4a 0%,#0a1a26 100%);
  overflow:hidden;color:#fff;
}
#focus-video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;transform:scaleX(-1);
  filter:brightness(.55);
}
.focus-overlay{
  position:relative;z-index:1;width:100%;height:100%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding-top:env(safe-area-inset-top);
  padding-bottom:env(safe-area-inset-bottom);
}
.focus-state{
  font-size:.95rem;opacity:.85;letter-spacing:.05em;
  text-shadow:0 2px 8px rgba(0,0,0,.8);
  margin-bottom:14px;
}
.focus-time{
  font-size:5.5rem;font-weight:900;
  text-shadow:0 4px 24px rgba(0,0,0,.9),0 0 30px rgba(0,0,0,.4);
  letter-spacing:.04em;
  font-variant-numeric:tabular-nums;
}
.focus-caption{
  margin-top:24px;font-size:1.05rem;
  text-align:center;padding:0 28px;
  text-shadow:0 2px 10px rgba(0,0,0,.95);
  max-width:380px;line-height:1.6;min-height:1.7em;
}
.focus-controls{
  position:absolute;left:0;right:0;
  bottom:calc(env(safe-area-inset-bottom) + 34px);
  display:flex;gap:22px;justify-content:center;
}
.focus-btn{
  width:58px;height:58px;border-radius:50%;
  border:2px solid rgba(255,255,255,.55);
  background:rgba(255,255,255,.18);
  color:#fff;font-size:1.35rem;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  cursor:pointer;
}
.focus-btn:active{transform:scale(.92);}
.focus-stop{border-color:rgba(255,160,160,.75);color:#ffa0a0;}

.hidden{display:none !important;}