@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap");

:root {
  color-scheme: dark;
  --bg: #06060c;           /* Глубокий космический чёрный фон */
  --panel: #111122;        /* Тёмно-неоновые фиолетовые карточки */
  --panel-soft: #14142b;   /* Мягкий неоновый фиолетовый для форм */
  --panel-raised: #1a1a3a; /* Выделенные элементы */
  --line: rgba(139, 92, 246, 0.15); /* Неоновые разделительные линии */
  --text: #ffffff;         /* Чистый белый текст */
  --muted: #8b9bb4;        /* Приглушенный текст */
  --soft: #c2b4f4;         /* Мягкий пурпурный оттенок */
  --blue: #00f2fe;         /* Светящийся бирюзовый (Teal) для XP и прогресс-бара */
  --blue-light: #4facfe;   /* Яркий голубой для градиентов */
  --green: #00ff87;        /* Неоновый зеленый для выполненных привычек */
  --tg-bg: #06060c;        /* Синхронизация фона с Telegram */
  font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--text);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; }

body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  background:
    radial-gradient(ellipse at 12% 0%, rgba(67, 120, 164, 0.13), transparent 34rem),
    var(--tg-bg);
  color: var(--text);
}

button, input { font: inherit; }
button { color: inherit; }
button:focus-visible, input:focus-visible { outline: 2px solid var(--blue-light); outline-offset: 3px; }
.hidden { display: none !important; }

.app-shell {
  width: min(100%, 520px);
  min-height: 100vh;
  margin: 0 auto;
  padding: max(22px, env(safe-area-inset-top)) 23px max(28px, env(safe-area-inset-bottom));
}

.topbar, .brand-lockup, .section-heading, .xp-card, .habit-row, .habit-title-line,
.add-form-row, .review-button, .report-heading, .app-footer {
  display: flex;
  align-items: center;
}

