/* Стили дополнений: небо сегодня, космическая погода, практики, дыхание, звук дня, вложения, проверка, вехи */
.sky-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-2); }
.sky-box { background: var(--color-surface-offset); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-3); display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sky-box__k { font-size: var(--text-xs); color: var(--color-text-faint); text-transform: uppercase; letter-spacing: 0.04em; }
.sky-box b { font-size: var(--text-base); font-variant-numeric: tabular-nums; color: var(--color-text); overflow-wrap: anywhere; }
.sky-box small { font-size: var(--text-xs); color: var(--color-text-muted); line-height: 1.4; }
.sky-h { margin: var(--space-2) 0 0; font-family: var(--font-body); font-size: var(--text-sm); font-weight: 700; color: var(--color-text); }
.sky-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: var(--text-sm); color: var(--color-text-muted); }
.sky-list li { padding-left: 14px; position: relative; }
.sky-list li::before { content: '·'; position: absolute; left: 2px; color: var(--color-primary); }
.sky-list b { color: var(--color-text); }
.sky-dim { color: var(--color-text-faint); font-style: normal; }
.sky-cols { display: grid; grid-template-columns: 1fr; gap: var(--space-3); }
@media (min-width: 640px) { .sky-cols { grid-template-columns: 1fr 1fr; } }
.sky-note { margin: var(--space-2) 0 0; font-size: var(--text-xs); color: var(--color-text-faint); line-height: 1.45; }

/* Kp */
.kp-bars { display: flex; align-items: flex-end; gap: 4px; height: 56px; padding: 6px 0 0; }
.kp-bar { flex: 1; border-radius: 3px 3px 0 0; background: var(--color-ildar); min-height: 4px; opacity: 0.9; }
.kp-bar.kp-4 { background: var(--color-primary); }
.kp-bar.kp-5, .kp-bar.kp-6 { background: oklch(0.75 0.15 60); }
.kp-bar.kp-7, .kp-bar.kp-8, .kp-bar.kp-9 { background: var(--color-hard); }

/* практики */
.pr-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.pr-item { display: grid; grid-template-columns: 44px 1fr auto; gap: var(--space-2); align-items: center; padding: 6px 8px; border-radius: var(--radius-md); background: var(--color-surface-offset); border: 1px solid var(--color-border); }
.pr-item.is-done { border-color: oklch(0.8 0.1 85 / 0.45); background: var(--color-primary-highlight); }
.pr-check { width: 40px; height: 40px; border-radius: var(--radius-full); border: 1.5px solid var(--color-border); background: var(--color-surface); color: var(--color-text-muted); font-size: 18px; display: grid; place-items: center; }
.pr-item.is-done .pr-check { background: var(--color-primary); color: var(--color-text-inverse); border-color: transparent; font-weight: 700; }
.pr-main { display: flex; flex-direction: column; min-width: 0; }
.pr-label { font-size: var(--text-sm); font-weight: 600; color: var(--color-text); }
.pr-stat { font-size: var(--text-xs); color: var(--color-text-faint); }
.pr-dots { display: grid; grid-template-columns: repeat(7, 7px); gap: 3px; }
.pr-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--color-surface-2); display: block; }
.pr-dots i.on { background: var(--color-primary); }

/* дыхание */
.br-stage { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); padding: var(--space-4) 0 var(--space-2); }
.br-ring { width: 200px; height: 200px; border-radius: 50%; border: 1px solid var(--color-border); display: grid; place-items: center; background: radial-gradient(circle, oklch(0.8 0.1 85 / 0.08), transparent 70%); }
.br-circle { width: 180px; height: 180px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, oklch(0.9 0.1 85), oklch(0.7 0.12 85) 60%, oklch(0.55 0.1 85)); box-shadow: 0 0 40px oklch(0.8 0.1 85 / 0.35); transform: scale(0.55); transition: none; will-change: transform; }
.br-label { font-family: var(--font-display, var(--font-body)); font-size: var(--text-xl, 1.4rem); color: var(--color-text); }
.br-info { font-size: var(--text-xs); color: var(--color-text-faint); font-variant-numeric: tabular-nums; }
.is-rec { background: var(--color-danger) !important; color: #fff !important; }

/* режим церемонии */
.cer-overlay { position: fixed; inset: 0; z-index: 9999; background: oklch(0.08 0.02 280); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-4); cursor: pointer; }
.cer-overlay__glow { width: 120px; height: 120px; border-radius: 50%; background: radial-gradient(circle, oklch(0.6 0.1 85 / 0.5), transparent 70%); animation: cer-breathe 10s ease-in-out infinite; }
@keyframes cer-breathe { 0%, 100% { transform: scale(0.8); opacity: 0.6; } 50% { transform: scale(1.3); opacity: 1; } }
.cer-overlay__hint { color: oklch(0.45 0.02 280); font-size: var(--text-xs); text-align: center; max-width: 280px; }
.cer-overlay__clock { color: oklch(0.5 0.03 280); font-size: var(--text-sm); font-variant-numeric: tabular-nums; text-align: center; max-width: 300px; }

