/**
 * GymDiet Master — Habit Tracker (Трекер привычек) Styles
 * Exact dark neon aesthetic matching the user's mobile design.
 */

/* ── Container & Global Reset ── */
:root:not([data-theme='light']) #screen-habits,
:root:not([data-theme='light']) #screen-add-habit {
  background-color: #000000 !important;
  background: #000000 !important;
  color: #f1f5f9;
}

#screen-habits,
#screen-add-habit {
  min-height: 100vh;
  box-sizing: border-box;
  font-family: inherit;
  -webkit-font-smoothing: antialiased;
  padding: 0 0 96px 0 !important;
}

/* ── Standard App Header (identical to Water) ── */
:root:not([data-theme='light']) #screen-habits > .header,
:root:not([data-theme='light']) #screen-add-habit > .header {
  background: #000000 !important;
  background-color: #000000 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

#screen-habits > .header,
#screen-add-habit > .header {
  position: sticky !important;
  top: 0 !important;
  z-index: 100 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: calc(12px + env(safe-area-inset-top, 0px)) 16px 12px !important;
  backdrop-filter: blur(20px) !important;
  margin: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

:root:not([data-theme='light']) #screen-habits > .header .screen-title,
:root:not([data-theme='light']) #screen-add-habit > .header .screen-title {
  color: #ffffff !important;
}

#screen-habits > .header .screen-title,
#screen-add-habit > .header .screen-title {
  font-size: 20px !important;
  font-weight: 800 !important;
  margin: 0 !important;
  text-align: center !important;
  flex: 1 !important;
}


/* ── Screen Heading & Info ── */
.habit-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.habit-header-title {
  font-size: 22px;
  font-weight: 700;
  color: #ffffff;
  margin: 0;
  letter-spacing: -0.3px;
}

.habit-info-btn {
  background: none;
  border: none;
  color: #00f076;
  opacity: 0.85;
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s;
}

.habit-info-btn:hover {
  opacity: 1;
}