.topbar { justify-content: space-between; margin-bottom: 36px; }
.brand-lockup { gap: 11px; }
.brand-mark { width: 38px; height: 38px; display: grid; place-items: center; color: var(--blue-light); }
.brand-mark svg { width: 33px; height: 33px; }
.brand-lockup h1, .greeting-row h2, .section-heading h2, .review-card h2 {
  margin: 0;
  font-family: "Manrope", sans-serif;
  letter-spacing: -0.045em;
}
.brand-lockup h1 { font-size: 17px; font-weight: 700; }
.eyebrow { margin: 0 0 6px; color: #7f91a0; font-size: 9px; font-weight: 700; letter-spacing: .17em; }
.avatar {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border: 1px solid rgba(149, 185, 213, .18);
  border-radius: 50%;
  background: linear-gradient(145deg, #335774, #263b4e);
  color: #d9ecfb;
  font-weight: 700;
}

.greeting-row { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 22px; }
.greeting-row .eyebrow { margin-bottom: 9px; }
.greeting-row h2 { font-size: clamp(23px, 7vw, 28px); line-height: 1.18; }
.subtle { margin: 8px 0 0; color: var(--muted); font-size: 12px; }
.streak-pill {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 11px;
  border: 1px solid rgba(108, 167, 218, .14);
  border-radius: 20px;
  background: rgba(83, 137, 182, .1);
  color: #c5ddf3;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.streak-flame { color: var(--blue-light); font-size: 14px; }

.xp-card {
  position: relative;
  justify-content: space-between;
  min-height: 150px;
  overflow: hidden;
  padding: 22px 24px;
  border: 1px solid rgba(153, 199, 239, .17);
  border-radius: 20px;
  background:
    radial-gradient(circle at 89% 26%, rgba(142, 197, 241, .2), transparent 8rem),
    linear-gradient(115deg, #29465d, #263b4d 58%, #253b4c);
  box-shadow: 0 16px 36px rgba(5, 14, 22, .14);
}
.xp-card::after {
  position: absolute;
  top: -72px;
  right: -40px;
  width: 215px;
  height: 215px;
  border: 1px solid rgba(190, 220, 246, .09);
  border-radius: 50%;
  content: "";
}
.xp-copy { position: relative; z-index: 1; width: 72%; }
.xp-label { color: #a9c9e4; font-size: 9px; font-weight: 700; letter-spacing: .15em; }
.sparkle { margin-right: 5px; color: #c5e0f8; font-size: 13px; }
.xp-line { display: flex; align-items: baseline; gap: 8px; margin-top: 8px; }
.xp-line strong { font-family: "Manrope", sans-serif; font-size: 34px; letter-spacing: -.06em; }
.xp-line span { color: #a9c7df; font-size: 12px; font-weight: 700; }
.xp-caption { margin: 2px 0 11px; color: #afc1d0; font-size: 10px; }
.xp-track { height: 5px; overflow: hidden; border-radius: 8px; background: rgba(230, 242, 252, .15); }
.xp-track span { display: block; width: 0; height: 100%; border-radius: inherit; background: #a9d7fa; transition: width .45s ease; }
.level-badge {
  position: relative;
  z-index: 1;
  display: flex;
  width: 67px;
  height: 67px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  border: 1px solid rgba(191, 224, 248, .27);
  border-radius: 50%;
  background: rgba(183, 218, 244, .1);
  box-shadow: inset 0 0 20px rgba(210, 235, 255, .08), 0 0 28px rgba(139, 196, 240, .07);
  color: #d9edfd;
  font-family: "Manrope", sans-serif;
  font-size: 15px;
  font-weight: 800;
}
.level-star { font-size: 15px; line-height: 1; }

.section-block { margin-top: 31px; }
.section-heading { justify-content: space-between; margin-bottom: 14px; }
.section-heading .eyebrow { margin-bottom: 4px; }
.section-heading h2 { font-size: 19px; font-weight: 700; }
.add-button {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 8px 11px;
  border: 1px solid rgba(120, 174, 218, .18);
  border-radius: 10px;
  background: rgba(79, 134, 179, .11);
  color: #a8d0f3;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: background .18s ease, transform .18s ease;
}
.add-button:hover { transform: translateY(-1px); background: rgba(79, 134, 179, .2); }
.add-button span { font-size: 18px; font-weight: 400; line-height: 12px; }

.add-form {
  margin: 0 0 12px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel-soft);
}
.add-form label { display: block; margin: 0 0 9px; color: var(--soft); font-size: 11px; }
.add-form-row { gap: 8px; }
.add-form input {
  min-width: 0;
  flex: 1;
  padding: 10px 11px;
  border: 1px solid rgba(161, 187, 209, .14);
  border-radius: 9px;
  background: #17232e;
  color: var(--text);
  font-size: 12px;
}
.add-form input::placeholder { color: #6f808e; }
.primary-button {
  padding: 10px 15px;
  border: 0;
  border-radius: 9px;
  background: #528fc4;
  color: white;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}
.primary-button:disabled { opacity: .55; }

.habit-list { display: grid; gap: 9px; }
.habit-row {
  gap: 12px;
  min-height: 75px;
  padding: 13px 13px 12px;
  border: 1px solid rgba(163, 190, 213, .075);
  border-radius: 15px;
  background: linear-gradient(105deg, rgba(33, 45, 57, .98), rgba(30, 41, 52, .96));
  transition: border-color .2s ease, transform .2s ease, background .2s ease;
  animation: rise-in .35s both;
}
.habit-row:nth-child(2) { animation-delay: .04s; }
.habit-row:nth-child(3) { animation-delay: .08s; }
.habit-row:hover { transform: translateY(-1px); border-color: rgba(146, 182, 210, .15); }
.habit-row.is-complete { background: linear-gradient(105deg, rgba(37, 57, 58, .82), rgba(30, 45, 52, .96)); }
.habit-check {
  display: grid;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  place-items: center;
  border: 1.5px solid rgba(156, 180, 201, .42);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition: transform .2s ease, border .2s ease, background .2s ease;
}
.habit-check:hover { transform: scale(1.08); border-color: var(--habit-color); }
.habit-check.checked { border-color: var(--habit-color); background: var(--habit-color); animation: check-pop .25s ease; }
.habit-check svg { width: 16px; height: 16px; fill: none; stroke: #17212b; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.habit-check:disabled { opacity: .6; cursor: wait; }
.habit-main { min-width: 0; flex: 1; }
.habit-title-line { gap: 8px; min-width: 0; }
.habit-title-line h3 { overflow: hidden; margin: 0; color: #e7edf2; font-size: 13px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.is-complete .habit-title-line h3 { color: #aab9c2; }
.streak-label { display: inline-flex; align-items: center; gap: 4px; color: #b7a8ed; font-size: 9px; white-space: nowrap; }
.streak-label span { color: #c2b4f4; }
.habit-week { display: flex; gap: 5px; margin-top: 10px; }
.habit-day { width: 14px; height: 3px; border-radius: 3px; background: rgba(160, 180, 198, .17); }
.habit-day.done { background: var(--habit-color, #72c4a4); }
.habit-day.today:not(.done) { background: rgba(160, 180, 198, .38); }
.delete-habit {
  width: 26px;
  height: 30px;
  border: 0;
  background: transparent;
  color: #657784;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: color .16s, opacity .16s;
}
.habit-row:hover .delete-habit, .delete-habit:focus-visible { opacity: 1; }
.delete-habit:hover { color: #e8999c; }

.empty-state, .error-state {
  padding: 26px 18px;
  border: 1px dashed rgba(155, 183, 205, .18);
  border-radius: 16px;
  background: rgba(28, 39, 50, .65);
  text-align: center;
}
.empty-mark { display: grid; width: 34px; height: 34px; place-items: center; margin: 0 auto 12px; border-radius: 50%; background: rgba(95, 153, 201, .14); color: var(--blue-light); font-size: 21px; }
.empty-state h3 { margin: 0 0 6px; font-family: "Manrope", sans-serif; font-size: 14px; }
.empty-state p { margin: 0 0 12px; color: var(--muted); font-size: 11px; }
.text-button { padding: 0; border: 0; background: transparent; color: var(--blue-light); font-size: 11px; font-weight: 700; cursor: pointer; }
.error-state { color: #ffc1c1; font-size: 12px; line-height: 1.65; }
.error-state span { color: var(--muted); font-size: 11px; }
.loading-skeleton { height: 75px; border-radius: 15px; background: linear-gradient(100deg, #1e2a35 20%, #273643 45%, #1e2a35 70%); background-size: 200% 100%; animation: shimmer 1.3s infinite; }

.week-section { margin-top: 34px; }
.week-total { display: flex; align-items: baseline; gap: 5px; color: var(--muted); font-size: 10px; }
.week-total strong { color: #b9d8f0; font-family: "Manrope", sans-serif; font-size: 15px; }
.week-chart { display: flex; height: 90px; align-items: flex-end; justify-content: space-between; gap: 12px; padding: 12px 13px 0; border: 1px solid rgba(163, 190, 213, .075); border-radius: 15px 15px 0 0; background: rgba(31, 43, 54, .83); }
.week-bar-wrap { display: flex; height: 100%; flex: 1; align-items: flex-end; justify-content: center; }
.week-bar { display: block; width: min(20px, 70%); min-height: 4px; border-radius: 5px 5px 2px 2px; background: linear-gradient(180deg, #6faeda, #4b81a8); opacity: .65; transition: height .5s ease; }
.week-bar.today { background: linear-gradient(180deg, #8bc5ee, #5c9dcf); opacity: 1; box-shadow: 0 0 16px rgba(99, 166, 215, .2); }
.week-labels { display: flex; justify-content: space-between; padding: 8px 13px 10px; border: 1px solid rgba(163, 190, 213, .075); border-top: 0; border-radius: 0 0 15px 15px; background: rgba(31, 43, 54, .83); color: #748591; font-size: 9px; }
.week-labels .today { color: #add4f1; font-weight: 700; }

.review-card {
  position: relative;
  display: flex;
  min-height: 182px;
  overflow: hidden;
  margin-top: 29px;
  padding: 20px 20px 18px;
  border: 1px solid rgba(168, 151, 221, .14);
  border-radius: 18px;
  background:
    radial-gradient(circle at 93% 12%, rgba(147, 131, 207, .2), transparent 115px),
    linear-gradient(115deg, #302e48, #2b2c40 58%, #292e42);
}
.review-orbit { position: absolute; top: 13px; right: 20px; display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid rgba(189, 177, 237, .2); border-radius: 50%; color: #c2b4f4; font-size: 23px; }
.review-orbit::after { position: absolute; inset: -7px; border: 1px solid rgba(189, 177, 237, .1); border-radius: 50%; content: ""; }
.review-content { position: relative; z-index: 1; width: 100%; }
.review-content .eyebrow { color: #a99cce; }
.review-card h2 { font-size: 18px; }
.review-description { max-width: 285px; margin: 6px 0 15px; color: #b1b1c4; font-size: 11px; line-height: 1.55; }
.review-button {
  width: 100%;
  justify-content: flex-start;
  gap: 8px;
  padding: 11px 12px;
  border: 1px solid rgba(201, 190, 246, .14);
  border-radius: 10px;
  background: rgba(166, 147, 223, .13);
  color: #dfd8f7;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: background .18s, transform .18s;
}
.review-button:hover { transform: translateY(-1px); background: rgba(166, 147, 223, .2); }
.review-button:disabled { cursor: wait; opacity: .7; }
.button-spark { color: #c7b7f6; font-size: 15px; }
.button-arrow { margin-left: auto; color: #b5a6e8; font-size: 16px; }
.review-button.is-loading .button-spark { animation: twinkle .9s ease-in-out infinite alternate; }
.delivery-note { margin: 9px 0 0; color: #aaa4c1; font-size: 10px; }
.report-card { margin-top: 11px; padding: 15px 16px; border: 1px solid rgba(182, 168, 235, .12); border-radius: 14px; background: rgba(38, 41, 59, .7); }
.report-heading { gap: 7px; }
.report-heading .eyebrow { margin: 0; color: #a99cce; }
.report-dot { width: 5px; height: 5px; border-radius: 50%; background: #b7a4ed; box-shadow: 0 0 8px rgba(183, 164, 237, .5); }
.report-copy { margin: 10px 0 8px; color: #e0deed; font-size: 12px; line-height: 1.65; white-space: pre-line; }
.report-date { margin: 0; color: #8c8b9e; font-size: 9px; }

.app-footer { justify-content: center; gap: 7px; margin-top: 25px; color: #687985; font-size: 10px; }
.footer-mark { color: #7ea8c5; font-size: 15px; }
.demo-tag { margin-left: 4px; padding: 4px 6px; border: 1px solid rgba(130, 174, 209, .14); border-radius: 5px; color: #87a9c2; font-size: 7px; font-weight: 700; letter-spacing: .09em; }
.toast { position: fixed; z-index: 5; right: 50%; bottom: max(24px, env(safe-area-inset-bottom)); max-width: calc(100% - 36px); padding: 11px 15px; transform: translate(50%, 15px); border: 1px solid rgba(177, 204, 225, .15); border-radius: 11px; background: #2a3946; box-shadow: 0 8px 28px rgba(0, 0, 0, .25); color: #e7f0f7; font-size: 11px; opacity: 0; pointer-events: none; transition: transform .2s ease, opacity .2s ease; white-space: nowrap; }
.toast.visible { transform: translate(50%, 0); opacity: 1; }

@keyframes shimmer { to { background-position: -200% 0; } }
@keyframes rise-in { from { transform: translateY(5px); opacity: .5; } to { transform: translateY(0); opacity: 1; } }
@keyframes check-pop { 50% { transform: scale(1.16); } }
@keyframes twinkle { to { transform: rotate(24deg) scale(1.15); } }

@media (max-width: 380px) {
  .app-shell { padding-right: 16px; padding-left: 16px; }
  .xp-card { padding-right: 19px; padding-left: 19px; }
  .habit-row { gap: 9px; padding-right: 10px; padding-left: 10px; }
  .habit-title-line h3 { font-size: 12px; }
  .streak-label { font-size: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}