:root {
  --brand: #3d4f7c;
  --brand-2: #5b6fa8;
  --gold: #e8b64c;
}

body {
  background: #f6f4f0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.navbar-app {
  background: #fff;
  border-bottom: 1px solid #e6e2da;
}

.navbar-brand { color: var(--brand) !important; }

.hero {
  background: linear-gradient(135deg, #2b2940 0%, #3d4f7c 60%, #5b6fa8 100%);
  color: #fff;
  border-radius: 1.25rem;
}

.hero .moon { font-size: 1.9rem; line-height: 1; }

.btn-brand {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}
.btn-brand:hover, .btn-brand:focus {
  background: #31405f;
  border-color: #31405f;
  color: #fff;
}

.step-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  font-size: .8rem;
  font-weight: 700;
}

.form-control-lg { font-size: 1rem; }

.pick-card {
  border: 2px solid #e6e2da;
  border-radius: 1rem;
  background: #fff;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.pick-card:hover { border-color: var(--brand-2); box-shadow: 0 6px 18px rgba(43, 41, 64, .07); }
.pick-card:has(input:checked) {
  border-color: var(--brand);
  background: #eef1f9;
}

.sticky-actions { position: sticky; bottom: 0; background: #f6f4f0; padding: .75rem 0; z-index: 5; }

.card-issue { border: 1px solid #e6e2da; border-radius: 1rem; }
.card-issue.is-done { opacity: .62; }
.card-issue.is-done h3 { text-decoration: line-through; }

.plan-steps { padding-left: 1.1rem; margin-bottom: 0; }
.plan-steps li { margin-bottom: .35rem; }

.focus-item {
  background: #f6f4f0;
  border-radius: .6rem;
  padding: .55rem .7rem;
  font-size: .875rem;
  height: 100%;
}

.progress-box {
  background: rgba(255, 255, 255, .12);
  border-radius: .75rem;
  padding: .8rem .9rem;
}

.alert-warning { --bs-alert-bg: #fff6e3; --bs-alert-border-color: #f0d9a8; }

/* --- Telegram Mini App --- */
html.tg body { background: var(--tg-bg, #f6f4f0); color: var(--tg-text, #000); }
html.tg .navbar-app { background: var(--tg-secondary, #fff); }
html.tg .btn-brand { background: var(--tg-button, #3d4f7c); border-color: var(--tg-button, #3d4f7c); color: var(--tg-button-text, #fff); }
html.tg-dark .card-issue,
html.tg-dark .pick-card,
html.tg-dark .card { background: var(--tg-secondary, #1c1c1e); border-color: rgba(255,255,255,.12); color: var(--tg-text, #fff); }
html.tg-dark .focus-item,
html.tg-dark .pick-card:has(input:checked) { background: rgba(255,255,255,.08); }
html.tg-dark .text-body-secondary,
html.tg-dark .hero .opacity-75 { color: var(--tg-hint, #a1a1a6) !important; }
html.tg .container { padding-bottom: env(safe-area-inset-bottom, 0); }