/* ── Segmented Control (Tabs) ── */
.habit-segmented-control {
  display: flex;
  background-color: #141b24;
  border-radius: 14px;
  padding: 4px;
  margin-bottom: 20px;
  gap: 4px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.habit-segment-tab {
  flex: 1;
  padding: 10px 0;
  border-radius: 10px;
  border: none;
  background: transparent;
  color: #8da2b5;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.22s ease-out;
  text-align: center;
}

.habit-segment-tab.active {
  background-color: var(--primary, #00f076);
  color: var(--primary-text, #0a1118);
  font-weight: 700;
  box-shadow: 0 2px 10px var(--primary-glow, rgba(0, 240, 118, 0.25));
}

/* ── Day Progress Card (Compact & Narrower) ── */
.habit-progress-card {
  background-color: #0c121c;
  border: 1px solid rgba(0, 240, 118, 0.2);
  border-radius: 20px;
  padding: 18px 20px;
  max-width: 480px;
  width: 100%;
  margin: 0 auto 16px auto;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5);
  box-sizing: border-box;
}

.habit-progress-card-title {
  font-size: 13px;
  color: #94a3b8;
  margin-bottom: 14px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  text-align: center;
}

.habit-progress-body {
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 16px;
}

.habit-gauge-container {
  position: relative;
  width: 154px;
  height: 154px;
  flex-shrink: 0;
}

.habit-gauge-svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.habit-gauge-bg {
  fill: none;
  stroke: rgba(255, 255, 255, 0.08);
  stroke-width: 10;
}

.habit-gauge-fill {
  fill: none;
  stroke: var(--primary, #00f076);
  stroke-width: 10;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  filter: drop-shadow(0 0 10px var(--primary-glow, rgba(0, 240, 118, 0.7)));
}

.habit-gauge-label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  width: 100%;
  pointer-events: none;
}

.habit-gauge-number {
  font-size: 32px;
  font-weight: 900;
  color: #ffffff;
  line-height: 1.1;
  letter-spacing: -0.5px;
}

.habit-gauge-subtext {
  font-size: 12px;
  font-weight: 700;
  color: #8da2b5;
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.habit-streak-info {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.habit-streak-item-label {
  font-size: 12px;
  color: #8da2b5;
  margin-bottom: 2px;
  font-weight: 500;
}

.habit-streak-value-green {
  font-size: 17px;
  font-weight: 800;
  color: var(--primary, #00f076);
  display: flex;
  align-items: center;
  gap: 6px;
}

.habit-streak-value-white {
  font-size: 17px;
  font-weight: 800;
  color: #ffffff;
}

/* ── "Мои привычки" Section ── */
.habit-list-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.habit-list-heading {
  font-size: 18px;
  font-weight: 700;
  color: #ffffff;
  margin: 0;
}

.habit-btn-add-inline {
  background: rgba(0, 240, 118, 0.08);
  border: 1px solid rgba(0, 240, 118, 0.22);
  color: #00f076;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  min-height: 38px;
  border-radius: 12px;
  transition: all 0.2s ease;
}

.habit-btn-add-inline:hover, .habit-btn-add-inline:active {
  background: rgba(0, 240, 118, 0.16);
  border-color: rgba(0, 240, 118, 0.4);
}

/* ── Habit Cards ── */
.habit-card {
  background-color: #131922;
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 16px;
  padding: 14px 16px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: transform 0.15s ease, background-color 0.2s;
  cursor: pointer;
  user-select: none;
}

.habit-card:hover {
  background-color: #16202c;
  transform: translateY(-1px);
}

.habit-card:active {
  transform: scale(0.985);
}

.habit-card-left {
  display: flex;
  align-items: center;
  gap: 14px;
}

.habit-icon-wrap {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background-color: rgba(0, 240, 118, 0.08);
  border: 1px solid rgba(0, 240, 118, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #00f076;
}

.habit-icon-wrap.cat-workout {
  background-color: rgba(0, 240, 118, 0.08);
  border-color: rgba(0, 240, 118, 0.2);
  color: #00f076;
}

.habit-icon-wrap.cat-water {
  background-color: rgba(0, 229, 255, 0.08);
  border-color: rgba(0, 229, 255, 0.2);
  color: #00e5ff;
}

.habit-icon-wrap.cat-nutrition {
  background-color: rgba(16, 185, 129, 0.08);
  border-color: rgba(16, 185, 129, 0.2);
  color: #10b981;
}

.habit-icon-wrap.cat-steps {
  background-color: rgba(34, 197, 94, 0.08);
  border-color: rgba(34, 197, 94, 0.2);
  color: #22c55e;
}

.habit-icon-wrap.cat-sleep {
  background-color: rgba(148, 163, 184, 0.08);
  border-color: rgba(148, 163, 184, 0.2);
  color: #94a3b8;
}

.habit-card-details {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.habit-card-name {
  font-size: 15px;
  font-weight: 600;
  color: #ffffff;
}

.habit-card-sub {
  font-size: 12px;
  color: #8da2b5;
}

/* ── Habit Checkbox Buttons ── */
.habit-check-trigger {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.habit-check-circle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  box-sizing: border-box;
}

/* Completed: Solid green with white checkmark */
.habit-check-circle.is-done {
  background-color: #00f076;
  box-shadow: 0 0 14px rgba(0, 240, 118, 0.5);
  transform: scale(1.02);
}

.habit-check-circle.is-done svg {
  stroke: #04120b;
  stroke-width: 3.2;
}

/* Incomplete: Empty dark circle with neon accent border and hover glow */
.habit-check-circle.is-empty {
  border: 2px solid rgba(0, 240, 118, 0.38);
  background-color: rgba(0, 240, 118, 0.04);
}

.habit-check-circle.is-empty:hover {
  border-color: #00f076;
  background-color: rgba(0, 240, 118, 0.14);
  box-shadow: 0 0 10px rgba(0, 240, 118, 0.35);
  transform: scale(1.08);
}

/* Partial ring progress (like 8000 steps) */
.habit-check-partial-ring {
  width: 36px;
  height: 36px;
  position: relative;
}

.habit-check-partial-ring svg {
  transform: rotate(-90deg);
  width: 100%;
  height: 100%;
}

/* ── Screen 2: Statistics Tab ── */
.habit-stats-view {
  animation: fadeIn 0.25s ease-out;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

.habit-matrix-card {
  background-color: #131922;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 20px;
  padding: 18px;
  margin-bottom: 20px;
}

.habit-matrix-header-row {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  margin-bottom: 14px;
}

.habit-matrix-weekday-col {
  font-size: 11px;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
}

.habit-matrix-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.habit-matrix-row {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  align-items: center;
  justify-items: center;
}

.habit-matrix-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  box-sizing: border-box;
  transition: all 0.2s;
}

.habit-matrix-dot.done {
  background-color: #00f076;
  box-shadow: 0 0 8px rgba(0, 240, 118, 0.5);
}

.habit-matrix-dot.empty {
  border: 1.5px solid rgba(255, 255, 255, 0.15);
  background: transparent;
}

/* ── 4-Tile Statistics Summary (2x2 Grid) ── */
.habit-summary-card {
  background-color: #131922;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 20px;
  padding: 20px;
  margin-bottom: 24px;
}

.habit-summary-title {
  font-size: 15px;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 16px;
}

.habit-summary-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  row-gap: 20px;
  column-gap: 24px;
}

.habit-kpi-tile {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.habit-kpi-value-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.habit-kpi-bullet {
  color: #00f076;
  font-size: 18px;
  line-height: 1;
}

.habit-kpi-number {
  font-size: 24px;
  font-weight: 800;
  color: #ffffff;
  line-height: 1;
}

.habit-kpi-number.green {
  color: #00f076;
}

.habit-kpi-desc {
  font-size: 11px;
  color: #8da2b5;
  line-height: 1.3;
}

/* ── Screen 3: "Добавить привычку" ── */
.habit-form-group {
  margin-bottom: 20px;
}

.habit-form-label {
  font-size: 13px;
  color: #8da2b5;
  font-weight: 500;
  margin-bottom: 8px;
  display: block;
}

.habit-title-input-wrap {
  display: flex;
  align-items: center;
  background-color: #131922;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 0 14px;
  gap: 10px;
}

.habit-title-input-wrap:focus-within {
  border-color: #00f076;
}

.habit-title-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: #ffffff;
  font-size: 15px;
  padding: 14px 0;
}

.habit-title-input::placeholder {
  color: #64748b;
}

/* Category Pickers */
.habit-category-selector {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 6px;
  scrollbar-width: none;
}

.habit-category-selector::-webkit-scrollbar {
  display: none;
}

.habit-cat-btn {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background-color: #131922;
  color: #8da2b5;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.2s;
}

.habit-cat-btn.selected {
  border-color: #00f076;
  background-color: rgba(0, 240, 118, 0.12);
  color: #00f076;
}

/* Target Inputs */
.habit-target-row {
  display: flex;
  gap: 12px;
}

.habit-target-input {
  flex: 1;
  background-color: #131922;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 12px 14px;
  color: #ffffff;
  font-size: 15px;
  outline: none;
}

.habit-target-input:focus {
  border-color: #00f076;
}

/* Action Rows (Расписание, Напоминание) */
.habit-setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #131922;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 12px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.habit-setting-row:hover {
  background-color: #16202c;
}

.habit-setting-label {
  font-size: 14px;
  color: #cbd5e1;
}

.habit-setting-val {
  font-size: 14px;
  color: #8da2b5;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Big Bottom Green Button */
.habit-btn-primary {
  width: 100%;
  background-color: #00f076;
  color: #081016;
  border: none;
  border-radius: 16px;
  padding: 16px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  margin-top: 24px;
  box-shadow: 0 4px 20px rgba(0, 240, 118, 0.3);
  transition: transform 0.15s ease, background-color 0.2s;
}

.habit-btn-primary:active {
  transform: scale(0.98);
}

/* ── Interactive Calendar Enhancements ── */
.habit-interactive-calendar-card {
  padding: 16px 14px 14px;
}

.habit-cal-nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  padding: 0 4px;
}

.habit-cal-nav-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #ffffff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.habit-cal-nav-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(0, 240, 118, 0.3);
  color: #00f076;
}

.habit-cal-nav-title-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.habit-cal-nav-title {
  font-size: 15px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: -0.2px;
}

.habit-cal-today-pill {
  background: rgba(0, 240, 118, 0.12);
  color: #00f076;
  border: 1px solid rgba(0, 240, 118, 0.3);
  font-size: 11px;
  font-weight: 700;
  border-radius: 9999px;
  padding: 2px 8px;
  cursor: pointer;
  transition: all 0.2s;
}

.habit-cal-today-pill:hover {
  background: #00f076;
  color: #081016;
}

.habit-cal-month-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.habit-cal-cell {
  min-height: 42px;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  border: 1px solid transparent;
  background: transparent;
  transition: all 0.18s ease;
  padding: 3px 0;
}

.habit-cal-cell-empty {
  visibility: hidden;
  pointer-events: none;
}

.habit-cal-day-cell {
  background: rgba(255, 255, 255, 0.025);
  cursor: pointer;
}

.habit-cal-day-cell:hover {
  background: rgba(255, 255, 255, 0.07);
}

.habit-cal-day-cell.is-selected {
  border-color: #00f076 !important;
  background: rgba(0, 240, 118, 0.14) !important;
  box-shadow: 0 0 12px rgba(0, 240, 118, 0.25);
}

.habit-cal-day-cell.is-today .habit-cal-day-number {
  color: #00f076;
  font-weight: 800;
}

.habit-cal-day-cell.is-future {
  opacity: 0.3;
  pointer-events: none;
}

.habit-cal-day-number {
  font-size: 12px;
  font-weight: 600;
  color: #cbd5e1;
  line-height: 1;
}

.habit-cal-day-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  box-sizing: border-box;
}

.habit-cal-day-dot.is-complete {
  background: #00f076;
  box-shadow: 0 0 6px rgba(0, 240, 118, 0.8);
}

.habit-cal-day-dot.is-partial {
  background: #00f076;
  opacity: 0.6;
}

.habit-cal-day-dot.is-empty {
  border: 1.5px solid rgba(255, 255, 255, 0.2);
  background: transparent;
}

.habit-cal-day-dot.is-future {
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: transparent;
}

.habit-cal-legend {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.habit-cal-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: #8da2b5;
}

.habit-cal-legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.habit-cal-legend-dot.is-complete {
  background: #00f076;
  box-shadow: 0 0 6px rgba(0, 240, 118, 0.8);
}

.habit-cal-legend-dot.is-partial {
  background: #00f076;
  opacity: 0.6;
}

.habit-cal-legend-dot.is-empty {
  border: 1.5px solid rgba(255, 255, 255, 0.2);
}

/* Week View */
.habit-week-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}

.habit-week-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 4px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  cursor: pointer;
  transition: all 0.2s;
}

.habit-week-col:hover {
  background: rgba(255, 255, 255, 0.08);
}

.habit-week-col.is-selected {
  border-color: #00f076;
  background: rgba(0, 240, 118, 0.12);
  box-shadow: 0 0 10px rgba(0, 240, 118, 0.2);
}

.habit-week-col.is-today .habit-week-day-num {
  color: #00f076;
}

.habit-week-col.is-future {
  opacity: 0.3;
  pointer-events: none;
}

.habit-week-weekday {
  font-size: 11px;
  color: #64748b;
  font-weight: 600;
  text-transform: uppercase;
}

.habit-week-day-num {
  font-size: 14px;
  color: #ffffff;
  font-weight: 700;
}

.habit-week-indicator {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 4px;
  border-radius: 6px;
}

.habit-week-indicator.is-complete {
  background: rgba(0, 240, 118, 0.2);
  color: #00f076;
}

.habit-week-indicator.is-partial {
  background: rgba(0, 240, 118, 0.1);
  color: #00f076;
}

.habit-week-indicator.is-empty {
  background: rgba(255, 255, 255, 0.05);
  color: #64748b;
}

/* Year View */
.habit-year-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.habit-year-month-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
  cursor: pointer;
  transition: all 0.2s;
}

