.habit-card { padding:clamp(20px,4vw,32px); margin-bottom:24px; border:1px solid var(--border-color); border-radius:20px; background:var(--card-color); color:var(--text-color); }
.habit-topline { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:12px; }
.habit-eyebrow { color:var(--text-muted); font-size:.88em; margin:0; }
.habit-card h2 { font-size:clamp(1.4rem,4vw,2rem); margin:14px 0 8px; line-height:1.5; }
.habit-streak { padding:8px 12px; border-radius:99px; background:var(--card-color-alt); font-weight:700; }
.habit-course { margin:0 0 20px; line-height:1.7; overflow-wrap:anywhere; }
.habit-button { display:inline-flex; box-sizing:border-box; align-items:center; justify-content:center; min-height:48px; padding:12px 20px; border:1px solid var(--border-color); border-radius:12px; background:var(--card-color-alt); color:var(--text-color); text-decoration:none; font:inherit; font-weight:700; cursor:pointer; line-height:1.5; text-align:center; }
.habit-button.primary { background:#6d28d9; border-color:#6d28d9; color:#fff; }
.habit-button:focus-visible, .habit-nav a:focus-visible { outline:3px solid var(--primary-color); outline-offset:3px; }
.habit-main-action { width:100%; }
.habit-compact { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:8px 16px; margin-top:18px; padding-top:16px; border-top:1px solid var(--border-color); font-size:.88em; line-height:1.7; }
.habit-compact a { display:inline-flex; align-items:center; min-height:44px; color:var(--secondary-color); }
.habit-compact a:focus-visible { outline:3px solid var(--primary-color); outline-offset:3px; }
.habit-main-action { margin-top:12px; }
.habit-secondary { display:flex; flex-wrap:wrap; gap:10px; margin-top:14px; }
.habit-secondary > * { flex:1 1 130px; }
.habit-mission { margin-top:24px; padding-top:20px; border-top:1px solid var(--border-color); }
.habit-mission-title { display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px; line-height:1.6; margin-bottom:10px; }
.habit-mission-complete { margin:0; color:var(--secondary-color); font-weight:700; line-height:1.7; overflow-wrap:anywhere; }
.habit-mission [hidden], [data-habit-secondary-status][hidden] { display:none !important; }
.habit-progress { width:100%; height:12px; display:block; accent-color:#6d28d9; border:0; border-radius:99px; overflow:hidden; background:var(--ring-track,var(--border-color)); }
.habit-progress::-webkit-progress-bar { background:var(--ring-track,var(--border-color)); border-radius:99px; }
.habit-progress::-webkit-progress-value { background:#6d28d9; border-radius:99px; }
.habit-progress::-moz-progress-bar { background:#6d28d9; border-radius:99px; }
.habit-note { margin:10px 0 0; font-size:.88em; color:var(--text-muted); line-height:1.7; }
.habit-summary { --habit-correct:#4ade80; --habit-wrong:#f87171; box-sizing:border-box; max-width:460px; width:calc(100% - 32px); max-height:calc(var(--app-viewport-height, 100dvh) - 32px); overflow-y:auto; text-align:center; margin:0; }
[data-theme="light"] .habit-summary { --habit-correct:#15803d; --habit-wrong:#b91c1c; }
.habit-summary .habit-mission { text-align:left; margin:0 0 18px; }
.habit-summary-actions { display:flex; flex-direction:column; gap:10px; }
.habit-celebration { position:fixed; top:20px; left:50%; transform:translateX(-50%); z-index:4000; padding:14px 20px; border-radius:14px; background:#6d28d9; color:white; font-weight:700; box-shadow:0 8px 25px #0003; max-width:calc(100vw - 40px); text-align:center; animation:habit-pop .35s ease-out; }
@keyframes habit-pop { from { opacity:0; transform:translate(-50%,-12px); } to { opacity:1; transform:translate(-50%,0); } }
.habit-nav { display:none; }
@media(max-width:767px) {
 body:has(.habit-nav) { padding-bottom:calc(86px + env(safe-area-inset-bottom)); }
 .habit-nav { display:grid !important; grid-template-columns:repeat(5,minmax(0,1fr)) !important; gap:2px; position:fixed; bottom:0; left:0; right:0; z-index:1100; padding:6px 4px calc(6px + env(safe-area-inset-bottom)); background:var(--card-color); border-top:1px solid var(--border-color); box-shadow:0 -2px 10px var(--shadow); }
 .habit-nav a { min-width:0 !important; min-height:48px; padding:3px 2px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; border-radius:8px; color:var(--text-muted); text-decoration:none; font-size:.72rem; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition:background-color .15s, color .15s; }
 .habit-nav a span { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
 .habit-nav a[aria-current="page"] { background:var(--card-color-alt); color:var(--primary-color); font-weight:800; }
 .habit-nav svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }
 body:has(.habit-nav) .pwa-banner { bottom:calc(86px + env(safe-area-inset-bottom)); }
}
@media(prefers-reduced-motion:reduce) { .habit-celebration { animation:none; } }
.answer-sound-setting { margin-bottom:24px; }
.answer-sound-setting label { display:flex; align-items:center; gap:10px; font-weight:700; }
.answer-sound-setting input { width:auto; accent-color:var(--primary-color); }
.answer-sound-setting p { color:var(--text-muted); font-size:.85em; margin-top:8px; }
.streak-celebration { position:fixed; inset:0; z-index:4000; display:flex; align-items:center; justify-content:center; padding:24px; overflow:auto; background:rgba(10,8,24,.85); backdrop-filter:blur(8px); }
.streak-celebration-card { width:100%; max-width:440px; max-height:100%; overflow:auto; padding:32px 24px; border-radius:24px; background:var(--card-color); color:var(--text-color); text-align:center; border:2px solid var(--primary-color); box-shadow:0 0 60px rgba(187,134,252,.25); animation:milestone-enter .35s ease-out; }
.streak-celebration-card h2 { margin:24px 0 12px; }
.streak-celebration-card p { color:var(--text-muted); line-height:1.6; margin-bottom:24px; }
.streak-celebration-card button { min-height:48px; width:100%; }
.streak-milestone-badge { display:flex; flex-direction:column; justify-content:center; width:140px; height:140px; margin:auto; border-radius:50%; background:linear-gradient(135deg,#bb86fc,#03dac6); color:#181126; font-size:24px; box-shadow:0 8px 32px rgba(3,218,198,.2); }
.streak-milestone-badge strong { font-size:40px; line-height:1.1; }
.streak-milestone-badge span { font-size:12px; font-weight:800; letter-spacing:2px; }
@keyframes milestone-enter { from { opacity:0; transform:translateY(16px) scale(.95); } to { opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce) { .streak-celebration-card { animation:none; } }