/* вложения */
.media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--space-2); }
.media-item { margin: 0; background: var(--color-surface-offset); border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; display: flex; flex-direction: column; }
.media-item img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; background: var(--color-surface-2); }
.media-item audio { width: 100%; margin-top: 6px; }
.media-item figcaption { font-size: var(--text-xs); color: var(--color-text-faint); padding: 4px 8px; display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.media-del { color: var(--color-text-faint); padding: 2px 6px; border-radius: var(--radius-sm); }
.media-del:hover { color: var(--color-danger); }
.media-actions { flex-wrap: wrap; }
.media-actions .btn { cursor: pointer; }

/* проверка, вехи, вопрос */
.q-day { font-family: var(--font-display, var(--font-body)); font-size: var(--text-lg, 1.2rem); color: var(--color-text); margin: 0; line-height: 1.4; }
.ms-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-3); }
.ms-kid h4 { margin: 0 0 4px; font-size: var(--text-sm); font-family: var(--font-body); color: var(--color-text); }
.ms-kid h4 small { color: var(--color-text-faint); font-weight: 400; margin-left: 6px; }
.ms-kid p { margin: 0 0 3px; font-size: var(--text-xs); color: var(--color-text-muted); }
.ms-kid b { color: var(--color-text); font-variant-numeric: tabular-nums; }

/* --- Космическая карта --- */
.cs-card { gap: var(--space-3); }
.cs-head { display: flex; flex-direction: column; gap: var(--space-2); }
.cs-time__now { font-weight: 600; font-size: var(--text-md, 1rem); }
.cs-time__ctl, .cs-views, .cs-zoom, .cs-people { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.cs-select { min-height: 36px; border-radius: var(--radius-full); border: 1px solid var(--color-border); background: var(--color-surface-2); color: var(--color-text); padding: 0 var(--space-3); font: inherit; font-size: var(--text-sm, 0.875rem); }
.cs-range { display: flex; gap: var(--space-2); align-items: center; }
.cs-range input[type=range] { flex: 1; min-width: 0; accent-color: var(--color-primary); }
.cs-pane { display: flex; flex-direction: column; gap: var(--space-2); }
.cs-pane__title { font-weight: 600; display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.cs-badge { font-size: 0.7rem; font-weight: 400; color: var(--color-text-muted, #aaa); border: 1px solid var(--color-border); border-radius: var(--radius-full); padding: 1px 8px; }
.cs-canvas { width: 100%; aspect-ratio: 1 / 1; display: block; border-radius: var(--radius-lg); background: radial-gradient(circle at 50% 50%, oklch(0.2 0.045 280) 0%, oklch(0.13 0.03 280) 100%); border: 1px solid var(--color-border); touch-action: manipulation; }
.cs-people .chip { display: inline-flex; align-items: center; gap: 6px; }
.cs-people .chip.is-active { border-color: var(--pc); color: var(--pc); }
.cs-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--pc); display: inline-block; }
.cs-check { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm, 0.875rem); color: var(--color-text-muted, #bbb); }
.cs-check input { accent-color: var(--color-primary); width: 18px; height: 18px; }
.cs-caption { min-height: 2.4em; font-size: var(--text-sm, 0.875rem); color: var(--color-text-muted, #bbb); border-left: 2px solid var(--color-border); padding-left: var(--space-3); margin: 0; }
.cs-caption.is-on { color: var(--color-text); border-color: var(--color-primary); }
.cs-details { border-top: 1px solid var(--color-border); padding-top: var(--space-2); }
.cs-details summary { cursor: pointer; font-weight: 600; padding: var(--space-1) 0; }
.cs-table td, .cs-table th { padding: 4px 6px; font-size: var(--text-sm, 0.875rem); }
.cs-table .num { text-align: right; white-space: nowrap; }
.cs-r { color: #ff9a9a; font-weight: 600; font-size: 0.75rem; }
.cs-list { margin: var(--space-2) 0; padding-left: 1.1em; display: flex; flex-direction: column; gap: 6px; font-size: var(--text-sm, 0.875rem); }
.cs-dim { color: var(--color-text-muted, #999); }
.cs-touches { display: flex; flex-direction: column; gap: var(--space-2); margin: var(--space-2) 0; }
.cs-touch { display: flex; flex-direction: column; gap: 2px; font-size: var(--text-sm, 0.875rem); }
.cs-touch__name { font-weight: 600; }
.cs-touch__item { color: var(--color-text); opacity: 0.9; }
.cs-auto { font-size: 0.65rem; font-weight: 400; color: var(--color-text-muted, #aaa); border: 1px solid var(--color-border); border-radius: var(--radius-full); padding: 0 6px; vertical-align: middle; }