.habit-year-month-card:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.15);
}

.habit-year-month-card.is-current {
  border-color: #00f076;
  background: rgba(0, 240, 118, 0.05);
}

.habit-year-month-name {
  font-size: 13px;
  font-weight: 700;
  color: #ffffff;
}

.habit-year-month-bar {
  width: 100%;
  height: 4px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 2px;
  overflow: hidden;
}

.habit-year-month-fill {
  height: 100%;
  background: #00f076;
  border-radius: 2px;
}

.habit-year-month-percent {
  font-size: 11px;
  color: #8da2b5;
  font-weight: 600;
}

/* Day Inspector Card */
.habit-inspector-card {
  background-color: #131922;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 20px;
  padding: 16px 18px;
  margin-bottom: 20px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.habit-inspector-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.habit-inspector-kicker {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: #00f076;
  letter-spacing: 0.5px;
}

.habit-inspector-date {
  font-size: 14px;
  font-weight: 700;
  color: #ffffff;
  margin: 2px 0 0;
}

.habit-inspector-badge {
  font-size: 12px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.06);
  color: #cbd5e1;
}

.habit-inspector-badge.is-complete {
  background: rgba(0, 240, 118, 0.15);
  color: #00f076;
  border: 1px solid rgba(0, 240, 118, 0.3);
}

.habit-inspector-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.habit-inspector-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.04);
  cursor: pointer;
  transition: all 0.18s ease;
}

.habit-inspector-row:hover {
  background: rgba(255, 255, 255, 0.06);
}

.habit-inspector-row-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.habit-inspector-icon {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: rgba(0, 240, 118, 0.1);
  border: 1px solid rgba(0, 240, 118, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #00f076;
}

.habit-inspector-icon svg {
  width: 17px;
  height: 17px;
}

.habit-inspector-title {
  font-size: 13.5px;
  color: #ffffff;
  display: block;
}

.habit-inspector-target {
  font-size: 11px;
  color: #8da2b5;
  margin-top: 1px;
}

.habit-day-item-check {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: none;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  background: transparent;
}

.habit-day-item-check.is-done {
  background: #00f076;
  box-shadow: 0 0 10px rgba(0, 240, 118, 0.5);
  color: #081016;
}

.habit-day-item-check.is-empty {
  border: 2px solid rgba(255, 255, 255, 0.22);
}