.reflection-question input::placeholder{color:white;}.wheel::scroll{background:none;}

.bottom-sheet
.targets-header-add input
.targets-header{
    display: flex;
    justify-content: space-between;
}

.target-modal-section
.loader {
    width: 220px;
    height: 6px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    overflow: hidden;
}

.loader-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #6aa8ff, #4f7cff);
    border-radius: 6px;
}

.primary-btn:disabled{background: linear-gradient(90deg, #6a8cff8f, #5f9cffbf);color: #dcdcdc;}

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

.question-footer #btnNext:disabled {
    background-image:
      linear-gradient(#BCD0FF, #BCD0FF),
      linear-gradient(167deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.4) 40%, rgba(255, 255, 255, 0.05) 100%);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    border: 1px solid transparent;
    color: #D3E4FF;
    cursor: not-allowed;
    opacity: 1;
    box-shadow: none;
}

.secondary-text {
    margin-top: 12px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
    text-align: center;
    line-height: 1.4;
}

.secondary-text a {
    color: #8fb2ff;
    text-decoration: underline;
}

.profile-header {
    margin-bottom: 30px;
}

.profile-header h2 {
    margin: 8px 0 6px;
    font-size: 18px;
    font-weight: 600;
    color: #fff;
    line-height: 1.2;
}

.profile-header p {
    margin: 0;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
}

.profile-form > label:last-of-type,
.profile-form > label:nth-last-of-type(2){
    display: none;
}
.profile-form > input:last-of-type,
.profile-form > input:nth-last-of-type(2){
    margin-top: 10px;
}
.profile-form > input:nth-last-of-type(2){
    margin-top: 30px;
}

.profile-form label {
    display: block;
    margin: 14px 0 6px;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.85);
}

.profile-settings {
    margin-top: 18px;
}

.profile-settings .settings-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.85);
}

.profile-settings .settings-row span {
    flex: 1;
}

.profile-settings .settings-row .switch {
    flex-shrink: 0;
}

.profile-form .question-input::placeholder {
    color: rgba(255, 255, 255, 0.45);
}

.profile-form .question-input:focus {
    border-color: rgb(182 209 255 / 60%);
}

/* на всякий случай */
.scenario-content p,
.scenario-content h3,
.scenario-content em,
.scenario-content strong {
    color: #ffffff;
}

.scenario-header h2 {
    color: #ffffff;
    font-weight: 600;
}

.scenario-card h2:first-of-type{
    margin-top: 0;
}

/* iOS Safari — автозаполнение (белый фон) */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
    box-shadow: 0 0 0 1000px transparent inset !important;
    -webkit-text-fill-color: inherit !important;
    transition: background-color 9999s ease-in-out 0s;
}


.input-wrapper {
    position: relative;
}

.char-counter {
    position: absolute;
    bottom: -18px;
    right: 4px;
    font-size: 12px;
    color: #999;
}

.hidden {
  display: none;
}

.fade-in {
  animation: fadeIn 0.2s ease forwards;
}

.fade-out {
  animation: fadeOut 0.2s ease forwards;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes fadeOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}

.slider {
  position: relative;
}

.slider-marks {
  position: absolute;
  top: -27px;
  left: 4px;
  right: 0;
  height: 10px;
  width: 80%;
  margin-left: 30px;
}

.slider-mark {
  position: absolute;
  top: 14px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgb(153 153 153 / 50%);
  transform: translateX(-50%);
}

.slider-mark.active {
    background: none;
    top: 5px;
    font-size: 14px;
}

.slider-mark.hidden {
  display: none;
}

.slider-number {
  position: absolute;
  top: -2px;
  transform: translateX(-50%);
  font-size: 11px;
  font-weight: 500;
  color: #fff;
}

.targets-header-add button:last-of-type svg{
    width: 29px;
    fill: white;
    background: #4c75c9;
    padding: 6px;
    border-radius: 50%;
}

.targets-header-add input::placeholder{color:#e0e0e0}

.deadline-input{
    margin-top: 10px;
    padding: 11px;
    border-radius: 10px;
    border: none;
    background: #223463;
    color-scheme: dark;
    font-size: 15px;
}

.ai-idea-item .new {
  position: absolute;
  top: 1px;
  right: 49px;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 6px;
  background: #2ecc71;
  color: #fff;
}

.target-item strong{
    font-size: 18px;
    font-weight: 500;
}

.deadline svg{
    width: 23px;
    fill: #e1e1e1;
}

.targets-generate-btn svg{
    width: 24px;
    fill: #e9e9e9;
}

.targets-close-btn{
    background: none !important;
    padding-left: 15px !important;
    padding-right: 0px !important;
    font-size: 15px !important;
}

#aiLoadingModal .modal-card{
    top: 30%;
}

.card::before {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   border-radius: 18px;
   padding: 2px; /* толщина градиента */
   background: linear-gradient(305deg, #ffffff -76%, #ffffff00 30%, #ffffff8a 160%);
   -webkit-mask:
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
   -webkit-mask-composite: xor;
   mask-composite: exclude; /* для Firefox */
   pointer-events: none;
}

.targets-footer{position: sticky;bottom: 0;margin-bottom: 20px;width: 90%;box-sizing: border-box;left: auto;}

#tasksIntroModal *{
    text-align: start;
}
#tasksIntroModal .modal-primary-btn{
    text-align: center;
}

#tasksIntroModal b{
    font-weight: normal;
}

#tasksIntroModal li{
    font-weight: normal;
    margin-bottom: 8px;
}

.goals-header svg{
    width: 25px;
    fill: white;
}

.goals-header .svg-con{
    width: 34px;
    height: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0px;
    background: #5fcf7d;
    border-radius: 5px;
}

.goals-header p{
    font-size: 28px;
    margin: 0;
    color: white;
    font-weight: 500;
}

.goals-screen .targets-header svg{
    width: 23px;
    fill: white;
}

.tasks-list > p{
    color: white;
    font-size: 20px;
    padding-left: 5px;
}

.target-modal .modal-field{
    width: 100%;
    margin-bottom: 30px;
}

.target-modal .modal-field svg{
    width: 28px;
    fill: white;
    margin-top: 5px;
}

.target-modal .modal-field label{
    display: flex;
    gap: 6px;
    font-size: 25px;
    align-items: center;
}

.target-modal .modal-field button{
    background: #253b7391;
    width: 100%;
    margin-top: 20px;
    padding: 15px;
    color: white;
    border-radius: 10px;
    border: none;
    font-size: 16px;
    text-align: start;
    position: relative;
    padding-right: 20px; /* место для стрелки */
    cursor: pointer;
}

.select-target-btn::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 10px;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #ffffff; /* цвет стрелки */
  transform: translateY(-50%);
  pointer-events: none; /* чтобы стрелка не мешала клику */
}

.modal-toggle{
    width: 100%;
    margin-bottom: 30px;
    font-size: 20px;
    display: flex;
    justify-content: space-between;
    padding: 0 5px;
}

.date-extra{
    margin-right: auto;
    margin-top: -23px;
    margin-bottom: 30px;
}

#tasks .target-modal input{
    margin-right: auto;
    background: none;
    background: #1a2b57;
    border: 1px solid #1a2b57;
    padding: 10px 20px;
    border-radius: 10px;
}

.target-modal .time-picker{
    margin-bottom: 40px;
}

.priority-block{
    width: 100%;
    display: flex;
    gap: 15px;
    margin-bottom: 30px;
}

.item-prioritet{
    display: block;
    white-space: nowrap;
    border: 2px solid #192b59;
    font-size: 16px;
    background: #00000017;
    padding: 12px 25px;
    border-radius: 10px;
    position: relative;
    padding-left: 30px;
}

.item-prioritet.red{
    background: #681c64;
    border: 1px solid #681c64;
}

.item-prioritet.yellow{
    background: #604e36;
    border: 1px solid #604e36;
}

.item-prioritet.green{
    background: #1c5947;
    border: 1px solid #1c5947;
}

.item-prioritet.green.active{
    border: 1px solid #42c443;
}
.item-prioritet.yellow.active{
    border: 1px solid #f7a529;
}
.item-prioritet.red.active{
    border: 1px solid #f64e55;
}

.item-prioritet::before {
  content: "";
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #f64e55;
}

.item-prioritet.red::before{
    background-color: #f64e55;
}
.item-prioritet.yellow::before{
  background-color: #f7a529;
}
.item-prioritet.green::before{
  background-color: #42c443;
}

.target-modal .modal-actions{
    width: 100%;
    margin-top: 20px;
    margin-bottom: 50px;
}

.target-modal .modal-actions .cancel-btn{
    width: 100%;
    display: flex;
    justify-content: center;
    background: white;
    background: none;
    border: none;
    font-size: 16px;
    margin-top: 23px;
    color: #537eff;
    font-weight: 600;
}


.switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 26px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.modal-toggle .slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background: rgba(255,255,255,0.15);
  border-radius: 30px;
  transition: 0.4s;
}

.modal-toggle .slider::before {
  content: "";
  position: absolute;
  height: 22px;
  width: 22px;
  left: 2px;
  top: 2px;
  background: #fff;
  border-radius: 50%;
  transition: 0.25s;
}

.switch input:checked + .slider {
  background: linear-gradient(135deg, #4facfe, #557fff);
}

.switch input:checked + .slider::before {
  transform: translateX(18px);
}

.wheel-item.active {
  color: #fff;
  font-weight: 600;
}

.calendar {
  padding: 16px;
}

.calendar-header {
  text-align: center;
  font-weight: 600;
  margin-bottom: 12px;
  width: 100%;
  color: white;
  padding-bottom: 10px;
  padding-top: 3px;
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  width: 100%;
}

.calendar-day:hover {
  background: rgba(255,255,255,0.15);
}

.calendar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.cal-nav {
  background: none;
  border: none;
  font-size: 22px;
  color: #fff;
  cursor: pointer;
}

.cal-title {
  display: flex;
  gap: 6px;
  font-weight: 600;
  cursor: pointer;
}

.cal-year {
  opacity: 0.7;
}

.year-picker {
  max-height: 60vh;
  overflow-y: auto;
}

.wheel::-webkit-scrollbar {
  display: none;
}

.wheel-item.active {
  color: #fff;
  font-weight: 600;
  transform: scale(1.05);
  background: #304b87a8;
  border-radius: 14px;
}

.repeat-p{
    display: flex;
    align-items: center;
    gap: 9px;
    color: #eaeaeabd;
    margin-top: -2px;
}

.repeat-p svg{
    width: 17px;
    fill: #ffffffe6;
}

.modal-toggle span > svg{
    width: 25px;
    fill: white;
    margin-top: 5px;
}

.modal-toggle > span{
    display: flex;
    gap: 10px;
    align-items: center;
}

.date-p{
    color: #e1e1e1;
}

.targets-footer {
  position: fixed;
  bottom: env(safe-area-inset-bottom, 20px);
  width: 100%;
  box-sizing: border-box;
  padding: 0 10px;
}

.task-item.removing {
  opacity: 0;
  transform: translateX(-10px);
  transition: 0.2s ease;
}


.dot {
  opacity: 0;
  animation: blink 1.5s infinite;
}

.dot1 { animation-delay: 0s; }
.dot2 { animation-delay: 0.3s; }
.dot3 { animation-delay: 0.6s; }

@keyframes blink {
  0%   { opacity: 0; }
  30%  { opacity: 1; }
  60%  { opacity: 1; }
  100% { opacity: 0; }
}

.tasks-loader{
    color: white;
}

.goals-header > svg{
    width: 36px;
    margin-top: 2px;
}

.targets-header input::placeholder{font-size:15px;}

.target-modal{
}

.target-modal > h3{
    width: 100%;
    padding: 0 25px;
    font-size: 27px;
    margin-top: 15px;
}

.habit-title{
    padding: 20px;
}

.target-modal .category-list{
    margin-left: 20px;
}
#targetModal .target-modal .category-list{
    margin-left: 0;
}

.target-modal .modal-actions{
    /* padding: 0 20px; */
}

.cat-label{
    font-size: 20px;
    margin-right: auto;
    padding-left: 25px;
    font-weight: 500;
}

.cat-label-with-icon{
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.cat-label-with-icon svg{
    flex: 0 0 18px;
}

.habit-modal-title{
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.habit-modal-title img{
    width: 18px;
    height: 18px;
    object-fit: contain;
}

.frequency-select{
    width: 100%;
    padding: 21px;
    display: flex;
    justify-content: space-between;
    gap: 5px;
}

.select-line{
    margin-top: 5px;
}

.frequency-extra{
    margin-right: auto;
    padding-left: 20px;
}

.quantity{
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.quantity-row{
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

.quantity-label{
    color: #ffffff;
    font-size: 14px;
    font-weight: 500;
}
.quantity .minus, .quantity .plus{
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: #172c5e;
    border: none;
    font-size: 18px;
}
.quantity .count{
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: #4177FF;
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    padding: 0;
}

.weekdays-list{
    width: 100%;
    display: flex;
    gap: 10px;
    font-size: 17px;
    font-weight: 500;
    justify-content: space-between;
    margin-bottom: 15px;
}

.title-days{
    width: 100%;
    margin-top: 0;
    padding-bottom: 20px;
    border-bottom: 2px solid lightgray;
}

.modal-days .cancel-btn{
    background: none;
}

.weekday-item.active{
    color: #497fff;
}

.month-days-grid{
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    margin-bottom: 20px;
}

.month-day-item{
    font-size: 17px;
    width: 20px;
    display: flex;
    justify-content: center;
    font-weight: 500;
}

.month-day-item.active{
    color: #6090ff;
}

.month-calendar-wrap{
    position: relative;
    width: 100%;
    max-width: 358px;
    margin: 0 auto 16px;
}

.month-calendar-image{
    width: 100%;
    height: auto;
    display: block;
}

.month-calendar-hitmap{
    position: absolute;
    inset: 0;
}

.month-day-hit,
.month-day-overlay{
    position: absolute;
    width: 11.17%;
    aspect-ratio: 1/1;
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

.month-day-hit{
    border: none;
    background: transparent;
    cursor: pointer;
}

.month-action-hit{
    position: absolute;
    border: none;
    background: transparent;
    cursor: pointer;
}

.month-day-overlay{
    pointer-events: none;
    background: #4177FF;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9);
    opacity: 0.88;
}

.target-modal.habit .modal-actions{
    padding: 20px;
}

.weekday-name{
    margin: 0;
    margin-bottom: 10px;
    color: #5588fc;
    font-weight: 600;
    text-align: center;
}
.weekday-num.active{
    background: #bcd0ff;
    border-radius: 20px;
    color: #185aff;
    width: 35px;
    height: 35px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0;
}

.habit-progress p{
    margin: 0;
    width: 45px;
    height: 45px;
    color: white;
    font-size: 13px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #1d4ac8;
    border-radius: 50%;
}
.habit-name{
    margin: 0;
    color: #96a6b5;
    font-size: 11px;
    text-align: center;
    text-overflow: ellipsis;
    overflow: hidden;
    margin-top: 6px;
}

.targets-sub-header p{
    width: max-content;
    padding: 2px 11px;
    font-size: 13px;
    background: #1d4ac8;
    border-radius: 11px;
    margin: 0;
    margin-top: 4px;
    padding-bottom: 4px;
}

.targets-sub-header h3{
    font-size: 16px;
    font-weight: 500;
}

.targets-header button.icon-btn svg{
    width: 13px;
    fill: #f1f1f1;
}

.home .is_active{background: #ffffff29;width: 9px;height: 9px;border-radius: 50%;}
.home .task-date{
    margin: 0;
}
.task-item .is_active.active{
    background: #e74c5c;
}
.home .task-name{margin: 0;width: 60%;flex: 1;                 /* занимает всё свободное место */min-width: 0;            /* КРИТИЧНО для ellipsis во flex */white-space: nowrap;     /* запрещаем перенос строк */overflow: hidden;        /* скрываем лишнее */text-overflow: ellipsis; /* ставим ... */}
.home .task-icon{display: none;}
.home .task-icon.active{
    display: block;
}
.home .task-icon svg{
    width: 17px;
    margin-top: 5px;
    fill: #e74c5c;
}
.home .task-check{
    width: 25px;
    height: 25px;
    border: 1px solid white;
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.task-item .is_active,
.task-item .task-icon,
.task-item .task-check {
  flex-shrink: 0;
}

.task-date {
  flex-shrink: 0;
  white-space: nowrap;
}

.footer-con .link p{
    margin: 0;
    margin-top: 5px;
    font-size: 11px;
    color: #ffffffc7;
}

.analitics-info button{
    margin-top: 10px;
}

#app.home .home-screen{
    padding-bottom: 120px;
}

.count-days-btn{
    width: 86px;
    height: 28px;
    padding: 0;
    margin: 8px 0 12px;
    border: none;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    position: relative;
    overflow: hidden;
    color: white;
}
.count-days-icon{
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    overflow: hidden;
    position: relative;
}
.count-days-icon img{
    width: 86px;
    height: 28px;
    display: block;
    max-width: none;
}
.count-days-text{
    flex: 1;
    padding-right: 8px;
    font-size: 13px;
    font-weight: 500;
    line-height: 28px;
    text-align: left;
    white-space: nowrap;
}
.weekdays-con .days-open{
    margin-top: 6px;
}

.task-check svg{
    width: 15px;
    fill: #ffffff00;
    transition: .2s;
}
.task-check.active svg{fill: white;}

.title-line{
    width: 100%;
    height: 1px;
    margin: 19px 0;
    background: linear-gradient(to right, transparent, #5e6e93, transparent);
}


.question-card-bg::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 18px;
  padding: 2px; /* толщина градиента */
  background: linear-gradient(306deg, #ffffff6b -76%, #ffffff00 70%, #ffffff69 120%);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude; /* для Firefox */
  pointer-events: none;
}

.targets-add-btn svg{
    width: 13px;
    fill: white;
    margin-right: 1px;
}

.tour-next{
    background: #5682ff;
    padding: 5px 10px;
    border-radius: 5px;
    border: none;
    color: white;
    margin-top: 1px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.calendar-day.disabled {
  opacity: 0.3;
  pointer-events: none;
  cursor: default;
}

.modal-backdrop.habbits{
    background: none;
}

.modal-card.non-ready .modal-title{
    font-size: 18px;
    font-weight: 600;
}

#cancelReset{margin-bottom: 0 !important;}

.profile-pic-year .sheet-item{
    padding: 15px;
}
*{
    font-family: "Montserrat", sans-serif;}

.frequency-select{
    
}

.habit-title{
    
}

.wheel::scroll{background:none;}

.bottom-sheet
.targets-header-add
    input
.targets-header{
    display: flex;
    justify-content: space-between;
}

.target-modal-section .loader {
    width: 220px;
    height: 6px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    overflow: hidden;
}

.loader-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #6aa8ff, #4f7cff);
    border-radius: 6px;
}

.primary-btn {
    width: 100%;
    height: 52px;
    background: linear-gradient(88deg, #7696ff, 29%, #4177fe);
    border: none;
    border-radius: 14px;
    color: #ffffff;
    font-size: 16px;
    font-weight: 600;
    padding: 10px 30px;
    transition: 2.5s;
}

.primary-btn:disabled{background: linear-gradient(90deg, #6a8cff8f, #5f9cffbf);
    color: #dcdcdc;}

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

.secondary-text {
    margin-top: 12px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
    text-align: center;
    line-height: 1.4;
}

.secondary-text
    a {
    color: #8fb2ff;
    text-decoration: underline;
}

.question-card {
    background: #2f416b7a;
    -webkit-backdrop-filter: blur(18px);
    padding: 20px 18px;
    border-radius: 20px;
}


.question-title {
    font-size: 20px;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 6px;
    margin-top: -5px;
}

.question-text {
    font-size: 14px;
    color: rgb(255 255 255 / 88%);
    margin-bottom: 18px;
}

.compound-field {
    margin-bottom: 0px;
    margin-top: 23px;
}

.compound-label {
    display: block;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 9px;
}
    textarea.question-input {
    padding-top: 10px;
    height: 82px;
    max-height: 450px;
    overflow: scroll !important;
    min-height: 50px;
}
.question-input {
    width: 100%;
    height: 50px;
    background: rgb(255 255 255 / 7%);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 12px;
    padding: 0 14px;
    font-size: 15px;
    color: #ffffff;
    outline: none;
}

.question-input::placeholder {
    color: rgba(255, 255, 255, 0.45);
}

.question-input:focus {
    border-color: rgb(216 230 255 / 50%);
}

.profile-card {
    background: linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.12),
            rgba(255, 255, 255, 0.04)
    );
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 20px;
    padding: 18px 16px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.profile-header {
    margin-bottom: 30px;
}

.profile-header
    h2 {
    margin: 8px 0 6px;
    font-size: 18px;
    font-weight: 600;
    color: #fff;
    line-height: 1.2;
}

.profile-header
    p {
    margin: 0;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
}

.profile-header .back-btn {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    font-size: 15px;
    padding: 0;
    margin-left: 0 !important;
    margin-bottom: 20px !important;
    margin-top: 0 !important;
}

.profile-form >
    label:last-of-type,
.profile-form > label:nth-last-of-type(2){
    display: none;
}
.profile-form >
    input:last-of-type,
.profile-form > input:nth-last-of-type(2){
    margin-top: 10px;
}
.profile-form >
    input:nth-last-of-type(2){
    margin-top: 30px;
}

.profile-form
    label {
    display: block;
    margin: 14px 0 6px;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.85);
}

.profile-form .question-input {
    width: 100%;
    height: 48px;
    background: rgba(255, 255, 255, 0.14);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    -webkit-appearance: none;
    appearance: none;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 12px;
    padding: 0 14px;
    font-size: 15px;
    color: #fff;
    outline: none;
    box-sizing: border-box;
    color-scheme: dark;
    margin-bottom: 5px;
}

.profile-form .question-input::placeholder {
    color: rgba(255, 255, 255, 0.45);
}

.profile-form .question-input:focus {
    border-color: rgb(182 209 255 / 60%);
}

.radio-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 4px;
}

.radio-row label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: rgba(255, 255, 255, 0.85);
    cursor: pointer;
}

.radio-row input[type="radio"] {
    margin: 0;
    accent-color: #6a8cff;
    flex: 0 0 auto;
}

.primary-btn.secondary {
    background: linear-gradient(90deg, #6a8cff, #5f9cff);
    margin-bottom: 10px;
}

.danger-btn {
    background: none;
    border: none;
    color: #ff6b6b;
    font-size: 14px;
}

.scenario-card {
    background: linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.14),
            rgba(255, 255, 255, 0.04)
    );
    border-radius: 20px;
    padding: 20px;
    color: #fff;
}

.scenario-text {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.8);
    margin: 12px 0 20px;
}



.scenario-btn {
    flex: 1;
    height: 36px;
    border-radius: 10px;
    background: rgb(212 209 255 / 18%);
    color: #ffffff;
    font-weight: 500;
    font-size: 14px;
    border: none;
    transition:
      background 0.2s ease,
      transform 0.15s ease,
      opacity 0.15s ease;
}



.scenario-btn.active {
    background: linear-gradient(88deg, #7e9cff, #577dff) !important;
    opacity: 1;
    border-color: transparent;
}

.scenario-btn:not(.active) {
    opacity: 0.9;
}
.scenario-loader {
    position: fixed;
    inset: 0;
    background: rgba(5, 10, 35, 0.85);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999;
}

.scenario-loader.hidden {
    display: none;
}
.scenario-screen {
    position: relative;
}

.loader-text {
    color: #ffffff;
    font-size: 15px;
    letter-spacing: 0.3px;
    animation: pulse 1.4s ease-in-out infinite;
}
    @keyframes pulse {
    0% {
        opacity: 0.4;
    }
    50% {
    opacity: 1;
    }
    100% {
    opacity: 0.4;
    }
}

.scenario-content {
    color: #ffffff;
    font-size: 15px;
    line-height: 1.55;
}

/* Заголовки блоков */
.scenario-content
    strong {
    display: block;
    margin-top: 18px;
    margin-bottom: 6px;
    font-size: 16px;
    font-weight: 600;
    color: #ffffff;
}

/* подчёркнутые фрагменты */
.scenario-content
    u,
.scenario-content em {
    color: #ffffff;
    font-style: normal;
}

/* на всякий случай */
.scenario-content
    p,
.scenario-content h3,
.scenario-content em,
.scenario-content strong {
    color: #ffffff;
}

.scenario-header
    h2 {
    color: #ffffff;
    font-weight: 600;
}

.scenario-subtitle {
    color: rgba(255, 255, 255, 0.9);
}

.glass-card {
    background: none;
    backdrop-filter: blur(12px);
    border-radius: 18px;
    padding: 3px;
    margin-bottom: 70px;
}

/* внешняя стеклянная рамка */
.scenario-buttons-wrap {
    margin-top: 16px;
    padding: 7px;
    border-radius: 16px;
    background: rgb(120 133 157 / 16%);
    backdrop-filter: blur(10px);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15);
}

.scenario-buttons {
    display: flex;
    gap: 12px;
       /* ⬅️ КЛЮЧ */
}

.modal.hidden {
    display: none;
}

.modal {
    position: fixed;
    inset: 0;
    z-index: 100;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}

.modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
}

.modal-card {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% - 32px);
    max-width: 360px;
    background: #fff;
    border-radius: 20px;
    padding: 24px 20px 20px;
    color: #0a1733;
    justify-content: center;
    display: flex;
    flex-wrap: wrap;
}

.modal-close {
    position: absolute;
    top: 15px;
    right: 15px;
    font-size: 19px !important;
}

.modal-title {
    font-size: 19px;
    font-weight: 700;
    text-align: start;
    margin-bottom: 12px;
    margin-top: 0;
    margin-right: auto;
    max-width: 95%;
}

.modal-divider {
    height: 1px;
    background: #d7e0ff;
    margin: 12px 0 16px;
}

.modal-text {
    font-size: 14px;
    line-height: 1.45;
    text-align: left;
    margin-bottom: 25px;
}

.modal-primary-btn {
    margin-top: 16px;
    width: 100%;
    height: 48px;
    border: none;
    border-radius: 14px;
    background: linear-gradient(135deg, #6a8cff, #4f7cff);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}
.scenario-change-modal {
    align-items: center;
    text-align: center;
}

.scenario-change-modal .modal-title {
    text-align: center;
    margin-right: 0;
    width: 100%;
}

.scenario-change-modal .modal-text {
    text-align: center;
}

.scenario-change-modal .modal-divider-svg {
    display: block;
    width: 100%;
    max-width: 330px;
    margin: 0 auto 16px;
}

.resume-screen h2{
    color: white;
    margin: 20px auto;
    margin-bottom: 20px;
    font-size: 30px;
}
.resume-screen
    p{
    color: white;
    margin: 0 auto;
    width: 90%;
    text-align: center;
    font-size: 15px !important;
    margin-bottom: 60px;
}
.scenario-card
    h2:first-of-type{
    margin-top: 0;
}
    input,
textarea,
select {
    outline: none;
    box-shadow: none;
    -webkit-tap-highlight-color: transparent;
}

/* iOS Safari — автозаполнение (белый фон) */
    input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
    box-shadow: 0 0 0 1000px transparent inset !important;
    -webkit-text-fill-color: inherit !important;
    transition: background-color 9999s ease-in-out 0s;
}

/* Убираем синий/белый тап-эффект */
* {
    -webkit-tap-highlight-color: transparent;
}

.answer-option.selected {
    background-color: #324369;
}

.modal-close {
    appearance: none;
    -webkit-appearance: none;
    border: none;
    background: none;
    padding: 0;
    margin: 0;
    font: inherit;
    color: inherit;
    line-height: 1;
    cursor: pointer;
}


.input-wrapper {
    position: relative;
}

.char-counter {
    position: absolute;
    bottom: -18px;
    right: 4px;
    font-size: 12px;
    color: #999;
}

.hidden {
    display: none;
}

.fade-in {
    animation: fadeIn 0.2s ease forwards;
}

.fade-out {
    animation: fadeOut 0.2s ease forwards;
}
    @keyframes fadeIn {
  from { opacity: 0; }
  to   {
    opacity: 1; }
}
    @keyframes fadeOut {
  from { opacity: 1; }
  to   {
    opacity: 0; }
}

.category-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.category-item, .deadline-item {
    padding: 6px 12px;
    border-radius: 10px;
    background: rgba(255,255,255,0.1);
    cursor: pointer;
}

.category-item.active, .deadline-item.active,
.goal-item.active{
    background: #1a4489 !important;
    border: 2px solid #5880d2 !important;
}

.slider {
    position: relative;
}

.slider-marks {
    position: absolute;
    top: -27px;
    left: 4px;
    right: 0;
    height: 10px;
    width: 80%;
    margin-left: 30px;
}

.slider-mark {
    position: absolute;
    top: 14px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgb(153 153 153 / 50%);
    transform: translateX(-50%);
}

.slider-mark.active {
    background: none;
    top: 5px;
    font-size: 14px;
}

.slider-mark.hidden {
    display: none;
}

.slider-number {
    position: absolute;
    top: -2px;
    transform: translateX(-50%);
    font-size: 11px;
    font-weight: 500;
    color: #fff;
}

.target-modal{
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    transform: none;
    border-radius: 0;
    max-width: 100%;
    height: 100%;
    align-content: start;
    gap: 0px;
    background: none;
    padding: 0;
    box-sizing: border-box;
    overflow-y: scroll;
    padding-top: 10px;
}

.target-modal-section{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    height: max-content;
    padding: 10px 20px;
    box-sizing: border-box;
}
.target-modal-icon{
    width: max-content;
    margin-right: 10px;
    font-size: 38px;
}
.target-modal-title{
    width: max-content;
    margin: 0;
    width: 100%;
    padding: 15px;
    border: none;
    height: max-content;
    min-height: 40px;
    margin: 20px;
    background: #22366ab0;
    border-radius: 15px;
    margin-top: 10px;
    font-size: 15px;
    margin-bottom: 10px;
    resize: none;
}

.target-modal-section .slider{
    width: 100%;
    display: flex;
    justify-content: center;
    /* flex-wrap: wrap; */
}
.target-modal-section .slider input{
    width: 84%;
    margin-right: 10px;
    z-index: 1000;
}

.slider-scale{
    position: absolute;
    top: -2px;
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.target-modal-section:first-of-type{
    justify-content: start;
}
.target-modal-section:first-of-type p{
    font-size: 32px;
    margin: auto 0;
    font-weight: 600;
}

.target-modal-section .label{
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 17px;
    margin-top: 22px;
}

.category-list, .deadline-list{
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    overflow-x: scroll;
    /* height: 30px; */
    overflow-y: hidden;
    padding-bottom: 10px;
    gap: 9px;
}
.target-modal-section .category-item, .target-modal-section .deadline-item, .goal-item, .target-modal .category-item{
    white-space: nowrap;
    border: 2px solid #192b59;
    font-size: 14px;
    background: #00000017;
    padding: 10px 20px;}

.target-modal-section .text{
    margin-bottom: 45px;
    margin-top: -8px;
    font-size: 14px;
    color: #dadada;
}

.target-modal-actions{
    width: 100%;
    padding: 20px;
}
.target-modal-actions
    button{
    width: 100%;
    margin-bottom: 10px;
}

#targetModal{
    background: none;
}

.target-modal *{
    color: #f2f2f2;
}

.target-modal-actions .save-btn{
    padding: 15px;
    background: #6791ffab;
    border: none;
    border-radius: 15px;
    font-size: 16px;
}

.target-modal-actions .cancel-btn{
    background: none;
    border: none;
    padding: 10px;
    font-size: 16px;
    color: #537eff;
    font-weight: 600;
}

.targets-block{
    color: white;
    background: none;
    padding: 0;
    margin-bottom: 20px;
    width: 100%;
}
.targets-header{
    font-size: 22px;
    justify-content: space-between;
    color: white;
    display: flex;
    align-items: center;
    gap: 12px;
}
.targets-header button{
    padding: 10px;
    padding-right: 9px;
    border-radius: 10px;
    color: white;
    background: #1a2b57;
    border: none;
    font-size: 14px;
    display: flex;
    gap: 6px;
    align-items: center;
    padding-right: 11px;
}
.targets-header-default .targets-add-btn{
    padding: 14px;
}

.targets-header h3{
    margin: 0;
    font-size: 16px;
}

.targets-block:first-of-type{margin-bottom: 25px;
    height: 50px;
    margin-bottom: 25px;
    width: 100%;}

.targets-header.targets-header-add{
    background: #162955c7;
    border-radius: 10px;
}
.targets-header.targets-header-add.hidden{
    display: none;
}

.targets-header-add
    button:last-of-type{
    background: none;
    font-size: 14px;
    height: 47px;
    padding: 12px;
}
.targets-header-add
    button:last-of-type svg{
    width: 29px;
    fill: white;
    background: #4c75c9;
    padding: 6px;
    border-radius: 50%;
}

.targets-header-add
    input{
    width: 100%;
    padding: 10px;
    background: none;
    border: none;
    color: white;
    font-size: 16px;
}

.targets-header-add
    input::placeholder{color:#e0e0e0}

.targets-header-default
    h3{
    font-size: 24px;
}

.deadline-input{
    margin-top: 10px;
    padding: 11px;
    border-radius: 10px;
    border: none;
    background: #223463;
    color-scheme: dark;
    font-size: 15px;
}

.ai-idea-item{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0;
    background: none;
    margin-bottom: 15px;
}

.ai-idea-item {
    position: relative;
}

.ai-idea-item .new {
    position: absolute;
    top: 1px;
    right: 49px;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 6px;
    background: #2ecc71;
    color: #fff;
}

.target-item{
    padding: 13px 16px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 9px;
    border-radius: 20px;
}

.target-item
    strong{
    font-size: 18px;
    font-weight: 500;
}
.target-item .category{
    margin: 0 5px;
    border-radius: 5px;
    padding: 2px 5px;
    font-size: 12px;
    display: flex;
    align-items: center;
}
.target-item .deadline{
    color: #e1e1e1;
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
}
.deadline
    svg{
    width: 23px;
    fill: #e1e1e1;
}
.target-item .target{
    width: 100%;
    display: flex;
    margin-top: 8px;
    font-size: 15px;
}

.targets-generate-btn
    svg{
    width: 24px;
    fill: #e9e9e9;
}

.ai-idea-item .idea-text{
    border: 2px solid #274182;
    width: 86%;
    border-radius: 10px;
    padding: 14px 15px;
    font-size: 14px;
    color: white;
    user-select: none;
}

.idea-delete-btn{
    width: 38px;
    height: 41px;
    background: #1a2b57;
    border: #1a2b57;
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.idea-delete-btn
    svg{
    fill: #3d5ab5;
    width: 26px;
}

.targets-list{
    margin-bottom: 25px;
    gap: 16px;
    display: flex;
    flex-wrap: wrap;
}

.targets-close-btn{
    background: none !important;
    padding-left: 15px !important;
    padding-right: 0px !important;
    font-size: 15px !important;
}

#aiLoadingModal .modal-card{
    top: 30%;
}

#targetModal .modal-backdrop{
    background: none;
}

.targets-header-default, .targets-header-add{
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    height: 50px;
}

.screen-inner.targets-screen{
    flex: none;
    overflow-y: scroll;
    height: 100vh;
    align-content: start;
    flex-wrap: wrap;
    flex-direction: row;
    padding-bottom: 60px;
}


.card {
    position: relative;
    border-radius: 18px;
    /* padding: 15px; */ /* внутренний отступ под контент */
    background: none; /* убираем фон */
    width: 100%;
}

.card::before {
   content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 18px;
    padding: 2px; /* толщина градиента */
    background: linear-gradient(305deg, #ffffff -76%, #ffffff00 30%, #ffffff8a 160%);
    -webkit-mask:
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude; /* для Firefox */
    pointer-events: none;
}

.card-content {
    position: relative; /* чтобы оставаться поверх псевдоэлемента */
    border-radius: 16px;
    padding: 15px 18px;
    background: #2a3a6175; /* полупрозрачный фон */
    color: #e5e7eb;
    backdrop-filter: none;
}

.targets-footer{
    position: sticky;
    bottom: 0;
    margin-bottom: 20px;
    width: 90%;
    box-sizing: border-box;
    left: auto;}

.continue-btn{
    position: fixed;
    bottom: 0;
    margin-bottom: 20px;
    left: 50%;          /* смещаем левый край в центр экрана */
    transform: translateX(-50%) !important; /* сдвигаем кнопку влево на половину ширины */
    /* ширина кнопки по содержимому или фиксированная */
    padding: 10px 20px;
    width: 87%;
    height: 52px;
    border: none;
    border-radius: 16px;
    background: linear-gradient(135deg, #6a8cff, #4f7cff);
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    box-shadow: 0 10px 24px rgba(106, 140, 255, 0.35);
    cursor: pointer;
    }

#tasksIntroModal .modal-primary-btn{
    text-align: center;
}

#tasksIntroModal .modal-text:first-of-type{
    margin-right: auto;
    font-size: 19px;
    font-weight: 600;
    border-top: 2px solid #e1e1e1;
    width: 100%;
    padding-top: 15px;
    margin-top: 10px;
    margin-bottom: 10px;
}

#tasksIntroModal b{
    font-weight: normal;
}

#tasksIntroModal li{
    font-weight: normal;
    margin-bottom: 8px;
}

#tasksIntroModal .modal-text:last-of-type{
    margin-bottom: 10px;
}

.goals-header {
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 14px;
    background: none;
    padding: 5px 0;
    margin-bottom: 0;
}

.goals-header
    svg{
    width: 25px;
    fill: white;
}

.goals-header .svg-con{
    width: 34px;
    height: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0px;
    background: #5fcf7d;
    border-radius: 5px;
}

.goals-header
    p{
    font-size: 28px;
    margin: 0;
    color: white;
    font-weight: 500;
}

.goals-screen .targets-header-add{
    position: relative;
    top: 0;
    left: 0;
    margin-bottom: 30px;
    margin-top: 20px;
}

.goals-screen .targets-header-add
    input{
    padding-left: 20px;
}

.goals-screen .targets-header
    svg{
    width: 23px;
    fill: white;
}

.goals-screen .targets-header{
    justify-content: space-between;
}

.goals-screen
    h3{font-size: 16px;
    color: white;
    font-weight: 500;
    margin-top: 0;}

.goals-list{
    background: none;
    display: flex;
    gap: 10px;
    padding: 0;
    margin-bottom: 16px;
    width: 100%;
    min-height: 98px;
    height: 98px;
    overflow-x: scroll;
    overflow-y: visible;
    border-radius: 0;
    padding-bottom: 10px;
    color: white;
    box-sizing: border-box;
}

.goal-item{
    padding: 10px 15px;
    width: max-content;
    display: block;
    box-sizing: border-box;
    height: auto;
    min-height: 0;
    border-radius: 10px;
    border: 1px solid rgba(88, 128, 210, 0.45);
    background: rgba(255,255,255,0.1);
    color: white;
    min-width: 130px;
    max-width: 240px;
    white-space: normal;
    line-height: 1.25;
    overflow: visible;
    overflow-wrap: anywhere;
    word-break: break-word;
    flex-shrink: 0;
}

.goals-screen .goals-list .goal-item{
    white-space: normal !important;
    height: auto;
    min-height: 0;
    line-height: 1.25;
    align-self: flex-start;
}

.goals-screen .goals-row {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    width: 100%;
    min-height: 82px !important;
    height: 82px !important;
    max-height: 82px !important;
    padding: 0 0 10px !important;
    margin: 0 0 14px 0 !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    scrollbar-width: none;
    -ms-overflow-style: none;
    background: transparent !important;
    border: 0 !important;
    box-sizing: border-box !important;
}

.goals-screen .goals-row::-webkit-scrollbar {
    display: none;
}

.goals-screen .goal-row-item {
    display: flex !important;
    align-items: flex-start;
    justify-content: flex-start;
    flex: 0 0 auto !important;
    align-self: stretch !important;
    width: 136px !important;
    min-width: 136px !important;
    max-width: 136px !important;
    height: 76px !important;
    min-height: 76px !important;
    max-height: 76px !important;
    padding: 12px 12px 10px;
    margin: 0;
    border: 1.5px solid rgba(53, 92, 179, 0.72);
    border-radius: 12px;
    background: rgba(9, 27, 63, 0.96);
    color: #ffffff;
    font: inherit;
    line-height: 1.4;
    text-align: left;
    white-space: normal;
    overflow: hidden;
    overflow-wrap: anywhere;
    word-break: break-word;
    box-sizing: border-box;
    appearance: none;
    -webkit-appearance: none;
    text-wrap: pretty;
}

.goals-screen .targets-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.goals-screen .targets-header .tasks-generate-btn {
    flex: 0 0 auto;
    margin-left: auto;
}

.goals-screen > h3,
.goals-screen h3:not(.sub-header) {
    font-size: 18px;
    line-height: 24px;
    font-weight: 500;
    letter-spacing: 0;
}

.goals-screen .goal-row-item {
    font-size: 10px;
    line-height: 14px;
    font-weight: 500;
    letter-spacing: 0;
}

.goals-screen .goal-row-text {
    display: -webkit-box;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    align-self: flex-start;
}

.goals-screen .goal-row-item.active {
    background: rgba(50, 81, 171, 0.6);
    border-color: #5f8fff;
    box-shadow: inset 0 0 0 1px rgba(122, 162, 255, 0.22);
}

.goals-screen .tasks-list .idea-text {
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
    letter-spacing: 0;
}

.tasks-list{
    background: none;
    padding: 10px 0;
    margin-top: 20px;
    clear: both;
}

.tasks-list >
    p{
    color: white;
    font-size: 20px;
    padding-left: 5px;
}

.modal#tasks .modal-backdrop{
    background: none;
}

.modal#tasks .modal-card{
    top: 0px;
    padding: 0 20px;
    padding-top: 20px;
}

.bottom-sheet{
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 1000;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    overflow: hidden;
    height: max-content;
}

.bottom-sheet .sheet-card{
    display: flex;
    flex-wrap: wrap;
    background: #25396bc9;
    backdrop-filter: blur(20px);
    height: max-content;
}

.bottom-sheet .sheet-item{
    width: 100%;
    padding: 20px;
    background: white;
    border-bottom: 0px solid lightgray;
}

#tasks .target-modal >
    textarea{
    width: 100%;
    margin: 0;
    margin-bottom: 30px;
    font-size: 17px;
}

.target-modal .modal-field{
    width: 100%;
    margin-bottom: 30px;
}

.target-modal .modal-field
    svg{
    width: 28px;
    fill: white;
    margin-top: 5px;
}

.target-modal .goals-header:first-of-type{
    margin-right: auto;
    margin-bottom: 20px;
}

.target-modal .modal-field label{
    display: flex;
    gap: 6px;
    font-size: 25px;
    align-items: center;
}

.target-modal .modal-field
    button{
    background: #253b7391;
    width: 100%;
    margin-top: 20px;
    padding: 15px;
    color: white;
    border-radius: 10px;
    border: none;
    font-size: 16px;
    text-align: start;
    position: relative;
    padding-right: 20px; /* место для стрелки */
    cursor: pointer;
}

.select-target-btn::after {
  content: "";
    position: absolute;
    top: 50%;
    right: 10px;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #ffffff; /* цвет стрелки */
    transform: translateY(-50%);
    pointer-events: none; /* чтобы стрелка не мешала клику */
}

.modal-toggle{
    width: 100%;
    margin-bottom: 30px;
    font-size: 20px;
    display: flex;
    justify-content: space-between;
    padding: 0 5px;
}

.date-extra{
    margin-right: auto;
    margin-top: -23px;
    margin-bottom: 30px;
}

#tasks .target-modal
    input{
    margin-right: auto;
    background: none;
    background: #1a2b57;
    border: 1px solid #1a2b57;
    padding: 10px 20px;
    border-radius: 10px;
}

.target-modal .time-picker{
    margin-bottom: 40px;
}

.priority-block{
    width: 100%;
    display: flex;
    gap: 15px;
    margin-bottom: 30px;
}

.item-prioritet{
    display: block;
    white-space: nowrap;
    border: 2px solid #192b59;
    font-size: 16px;
    background: #00000017;
    padding: 12px 25px;
    border-radius: 10px;
    position: relative;
    padding-left: 30px;
}

.item-prioritet.red{
    background: #681c64;
    border: 1px solid #681c64;
}

.item-prioritet.yellow{
    background: #604e36;
    border: 1px solid #604e36;
}

.item-prioritet.green{
    background: #1c5947;
    border: 1px solid #1c5947;
}

.item-prioritet.green.active{
    border: 1px solid #42c443;
}
.item-prioritet.yellow.active{
    border: 1px solid #f7a529;
}
.item-prioritet.red.active{
    border: 1px solid #f64e55;
}

.item-prioritet::before {
  content: "";
    position: absolute;
    left: 11px;
    top: 50%;
    transform: translateY(-50%);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #f64e55;
}

.item-prioritet.red::before{
    background-color: #f64e55;
}
.item-prioritet.yellow::before{
  background-color: #f7a529;
}
.item-prioritet.green::before{
  background-color: #42c443;
}

.target-modal .modal-actions{
    width: 100%;
    margin-top: 20px;
    margin-bottom: 50px;
}

.target-modal .modal-actions .cancel-btn{
    width: 100%;
    display: flex;
    justify-content: center;
    background: white;
    background: none;
    border: none;
    font-size: 16px;
    margin-top: 23px;
    color: #537eff;
    font-weight: 600;
}


.switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 26px;
}

.switch
    input {
  opacity: 0;
    width: 0;
    height: 0;
}

.modal-toggle .slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background: rgba(255,255,255,0.15);
    border-radius: 30px;
    transition: 0.4s;
}

.modal-toggle .slider::before {
  content: "";
    position: absolute;
    height: 22px;
    width: 22px;
    left: 2px;
    top: 2px;
    background: #fff;
    border-radius: 50%;
    transition: 0.25s;
}

.switch
    input:checked + .slider {
  background: linear-gradient(135deg, #4facfe, #557fff);
}

.switch
    input:checked + .slider::before {
  transform: translateX(18px);
}

.time-wheel {
    display: flex;
    justify-content: center;
    gap: 12px;
    padding: 16px;
    background: linear-gradient(180deg, #2e488187, #1c2d608c);
    border-radius: 18px;
    width: 87%;
    margin-bottom: 47px;
}

.wheel {
    height: 120px;
    width: 110px;
    overflow-y: auto;
    text-align: center;
    scroll-snap-type: y mandatory;
}

.wheel-item.active {
    color: #fff;
    font-weight: 600;
}

.wheel-divider {
    font-size: 22px;
    padding-top: 36px;
    margin-top: 8px;
}

.wheel {
  overflow-x: hidden;   /* запрет горизонтального скролла */
  overflow-y: auto;     /* вертикальный скролл оставляем */
}

.calendar {
    padding: 16px;
}

.calendar-header {
    text-align: center;
    font-weight: 600;
    margin-bottom: 12px;
    width: 100%;
    color: white;
    padding-bottom: 10px;
    padding-top: 3px;
}

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
    width: 100%;
}

.calendar-day {
    padding: 14px 0;
    text-align: center;
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
}

.calendar-day:hover {
  background: rgba(255,255,255,0.15);
}

.calendar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.cal-nav {
    background: none;
    border: none;
    font-size: 22px;
    color: #fff;
    cursor: pointer;
}

.cal-title {
    display: flex;
    gap: 6px;
    font-weight: 600;
    cursor: pointer;
}

.cal-year {
    opacity: 0.7;
}

.year-picker {
    max-height: 60vh;
    overflow-y: auto;
}

.wheel::-webkit-scrollbar {
  display: none;
}

.wheel-item {
    height: 40px;
    line-height: 40px;
    scroll-snap-align: center;
    text-align: center;
    font-size: 20px;
    color: rgba(255,255,255,0.35);
    transition: color 0.15s, transform 0.15s;
}

.wheel-item.active {
    color: #fff;
    font-weight: 600;
    transform: scale(1.05);
    background: #304b87a8;
    border-radius: 14px;
}

.repeat-p{
    display: flex;
    align-items: center;
    gap: 9px;
    color: #eaeaeabd;
    margin-top: -2px;
}

.repeat-p
    svg{
    width: 17px;
    fill: #ffffffe6;
}

.modal-toggle
    span > svg{
    width: 25px;
    fill: white;
    margin-top: 5px;
}

.modal-toggle >
    span{
    display: flex;
    gap: 10px;
    align-items: center;
}

.date-p{
    color: #e1e1e1;
}

.targets-footer {
    position: fixed;
    bottom: env(safe-area-inset-bottom, 20px);
    width: 100%;
    box-sizing: border-box;
    padding: 0 10px;
}

.task-item.removing {
    opacity: 0;
    transform: translateX(-10px);
    transition: 0.2s ease;
}


.dot {
    opacity: 0;
    animation: blink 1.5s infinite;
}

.dot1 {
    animation-delay: 0s; }
.dot2 {
    animation-delay: 0.3s; }
.dot3 {
    animation-delay: 0.6s; }
    @keyframes blink {
  0%   { opacity: 0; }
  30%  {
    opacity: 1; }
  60%  {
    opacity: 1; }
  100% {
    opacity: 0; }
}

.tasks-loader{
    color: white;
}

.goals-screen .targets-block >
    h3{
    margin-top: 30px;
}
.targets-block .tasks-list{
    margin-top: 10px;
}

.goals-header >
    svg{
    width: 36px;
    margin-top: 2px;
}

.targets-header
    input::placeholder{font-size:15px;}

.modal-backdrop{
    /* background: none; */
}

.target-modal >
    h3{
    width: 100%;
    padding: 0 25px;
    font-size: 27px;
    margin-top: 15px;
}

.habit-title{
    padding: 20px;
}

.target-modal .category-list{
    margin-left: 20px;
}
#targetModal .target-modal .category-list{
    margin-left: 0;
}

.target-modal .modal-actions{
    /* padding: 0 20px; */
}

.cat-label{
    font-size: 20px;
    margin-right: auto;
    padding-left: 25px;
    font-weight: 500;
}

.frequency-select{
    width: 100%;
    padding: 21px;
    display: flex;
    justify-content: space-between;
    gap: 5px;
}

.frequency-select
    button{
    padding: 5px;
    white-space: nowrap;
    border: 2px solid #192b59;
    font-size: 14px;
    background: #00000017;
    padding: 12px 12px;
    width: auto;
    font-size: 13px;
    border-radius: 8px;
}

.frequency-select
    button.active{
    background: #1a4489 !important;
    border: 2px solid #5880d2 !important;
}

.select-line{
    margin-top: 5px;
}

.frequency-extra{
    margin-right: auto;
    padding-left: 20px;
}

.quantity{
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.quantity-row{
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

.quantity-label{
    color: #ffffff;
    font-size: 14px;
    font-weight: 500;
}
.quantity .minus, .quantity .plus{
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: #172c5e;
    border: none;
    font-size: 18px;
}
.quantity .count{
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: #4177FF;
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    padding: 0;
}

.weekdays-list{
    width: 100%;
    display: flex;
    gap: 10px;
    font-size: 17px;
    font-weight: 500;
    justify-content: space-between;
    margin-bottom: 15px;
}

.title-days{
    width: 100%;
    margin-top: 0;
    padding-bottom: 20px;
    border-bottom: 2px solid lightgray;
}

.modal-days{
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-top: 20px;}
.modal-days
    button{width: 48%;
    padding: 10px;
    margin: 0;
    border-radius: 10px;
    border: none;
    font-size: 15px;
    height: 51px;}

.modal-days .cancel-btn{
    background: none;
}

.weekday-item.active{
    color: #497fff;
}

.month-days-grid{
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    margin-bottom: 20px;
}

.month-day-item{
    font-size: 17px;
    width: 20px;
    display: flex;
    justify-content: center;
    font-weight: 500;
}

.month-day-item.active{
    color: #6090ff;
}

.target-item.glass-card{
    margin-bottom: 0;
}

.target-modal.habit .modal-actions{
    padding: 20px;
}

.weekdays{
    display: flex;
    gap: 10px;
    justify-content: space-between;
    margin-top: 23px;
    margin-bottom: 50px;
}
.weekday{
    width: max-content;
}
.weekday-name{
    margin: 0;
    margin-bottom: 10px;
    color: #5588fc;
    font-weight: 600;
    text-align: center;
}
.weekday-num{
    font-weight: 600;
    color: white;
    text-align: center;
    margin-top: 17px;
}
.weekday-num.active{
    background: #bcd0ff;
    border-radius: 20px;
    color: #185aff;
    width: 35px;
    height: 35px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 -8px;
}

.habits-list{
    display: flex;
    justify-content: left;
    margin-top: 23px;
    margin-bottom: 50px;
    gap: 15px;
}
.habit-item{
    width: max-content;
    width: 60px;
}
.habit-progress{
    border: 0;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 55px;
    height: 55px;
    position: relative;
    overflow: visible;
}
.habit-progress
    p{
    margin: 0;
    width: 45px;
    height: 45px;
    color: white;
    font-size: 13px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--habit-color, #1d4ac8);
    border-radius: 50%;
    position: relative;
    z-index: 1;
}
.habit-progress .habit-list-ring {
    position: absolute;
    width: 66px;
    height: 66px;
    inset: 50% auto auto 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}
.habit-progress-ring {
    position: absolute;
    overflow: visible;
}
.habit-progress .habit-progress-ring-track,
.habit-progress .habit-progress-ring-fill {
    fill: none;
    stroke-width: 3;
}
.habit-progress .habit-progress-ring-track {
    stroke: var(--habit-color, #4177ff);
    stroke-opacity: 0.24;
}
.habit-progress .habit-progress-ring-fill {
    stroke: var(--habit-color, #4177ff);
    stroke-opacity: 1;
}
.habit-name{
    margin: 0;
    color: #96a6b5;
    font-size: 11px;
    text-align: center;
    text-overflow: ellipsis;
    overflow: hidden;
    margin-top: 6px;
}

.targets-sub-header{
    display: flex;
    gap: 10px;
    align-items: center;
    color: white;
    margin-top: 5px;
}
.targets-sub-header
    p{
    width: max-content;
    padding: 2px 11px;
    font-size: 13px;
    background: #1d4ac8;
    border-radius: 11px;
    margin: 0;
    margin-top: 4px;
    padding-bottom: 4px;
}

.targets-sub-header
    h3{
    font-size: 16px;
    font-weight: 500;
}

.targets-header
    button.icon-btn svg{
    width: 13px;
    fill: #f1f1f1;
}

.targets-header
    button.icon-btn{
    padding: 9px;
}

.home .tasks-list{
    display: flex;
    flex-wrap: wrap;
    margin-top: 0px;
    padding: 0;
}
.home .task-item{
    width: 100%;
    display: flex;
    gap: 12px;
    color: white;
    align-items: center;
    padding: 10px 0;
    flex-wrap: nowrap;
    font-size: 14px;
    margin-bottom: 0;
}
.home .is_active{
    background: #ffffff29;
    width: 9px;
    height: 9px;
    border-radius: 50%;}
.home .task-date{
    margin: 0;
}
.task-item .is_active.active{
    background: #e74c5c;
}
.home .task-name{
    margin: 0;
    width: 60%;
    flex: 1;                 /* занимает всё свободное место */
    min-width: 0;            /* КРИТИЧНО для ellipsis во flex */
    white-space: nowrap;     /* запрещаем перенос строк */
    overflow: hidden;        /* скрываем лишнее */
    text-overflow: ellipsis; /* ставим ... */}
.home .task-icon{
    display: none;}
.home .task-icon.active{
    display: block;
}
.home .task-icon
    svg{
    width: 17px;
    margin-top: 5px;
    fill: #e74c5c;
}
.home .task-check{
    width: 25px;
    height: 25px;
    border: 1px solid white;
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.task-item .is_active,
.task-item .task-icon,
.task-item .task-check {
    flex-shrink: 0;
}

.task-date {
    flex-shrink: 0;
    white-space: nowrap;
}

.footer-con{
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    width: 90%;
    box-sizing: border-box;
    z-index: 1000;
}

.home .targets-header
    h3{
    font-size: 23px;
}

.home .targets-header h3.sub-header{
    font-size: 15px;
}

.footer-con .links{
    display: flex;
    gap: 20px;
    border-radius: 10px;
    background: #1c2a53f0;
    padding: 10px;
    width: 100%;
    justify-content: space-between;
}
.footer-con > .link{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    width: 70px;
    background: linear-gradient(
83deg, #7ba0ff, #4177ff);
    border-radius: 10px;
    margin-left: 15px;
    padding: 8px;
}
.footer-con .links .link{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    width: 60px;
}
.footer-con .link
    svg{
    width: 23px;
    fill: #ffffffba;
}
.footer-con .link
    p{
    margin: 0;
    margin-top: 5px;
    font-size: 11px;
    color: #ffffffba;
}

.targets-header.analitics{
    margin-top: 70px;
}

.analitics-con{
    margin-bottom: 90px;}

.analitics-info{
    color: white;
}
.analitics-info
    button{
    margin-top: 10px;
}

#app.home .home-screen{
    padding-bottom: 120px;
}

.task-check
    svg{
    width: 15px;
    fill: #ffffff00;
    transition: .2s;
}
.task-check.active
    svg{fill: white;}

.tour-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
}
.tour-arrow {
    width: 0;
    height: 0;
}
.tour-message {
    text-align: left;
}

.tour-message
    p{
    margin: 0;
    margin-bottom: 5px;
}

.title-line{
    width: 100%;
    height: 1px;
    margin: 19px 0;
    background: linear-gradient(to right, transparent, #5e6e93, transparent);
}


.question-card-bg::before {
  content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 18px;
    padding: 2px; /* толщина градиента */
    background: linear-gradient(306deg, #ffffff6b -76%, #ffffff00 70%, #ffffff69 120%);
    -webkit-mask:
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude; /* для Firefox */
    pointer-events: none;
}

.question-card-bg {
    position: relative;
    margin: 16px 0;
    border-radius: 20px;
}

.targets-add-btn
    svg{
    width: 13px;
    fill: white;
    margin-right: 1px;
}

.tour-next{
    background: #5682ff;
    padding: 5px 10px;
    border-radius: 5px;
    border: none;
    color: white;
    margin-top: 1px;
}

.footer-con .links .link.active
    svg,
.footer-con .links .link.active p{
    color: white;
    fill: white;
}

.calendar-day.disabled {
    opacity: 0.3;
    pointer-events: none;
    cursor: default;
}

.modal-backdrop.habbits{
    background: none;
}

.modal-card.non-ready .modal-title{
    font-size: 18px;
    font-weight: 600;
}

#cancelReset{
    margin-bottom: 0 !important;}

.profile-pic-year .sheet-item{
    padding: 15px;
}

.profile-pic-day{
    padding: 0;
    overflow-y: auto;
    max-height: 60vh;
    background: white !important;
}

.profile-pic-month{
    max-height: 60vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.profile-pic-day .sheet-item{
    width: 20%;
    text-align: center;
};

.profile-pic-day{
    padding: 0;
    overflow-y: auto;
    max-height: 60vh;
    background: white !important;
}

.profile-pic-month{
    max-height: 60vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.profile-pic-day .sheet-item{
    width: 20%;
    text-align: center;
}

.birth-date-sheet{
    max-height: min(70vh, 520px);
    overflow: hidden;
    touch-action: none;
    overscroll-behavior: contain;
}

.birth-date-sheet .birth-date-scroll-list{
    display: block;
    height: min(56vh, 360px);
    max-height: min(56vh, 360px);
    overflow-y: scroll !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
    will-change: scroll-position;
}

.birth-date-sheet .profile-pic-month .sheet-item,
.birth-date-sheet .profile-pic-year .sheet-item{
    width: 100%;
    box-sizing: border-box;
}

.birth-date-sheet .sheet-item.active{
    background: #304b87;
    color: #ffffff;
    font-weight: 600;
}

.warning {
  border: 2px solid #ff3b30db !important;
  background: #ff000029 !important;
}

.warning-text {
  color: #ff3b30;
  font-size: 12px;
  margin-top: 4px;
  margin-right: auto;
  padding-left: 20px;
}

.modal-title.u-sure{
    text-align: center;
    margin-right: 0;
}

.filter-block{
    width: 100%;
    display: flex;
    gap: 14px;
    margin: 20px 0;
    margin-bottom: 0;
}

.filter-block .filter-btn:not(:last-child).active{
    color: #4378fe;
    border-bottom: 2px solid #4378fe;
}
.habits-switch .filter-btn.active{
    color: #4378fe;
    border-bottom: 2px solid #4378fe;
}
.filter-block .filter-btn{
    background: none;
    border: none;
    padding: 0;
    font-size: 12px;
    color: white;
    font-weight: 500;
}

.home-menu{
    width: 100%;
    display: flex;
    gap: 10px;
    margin-top: 0;
}

.home-menu .scenario-btn{
    width: 100%;
    display: flex;
    justify-content: center;
    background: none;
}
.home-menu .scenario-buttons{
    width: 100%;
}

.filter-btn.filter-icon{padding: 8px;background: #132752;border-radius: 10px;display: flex;align-items: center;justify-content: center;margin-left: auto;position: relative;}
.filter-btn.filter-icon svg{
    width: 19px;
    fill: #dddddd;
}

.target-extra{
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    margin-top: 10px;
}
.target-extra .tasks-block{
    width: 100%;
    display: flex;
}
.target-extra .tasks-block svg{
    width: 21px;
    fill: white;
    background: #028b70;
    border-radius: 3px;
    padding: 2px;
    margin-right: 10px;
}
.target-extra .tasks-block span{
    width: 100%;
    color: #d3d3d3;
    font-size: 14px;
}

.target-extra .deadline-days{
    margin-top: 10px;
    margin-bottom: 0;
    color: #ffb138;
    font-weight: 500;
    font-size: 13px;
}

.modal-backdrop.habbit{
    background: none;
}

.habits-list{
    flex-wrap: wrap;
}

.habits-list .task-item{
    width: 100%;
    margin-bottom: 0;
}

.targets-header.habits{
    margin-bottom: 27px;
}

textarea {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;

    overflow: hidden; /* скрываем все полосы прокрутки */
    resize: none;     /* убираем квадратик для изменения размера */

    white-space: pre-wrap;
    word-break: break-word;
    overflow-wrap: break-word;

    -webkit-appearance: none;
    border: none; /* убираем рамку, если она не нужна */
    outline: none; /* убираем выделение */
}

/* Дополнительно для WebKit (Chrome, Safari, Telegram WebApp на Chromium) */
textarea::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}

.action-bar .scenario-action-btn{
    box-shadow: none;
}

.home-menu-return-btn {
    width: 100%;
    height: 52px;
    padding: 0;
    border-radius: 10px;
    overflow: hidden;
    background: transparent;
}

.home-menu-return-btn svg {
    display: block;
    width: 100%;
    height: 52px;
}

.task-edit-modal .task-edit-control {
    width: 100%;
    border: none;
    border-radius: 14px;
    padding: 14px 18px;
    background: #111f43;
    color: #fff;
    font-size: 15px;
    outline: none;
}

.task-edit-modal .task-edit-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: -6px;
}

.task-edit-modal .task-edit-delete-btn {
    width: auto;
    margin: 0 auto;
    padding: 0;
    border: none;
    background: none;
    color: #e74c5c;
    font-size: 16px;
    font-weight: 600;
}

.task-edit-modal .task-edit-delete-btn svg {
    display: block;
    width: 100%;
    height: 52px;
}

.task-edit-modal .time-static-value {
    margin: -22px auto 30px 5px;
    padding-left: 0;
    color: #dce5ff;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
}

.task-edit-modal .task-edit-dirty-actions {
    display: none;
    flex-direction: column;
    gap: 10px;
}

.task-edit-modal .task-edit-save-cancel-btn {
    width: 100%;
    padding: 0;
    border: none;
    background: none;
}

.task-edit-modal .task-edit-save-cancel-btn svg {
    display: block;
    width: 100%;
    height: 112px;
}

.task-edit-modal .task-edit-actions[data-state="dirty"] .task-edit-delete-btn {
    display: none;
}

.task-edit-modal .task-edit-actions[data-state="dirty"] .task-edit-dirty-actions {
    display: flex;
}

.task-delete-confirm-card {
    width: calc(100% - 28px);
    max-width: 358px;
    border-radius: 20px;
    background: #ffffff;
    color: #06143a;
    padding: 20px 16px 24px;
    position: relative;
}

.task-delete-confirm-close {
    position: absolute;
    top: 14px;
    right: 14px;
    border: none;
    background: none;
    color: #06143a;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}

.task-delete-confirm-title {
    margin: 6px 0 10px;
    font-size: 22px;
    font-weight: 700;
    text-align: center;
}

.task-delete-confirm-text {
    margin: 0;
    text-align: center;
    font-size: 15px;
    line-height: 1.4;
}

.task-delete-confirm-title-line {
    display: block;
    width: 100%;
    height: 1px;
    margin: 0 auto 16px;
}

.task-delete-confirm-actions {
    margin-top: 22px;
}

.task-delete-confirm-primary {
    width: 100%;
    min-height: 52px;
    border: none;
    border-radius: 10px;
    background: linear-gradient(88deg, #7696ff 29%, #4177fe);
    color: #ffffff;
    font-size: 16px;
    font-weight: 600;
}

.task-delete-confirm-primary-svg {
    min-height: 0;
    padding: 0;
    background: none;
    border: none;
}

.target-cancel-confirm-modal {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.target-cancel-confirm-card {
    position: relative;
    width: min(362px, calc(100vw - 20px));
    margin: 0 auto;
    flex: 0 0 auto;
    z-index: 1;
}

.target-cancel-confirm-image {
    display: block;
    width: 100%;
    height: auto;
}

.target-cancel-confirm-close,
.target-cancel-confirm-cancel,
.target-cancel-confirm-force {
    position: absolute;
    border: none;
    background: transparent;
    color: transparent;
    font-size: 0;
    line-height: 0;
    text-indent: -9999px;
    overflow: hidden;
    white-space: nowrap;
    padding: 0;
    margin: 0;
    cursor: pointer;
}

.target-cancel-confirm-close {
    top: 18px;
    right: 16px;
    width: 28px;
    height: 28px;
}

.target-cancel-confirm-cancel {
    left: 16px;
    right: 16px;
    top: 140px;
    height: 52px;
}

.target-cancel-confirm-force {
    left: 92px;
    right: 92px;
    top: 210px;
    height: 26px;
}

.task-delete-confirm-primary-svg svg {
    display: block;
    width: 100%;
    height: auto;
}

.task-delete-confirm-danger {
    width: 100%;
    border: none;
    background: none;
    color: #e74c5c;
    font-size: 16px;
    font-weight: 600;
    margin-top: 12px;
}

.filter-btn.selected::before {
    content: '';
    position: absolute;
    top: 8px;
    right: 7px;
    display: block;
    width: 8px;
    height: 8px;
    background: #e74c5c;
    border-radius: 50%;
}

#goalsFilterSheet .sheet-item{
    padding: 0;
    padding-top: 12px;
}

#goalsFilterList{
    display: flex;
    flex-wrap: wrap;
}

#goalsFilterList .category-item{
    width: 100%;
    padding: 15px 20px;
    border-bottom: 2px solid #e7e7e7;
    border-radius: 0;
}

.target-modal .modal-card {
  padding: 16px;
  border-radius: 16px;
  background: none;
}

.target-modal .header {
  display: flex;
  gap: 16px;
  width: 90%;
  margin-bottom: 30px;
  align-items: center;
}

.target-modal .data {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.target-modal .row {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  width: 100%;
  margin-bottom: 10px;
}

.target-modal .label {
  color: #c1c1c1;
  font-size: 16px;
  font-weight: 600;
  width: 50%;
}

.target-modal .modal-buttons {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 auto;
  margin-top: 110px;
}

.target-modal .danger-btn {
  width: 100%;
}

.target-modat-open .modal-backdrop{
    background: none;
}

.target-modal .value{
    width: 45%;
    color: lightgray;
}

.target-modat-open .modal-card{
    padding: 0;
    justify-content: start;
    top: 20px;
    transform: translateY(0);
    transform: translateX(-50%);
}

.target-modal .title-row .label{
    font-size: 23px !important;
    margin-bottom: 20px;
    color: white;
}

.target-modal .target-modal-title-text{
    display: block;
    width: 100%;
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.target-modat-open .header *{
    margin: 0;
    height: max-content;
    font-size: 24px;
}
.target-modat-open .header .category{
    padding: 3px 5px;
    border-radius: 5px;
    font-size: 13px;
}

.target-modat-open .close-btn{
    background: none;
    border: none;
    font-size: 18px;
    position: absolute;
    top: 0;
    right: 0;
}

.target-modat-open .header-actions{
    display: flex;
    align-items: center;
}

.row.bright .label{
    color: white;
}

.row.bright .value{
    color: white;
}

.target-modat-open{
    align-items: start;
}

.target-modat-open .delete-btn{
    color: #ff6b6b;
    font-size: 16px;
    font-weight: 500;
}

.cancel-btn.delete-btn{
    color: #df2828;
    font-size: 16px;
    font-weight: 500;
}

.target-modat-open .finish-btn{
    font-size: 16px;
    box-shadow: none;
    margin-bottom: 40px;
}

.empty-targets .title{
    font-weight: 500;
}
.empty-targets .text{
    margin-bottom: 20px;
}

.target-modal-open .modal-card .close-btn{
    position: absolute;
    top: 10px;
    right: 10px;
    background: none;
    border: none;
    font-size: 18px;
}

.target-modal-open .modal-card .title{
    margin: 0;
    margin-bottom: 15px;
    text-align: start;
    margin-right: auto;
    width: 90%;
    font-size: 20px;
    margin-top: -5px;
}

.target-modal-open .modal-card .row .label{
    width: 44%;
}
.target-modal-open .modal-card .row .value{
    width: 50%;
    color: grey;
}
.target-modal-open .modal-card .row{
    width: 100%;
    flex-wrap: nowrap;
    display: flex;
    justify-content: start;
    margin-bottom: 15px;
}

.modal-actions.modal-days button{
    width: 100%;
}
.modal-actions.modal-days{
    flex-wrap: wrap;
}

.target-modal-open .modal-card .txt{
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 2px solid #e3e3e3;
    width: 100%;
}

.target-modal-open .modal-card.info-modal-card .title{
    width: 100%;
    margin-right: 0;
    text-align: center;
    margin-bottom: 10px;
}

.target-modal-open .modal-card.info-modal-card .info-modal-line{
    display: block;
    width: 100%;
    max-width: 330px;
    margin: 0 auto 14px;
}

.target-modal-open .modal-card.info-modal-card .text{
    display: flex;
    justify-content: flex-start;
}

.target-modal-open .modal-card.info-modal-card .txt{
    border-bottom: none;
    margin-bottom: 20px;
    padding-bottom: 0;
    text-align: left;
    white-space: pre-line;
}

.modal-card-full .text{
    width: 100%;
}

.open-filter{
    margin-left: auto !important;
}

.filter-icon.calendar{margin-left: -7px;}

.home-screen .ai-idea-item{
    margin-bottom: 15px;
}

.coach-screen{
    padding-bottom: 190px !important;
    overflow-y: auto !important;
}

.coach-card{
    margin-bottom: 16px;
}

.coach-screen .targets-block:first-of-type{
    height: auto !important;
    min-height: max-content;
}

.coach-screen .skip-chat-btn,
.coach-setup-screen .skip-chat-btn{
    background: none;
    border: none;
    box-shadow: none;
    color: #4378fe;
    padding: 0;
    font-size: 14px;
    font-weight: 600;
    display: block;
    margin: 0 auto;
    text-align: center;
}

.coach-screen .analitics-info{
    font-size: 13px;
    line-height: 1.35;
}

.coach-screen .analitics-info p{
    margin: 8px 0;
}

.coach-screen .coach-points{
    margin: 6px 0 10px 0;
    padding-left: 16px;
    list-style-type: disc;
}

.coach-screen .coach-points li{
    margin: 4px 0;
}

.coach-screen .coach-points li::marker{
    font-size: 0.6em;
}

.coach-setup-screen{
    padding-bottom: 190px !important;
}

.coach-setup-screen .targets-block:first-of-type{
    height: auto !important;
}

.coach-setup-card{
    margin-top: 20px;
}

.coach-levels-row{
    display: flex;
    gap: 10px;
    margin-top: 16px;
}

.coach-level-item{
    width: calc((100% - 20px) / 3);
    min-height: 120px;
    border-radius: 12px;
    border: 1px solid #ffffff3b;
    background: #1d2f5a7d;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    color: white;
    text-align: center;
}

.coach-level-item.active{
    border-color: #4378fe;
    background: #2a3f74;
    box-shadow: inset 0 0 0 1px #4378fe;
}

.coach-level-avatar{
    width: 40px;
    height: 40px;
}

.coach-level-avatar svg{
    width: 100%;
    fill: #ffffffd6;
}

.coach-level-avatar img{
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.coach-level-item p{
    margin: 0;
    font-size: 12px;
    text-align: center;
}

.coach-level-description{
    margin-top: 18px;
    color: #ffffff;
    font-size: 13px;
    line-height: 1.35;
}

.coach-level-description h3{
    margin: 0 0 8px 0;
    font-size: 14px;
    font-weight: 600;
}

.coach-level-description ul{
    margin: 0 0 10px 0;
    padding-left: 16px;
}

.coach-level-description li{
    margin: 4px 0;
}

.coach-level-description li::marker{
    font-size: 0.6em;
}

.coach-level-description p{
    margin: 0;
    color: #d7e3ff;
}

.coach-expertise-row{
    display: flex;
    gap: 8px;
    margin-top: 10px;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 4px;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.coach-expertise-row::-webkit-scrollbar{
    display: none;
}

.coach-expertise-item{
    min-width: max-content;
    width: auto;
    min-height: 32px;
    border-radius: 10px;
    border: 1px solid #ffffff3b;
    background: #1d2f5a7d;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #ffffff;
    flex: 0 0 auto;
    padding: 0 12px;
}

.coach-expertise-item.active{
    border-color: #4378fe;
    background: #2a3f74;
    box-shadow: inset 0 0 0 1px #4378fe;
}

.coach-expertise-avatar{
    width: 24px;
    height: 24px;
}

.coach-expertise-avatar svg{
    width: 100%;
    fill: #ffffffd6;
}

.coach-expertise-item p{
    margin: 0;
    font-size: 10px;
    text-align: center;
    line-height: 1.2;
    padding: 0;
    white-space: nowrap;
}

.coach-expertise-description{
    margin-top: 10px;
}

.coach-expertise-description p{
    margin: 0;
    color: #d7e3ff;
    font-size: 12px;
    line-height: 1.35;
}

.coach-chat-screen{
    padding-bottom: 110px !important;
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow: hidden;
}

.coach-chat-top{
    width: 100%;
    border-radius: 10px;
    background: #1c2a53f0;
    padding: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.coach-chat-top-left{
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 130px;
}

.coach-chat-logo{
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: linear-gradient(83deg, #7ba0ff, #4177ff);
    flex: 0 0 auto;
}

.coach-chat-top-left p{
    margin: 0;
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
}

.coach-chat-top-right{
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-end;
}

.coach-chat-top-right p{
    margin: 0;
    color: #ffffffd9;
    font-size: 11px;
    text-align: right;
}

.coach-chat-top-right p span{
    color: #ffffffa3;
    margin-right: 6px;
}

.coach-chat-inputbar{
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    border-radius: 10px;
    background: #1c2a53f0;
    padding: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 1000;
}

.home-habits-bottom-cta{
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(100% + 6px);
    display: flex;
    justify-content: center;
    pointer-events: auto;
    cursor: pointer;
}

.home-habits-bottom-cta svg{
    width: 100%;
    max-width: 357px;
    height: auto;
    display: block;
}

.coach-chat-input{
    flex: 1;
    background: #243764;
    border: 1px solid #35528f;
    border-radius: 10px;
    color: #ffffff;
    font-size: 13px;
    padding: 11px 12px;
    outline: none;
}

.coach-chat-input::placeholder{
    color: #ffffff99;
}

.coach-chat-messages{
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-right: 2px;
}

.coach-chat-message-row{
    width: 100%;
    display: flex;
}

.coach-chat-date-row{
    width: 100%;
    display: flex;
    justify-content: center;
    margin: 4px 0 2px;
}

.coach-chat-date-chip{
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    color: #223463;
    background: rgba(255, 255, 255, 0.7);
}

.coach-chat-message-row.coach{
    justify-content: flex-start;
}

.coach-chat-message-row.user{
    justify-content: flex-end;
}

.coach-chat-bubble{
    max-width: 82%;
    border-radius: 14px;
    padding: 10px 12px 22px;
    position: relative;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
}

.coach-chat-bubble p{
    margin: 0;
    font-size: 13px;
    line-height: 1.35;
    word-break: break-word;
}

.coach-chat-bubble span{
    position: absolute;
    right: 10px;
    bottom: 6px;
    font-size: 10px;
    line-height: 1;
}

.coach-chat-bubble.coach{
    background: #ffffff;
}

.coach-chat-bubble.coach p{
    color: #1e2a4a;
}

.coach-chat-bubble.coach span{
    color: #64708d;
}

.coach-chat-bubble.user{
    background: linear-gradient(83deg, #7ba0ff, #4177ff);
}

.coach-chat-bubble.user p{
    color: #ffffff;
}

.coach-chat-bubble.user span{
    color: #ffffffd6;
}

.coach-chat-action-row{
    display: flex;
    justify-content: flex-start;
    margin-top: 2px;
}

.coach-chat-action-btn{
    border: none;
    border-radius: 12px;
    background: linear-gradient(83deg, #7ba0ff, #4177ff);
    color: #ffffff;
    font-size: 12px;
    font-weight: 600;
    padding: 10px 14px;
}

.coach-goal-offer-card{
    margin-top: 8px;
    background: #ffffff;
    border-radius: 14px;
    padding: 12px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
}

.coach-task-offer-card{
    margin-top: 8px;
    background: #ffffff;
    border-radius: 14px;
    padding: 12px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
}

.coach-habit-offer-card{
    margin-top: 8px;
    background: #ffffff;
    border-radius: 14px;
    padding: 12px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
}

.coach-task-offer-line{
    margin: 0 0 6px;
    color: #1e2a4a;
    font-size: 12px;
    line-height: 1.35;
}

.coach-goal-offer-line{
    margin: 0 0 6px;
    color: #1e2a4a;
    font-size: 12px;
    line-height: 1.35;
}

.coach-habit-offer-line{
    margin: 0 0 6px;
    color: #1e2a4a;
    font-size: 12px;
    line-height: 1.35;
}

.coach-task-offer-line:last-of-type{
    margin-bottom: 10px;
}

.coach-goal-offer-line:last-of-type{
    margin-bottom: 10px;
}

.coach-habit-offer-line:last-of-type{
    margin-bottom: 10px;
}

.coach-task-create-btn{
    width: 100%;
}

.coach-goal-create-btn{
    width: 100%;
}

.coach-habit-create-btn{
    width: 100%;
}

.coach-task-create-btn:disabled{
    opacity: .5;
}

.coach-goal-create-btn:disabled{
    opacity: .5;
}

.coach-habit-create-btn:disabled{
    opacity: .5;
}

.coach-created-card{
    padding-top: 18px;
}

.coach-created-header{
    margin: 0;
    text-align: center;
    font-size: 22px;
    font-weight: 700;
}

.coach-created-divider{
    width: 100%;
    height: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.42);
    margin: 12px 0 10px;
}

.coach-created-name{
    margin: 0;
    text-align: center;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
}

.coach-task-created-title{
    margin-top: 0;
}

.coach-target-created-title{
    margin-top: 0;
}

.coach-habit-created-title{
    margin-top: 0;
}

.coach-task-created-actions{
    display: flex !important;
    flex-direction: row !important;
    gap: 10px;
    margin-top: 14px;
    align-items: center;
    width: 100%;
}

.coach-target-created-actions{
    display: flex !important;
    flex-direction: row !important;
    gap: 10px;
    margin-top: 14px;
    align-items: center;
    width: 100%;
}

.coach-habit-created-actions{
    display: flex !important;
    flex-direction: row !important;
    gap: 10px;
    margin-top: 14px;
    align-items: center;
    width: 100%;
}

.coach-primary-btn{
    width: auto;
    flex: 1 1 0;
    height: 40px;
    border: none;
    border-radius: 12px;
    background: linear-gradient(83deg, #7ba0ff, #4177ff);
    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
    padding: 0 10px;
    white-space: nowrap;
}

.coach-secondary-btn{
    width: auto;
    flex: 1 1 0;
    height: 34px;
    border: none;
    border-radius: 0;
    background: transparent;
    color: #4177ff;
    font-size: 13px;
    font-weight: 600;
    padding: 0 6px;
    box-shadow: none;
    white-space: nowrap;
}

.coach-chat-typing-bubble{
    padding: 4px 0;
    min-width: auto;
    background: transparent !important;
    box-shadow: none;
    border: none;
}

.coach-typing-dots{
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.coach-typing-dots span{
    position: static;
    right: auto;
    bottom: auto;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #5c6f96;
    animation: coachTypingPulse 1.1s infinite ease-in-out;
}

.coach-typing-dots span:nth-child(2){
    animation-delay: 0.18s;
}

.coach-typing-dots span:nth-child(3){
    animation-delay: 0.36s;
}

@keyframes coachTypingPulse{
    0%, 80%, 100%{
        opacity: .3;
        transform: translateY(0);
    }
    40%{
        opacity: 1;
        transform: translateY(-2px);
    }
}

.coach-chat-send-btn{
    background: linear-gradient(83deg, #7ba0ff, #4177ff);
    border: none;
    border-radius: 50%;
    color: #ffffff;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 0 0 auto;
    transition: opacity .2s ease;
}

.coach-chat-send-btn svg{
    width: 18px;
    height: 18px;
    fill: #ffffff;
}

.coach-chat-send-btn:disabled{
    opacity: .45;
    cursor: not-allowed;
}

.coach-message-menu-overlay{
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: opacity 0.18s ease;
    z-index: 1200;
}

.coach-message-menu-overlay.is-visible{
    opacity: 1;
}

.coach-message-menu{
    position: absolute;
    inset: 0;
    z-index: 1201;
}

.coach-message-menu-card{
    position: absolute;
    width: 220px;
    background: #ffffff;
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    display: flex;
    flex-direction: column;
    opacity: 0;
    transform: scale(0.95);
    transition: opacity 0.18s ease, transform 0.18s ease;
    overflow: hidden;
}

.coach-message-menu-card.is-visible{
    opacity: 1;
    transform: scale(1);
}

.coach-message-menu-btn{
    width: 100%;
    border: none;
    background: #ffffff;
    color: #1e2a4a;
    font-size: 15px;
    font-weight: 500;
    padding: 14px 16px;
    text-align: left;
    cursor: pointer;
}

.coach-message-menu-btn:not(:last-child){
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.coach-message-menu-btn:hover{
    background: rgba(0, 0, 0, 0.05);
}

.coach-message-menu-btn:active{
    background: rgba(0, 0, 0, 0.08);
}

.targets-block.glass-card .tasks-section:first-of-type .task-check{
    background: #ffac15;
    border: #ffac15;
}

.home .task-item.active .task-name{
    text-decoration: line-through;
}

.home .task-item .is_active{
    background: var(--task-priority, #ffac15) !important;
}

.home .task-item .task-check{
    border-color: var(--task-priority, #ffac15) !important;
}

.home .task-item.active .task-check{
    background: var(--task-priority, #ffac15) !important;
    border-color: var(--task-priority, #ffac15) !important;
}

.home .task-item:not(.active) .task-check{
    background: transparent !important;
}

.category-item svg{
    width: 23px;
}

.filter-row{
    width: 100%;
}
.filter-row .category-item{
display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

#goalsFilterList .category-item:last-of-type{
    border: none;
}

.modal-card.calendar{
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background: none;
    margin-bottom: 150px;
}

.calendar-modal{
    width: 100%;
}
.calendar-modal{
    height: 100vh;
}
.calendar-modal *{
    color: white;
}
.calendar-modal .title{
    color: white;
    margin-bottom: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.calendar-modal .sub-title{
    margin-top: 40px;
}
.calendar-modal{
    height: max-content;
    overflow: scroll;
    margin-bottom: 50px;
}

.calendar-day.have_day{}

.calendar-modal .calendar-day{
    padding: 9px;
}
.calendar-modal .calendar{
    background: #25396b8a;
    border-radius: 25px;
}

.calendar .action-bar{
    margin-bottom: 50px;
    margin-top: 30px;
}

.home > .screen > .calendar{
    height: 100vh;
    overflow: scroll;
}

.calendar-modal .calendar-day{
  position: relative;
  text-align: center;
  padding: 9px 0;
  cursor: pointer;
}

.calendar-modal .calendar-day.have_day::after {
  content: '';
  position: absolute;
  bottom: 3px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  background-color: #e23b3b;
  border-radius: 50%;
}

.calendar-modal .title svg{
    width: 23px;
    fill: white;
}
.tasks-title{
    font-size: 16px;
    font-weight: 500;
}


.regime .question-icon{
    width: 100%;
    display: flex;
    justify-content: center;
    margin-bottom: 19px;
    margin-top: 0px;
}

.regime .question-card-bg .title{
    color: white;
    margin-top: 0;
    font-size: 20px;
    font-weight: 600;
}
.regime .question-card-bg .text{
    color: white;
    margin-bottom: 3px;
    font-size: 13px;
}
.regime .time-wheel{
    width: 100%;
    color: white;
}

.regime .primary-btn{position: fixed;bottom: 30px;left: 50%;width: 90%;transform: translateX(-50%);}

.regime .weekday-num{margin-top: 8px;}

.regime .weekday-num.active{margin-top: 0px;width: 35px;}
.regime .weekday{width: 35px;display: flex;justify-content: center;}

.regime .regime-topline h3{
    color: #ffffff;
}

.regime .progress.progress-segmented{
    width: 100%;
    gap: 10px;
    margin: 0 auto 30px;
}

.regime .progress-pass{
    flex: 1;
    height: 4px;
    border-radius: 10px;
    background: #263860;
}

.regime .progress-pass.active{
    background: #1D4AC8;
}

#progress{
    display: flex;
    gap: 10px;
    background: none;
    height: 4px;
    margin-bottom: 30px;
}
.progress-item{
    border-radius: 10px;
    background: #263860;
    width: 24%;
    height: 4px;
}
.progress-item.active{
    background: #1D4AC8;
}

.answers.emoji{
    display: flex;
    justify-content: space-between;
}
.answers.emoji .answer-btn{
    background: none;
    border: none;
    color: white;
    padding: 10px;
    transition: .3s;
    border-radius: 10px;
    border: 1px solid #2f416b00;
}

.text.emoji{
    color: white;
    margin-top: 5px;
    margin-bottom: 20px;
}

.daily-header-wrap{
    width: 100%;
}

.daily-topline{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    width:100%;
    height:24px;
    margin-top:-18px;
    margin-bottom:14px;
}

.daily-topline h3{
    display:flex;
    align-items:center;
    justify-content:center;
    flex:1;
    height:24px;
    margin:0;
    color:#ffffff;
    text-align:center;
    font-size:15px;
    font-weight:500;
    line-height:24px;
}

.daily-back-btn{
    display:flex;
    align-items:center;
    justify-content:center;
    flex:0 0 24px;
    width:24px;
    height:24px;
    padding:0;
    border:0;
    background:transparent;
    line-height:0;
}

.daily-topline-spacer{
    display:block;
    flex:0 0 24px;
    width:24px;
    height:24px;
}

.daily-header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: white;
    margin-bottom: 20px;
}

.daily-header .time-of-day{
    font-size: 25px;
    font-weight: 500;
    display: flex;
    gap: 15px;
    margin-top: 0;
    margin-bottom: 0;
    align-items: center;
}

.daily-header .date{
    font-size: 12px;
    line-height: 1.2;
}

.footer-routine{
    position: fixed;
    width: 90%;
    max-width: 362px;
    left: 50%;
    transform: translateX(-50%);
    bottom: 30px;
    z-index: 5;
}

.user-profile-screen {
  align-items: flex-start;
  padding-top: 16px;
  padding-bottom: 180px;
  overflow-y: auto;
  max-height: calc(100vh - 84px);
}

.user-profile-title {
  width: 100%;
  display: flex;
  justify-content: flex-start;
}

.user-profile-title svg {
  max-width: 100%;
  height: auto;
}

.account-title {
  width: 100%;
  text-align: left;
  color: #ffffff;
  font-size: 36px;
  font-weight: 700;
  line-height: 1.1;
}

.profile-settings-title {
  width: 52%;
  text-align: left;
  color: #ffffff;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.05;
}

.profile-day-rutine-title {
  width: 70%;
  text-align: left;
  color: #ffffff;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.05;
  white-space: nowrap;
}

.profile-raports-head {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  margin-bottom: 8px;
}

.profile-raports-topline {
  position: relative;
  z-index: 2;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
}

.profile-raports-back-btn {
  position: absolute;
  z-index: 3;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.profile-raports-subline {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
}

.profile-raports-title {
  width: auto;
  max-width: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.05;
  white-space: nowrap;
}

.profile-raports-title svg {
  flex: 0 0 22px;
  display: block;
}

.productivity-title {
  font-size: 16px;
  line-height: 22px;
  font-weight: 500;
}

.productivity-lead {
  margin: 14px 0 0;
  color: #ffffff;
  font-size: 16px;
  line-height: 22px;
  font-weight: 400;
  text-align: left;
}

.productivity-result-wrap {
  position: relative;
  width: 100%;
  margin-top: 18px;
}

.productivity-result-img {
  display: block;
  width: 100%;
  height: auto;
}

.productivity-result-value {
  position: absolute;
  top: 49%;
  height: 30%;
  z-index: 2;
  display: flex;
  align-items: center;
  color: #ffffff;
  font-size: 18px;
  line-height: 22px;
  font-weight: 700;
  white-space: nowrap;
  pointer-events: none;
}

.productivity-result-value-current {
  left: 14.4%;
  width: 31%;
}

.productivity-result-value-record {
  left: 67.4%;
  width: 27.6%;
}

.productivity-calendar-wrap {
  position: relative;
  display: block;
  width: 100%;
  margin-top: 18px;
}

.productivity-calendar-img {
  display: block;
  width: 100%;
  height: auto;
}

.productivity-calendar-month,
.productivity-calendar-year,
.productivity-calendar-weekdays,
.productivity-calendar-grid {
  position: absolute;
  z-index: 1;
}

.productivity-calendar-month {
  top: 6.5%;
  left: 30%;
  right: 30%;
  color: #ffffff;
  font-size: 14px;
  line-height: 18px;
  font-weight: 700;
  text-align: center;
}

.productivity-calendar-year {
  top: 6.2%;
  right: 4.7%;
  color: #ffffff;
  font-size: 14px;
  line-height: 18px;
  font-weight: 700;
  text-align: right;
  white-space: nowrap;
}

.productivity-calendar-weekdays {
  top: 19.4%;
  left: 5.6%;
  right: 5.6%;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  align-items: center;
  color: #5588fc;
  font-size: 13px;
  line-height: 18px;
  font-weight: 700;
  text-align: center;
}

.productivity-calendar-grid {
  top: 32.1%;
  left: 5.6%;
  right: 5.6%;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  grid-auto-rows: 37px;
  align-items: center;
  color: #ffffff;
  font-size: 14px;
  line-height: 18px;
  font-weight: 700;
  text-align: center;
}

.productivity-calendar-day {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}

.productivity-calendar-day.is-empty {
  visibility: hidden;
}

.productivity-calendar-day.is-muted {
  color: rgba(255, 255, 255, 0.1);
}

.day-result-screen {
  min-height: 100%;
  position: relative;
  padding-bottom: 122px;
}

.day-result-content {
  min-height: calc(100vh - 220px);
}

.day-result-frame {
  position: relative;
  width: 100%;
  min-height: 320px;
  margin-top: 12px;
  padding: 18px 18px 18px 18px;
  box-sizing: border-box;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.22);
  overflow: hidden;
}

.day-result-frame-bg {
  display: none;
}

.day-result-frame-content {
  position: relative;
  z-index: 1;
  min-height: 284px;
}

.day-result-frame-copy {
  position: relative;
  z-index: 2;
  width: 52%;
  max-width: 210px;
}

.day-result-frame-title {
  color: #ffffff;
  font-size: 20px;
  font-weight: 600;
  line-height: 26px;
  text-align: left;
  margin: 0;
}

.day-result-frame-text {
  color: #ffffff;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.42;
  text-align: left;
  margin: 18px 0 0;
  max-width: none;
}

.day-result-frame-visual {
  position: absolute;
  right: 10px;
  bottom: 0;
  top: 6px;
  width: 46%;
  max-width: 178px;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  z-index: 1;
  pointer-events: none;
}

.day-result-lion-image {
  display: block;
  width: 100%;
  height: auto;
  max-width: 178px;
  max-height: none;
  object-fit: contain;
  margin: 0;
}

.day-result-note {
  margin-top: 16px;
  color: #ffffff;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.45;
  text-align: left;
  max-width: 330px;
}

.day-result-footer {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  width: calc(100% - 32px);
  max-width: 362px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  z-index: 10;
}

.day-result-coach-btn,
.day-result-home-btn {
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  display: block;
}

.day-result-coach-btn {
  width: 100%;
  height: 52px;
  line-height: 1;
  border-radius: 10px;
  background: linear-gradient(90deg, #799cff 0%, #4177ff 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.day-result-coach-btn-label {
  color: #ffffff;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  text-align: center;
}

.day-result-home-btn {
  line-height: 0;
}

.day-result-home-btn svg {
  display: block;
}

.profile-raports-reminder-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  flex: 0 0 auto;
}

.profile-raports-date {
  flex: 0 0 auto;
  color: rgba(255, 255, 255, 0.95);
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
  text-align: left;
  white-space: nowrap;
}

.raport-week-period {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  color: #ffffff;
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
}

.raport-week-period svg {
  flex: 0 0 18px;
  display: block;
}

.raport-week-summary-frame {
  width: 100%;
  min-height: 196px;
  margin-top: 18px;
  padding-bottom: 14px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 20px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.04) 100%),
    rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(30px);
  position: relative;
  overflow: visible;
}

.raport-week-summary-frame.is-month-expanded {
  width: 100%;
  min-height: 312px;
  overflow: visible;
}

.raport-week-summary-head {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 20px 16px 0;
  color: #ffffff;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
}

.raport-week-summary-info-btn {
  flex: 0 0 14px;
  width: 14px;
  height: 14px;
  padding: 0;
  border: 0;
  background: transparent;
  line-height: 0;
  cursor: pointer;
}

.raport-week-summary-info-anchor {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.raport-week-summary-info-btn svg {
  display: block;
}

.raport-week-summary-info-popover {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  width: 181px;
  transform: translateX(-23px);
  z-index: 3;
}

.raport-week-summary-info-popover[hidden] {
  display: none;
}

.raport-week-summary-info-popover img {
  width: 100%;
  height: auto;
  display: block;
}

.raport-week-summary-days {
  position: relative;
  z-index: 2;
  width: min(326px, calc(100% - 28px));
  margin-top: 30px;
  margin-left: auto;
  margin-right: auto;
  padding: 0;
}

.raport-week-summary-days img {
  width: 100%;
  height: auto;
  display: block;
}

.raport-week-summary-frame.is-month-expanded .raport-week-summary-days {
  display: block;
  width: min(326px, calc(100% - 28px));
  margin-top: 16px;
}

.raport-week-summary-frame.is-month-expanded .raport-week-summary-days.is-month-weekdays {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  align-items: center;
  justify-items: center;
  gap: 0;
  min-height: 20px;
  color: rgba(85, 136, 252, 0.9);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
}

.raport-week-summary-frame.is-month-expanded .raport-week-summary-days.is-month-weekdays span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.raport-week-summary-frame.is-month-expanded .raport-week-summary-days.is-month-weekdays img {
  display: none;
}

.raport-week-summary-dates {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0;
  width: min(326px, calc(100% - 28px));
  margin-top: 6px;
  margin-left: auto;
  margin-right: auto;
  padding: 0;
}

.raport-week-summary-frame.is-month-expanded .raport-week-summary-dates {
  position: relative;
  width: min(326px, calc(100% - 28px));
  margin-top: 14px;
  margin-left: auto;
  margin-right: auto;
  row-gap: 10px;
  padding-bottom: 12px;
}

.raport-week-summary-date {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  margin: 0 auto;
  color: #ffffff;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  border-radius: 20px;
}

.raport-week-summary-frame.is-month-expanded .raport-week-summary-date {
  width: 36px;
  height: 36px;
  font-size: 12px;
  font-weight: 600;
}

.raport-week-summary-frame.is-month-expanded .raport-week-summary-date:not(.is-active) {
  color: rgba(255, 255, 255, 0.78);
}

.raport-week-summary-date.is-active {
  background: #4177FF;
}

.raport-week-summary-action {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  margin: 10px auto 14px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.raport-week-summary-action[hidden] {
  display: none;
}

.raport-week-summary-action svg {
  display: block;
}

.raport-week-summary-frame.is-month-expanded .raport-week-summary-action {
  position: relative;
  left: auto;
  bottom: auto;
  margin: 2px auto 3px;
  transform: none;
}

.raport-week-summary-action.is-text {
  color: rgba(255, 255, 255, 0.45);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
}

.raport-week-summary-frame::after {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  top: 55px;
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.45) 48%, rgba(255, 255, 255, 0.05) 100%);
}

.raport-week-summary-frame.is-month-expanded::after {
  display: block;
}

.profile-raports-frame {
  width: 100%;
  margin-top: 6px;
}

.profile-raports-card {
  width: 100%;
  display: block;
  padding: 10px 16px 15px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 20px;
  background:
    linear-gradient(133deg, rgba(38, 74, 159, 0.58) 0%, rgba(19, 31, 67, 0.78) 48%, rgba(56, 29, 129, 0.62) 100%),
    rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(30px);
  text-align: left;
  cursor: pointer;
}

.profile-raports-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.profile-raports-card-title {
  color: #ffffff;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.2;
}

.profile-raports-card-arrow {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.profile-raports-card-arrow svg {
  display: block;
}

.profile-raports-card-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.profile-raports-card-meta {
  min-width: 0;
}

.profile-raports-card-divider {
  width: 100%;
  height: 1px;
  margin-top: 10px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.32) 48%, rgba(255, 255, 255, 0.06) 100%);
}

.profile-raports-card-period {
  margin-top: 12px;
  color: #ffffff;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.2;
}

.profile-raports-card-published {
  margin-top: 6px;
  color: rgba(255, 255, 255, 0.58);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.2;
}

.raports-reminder-modal {
  position: fixed;
  inset: 0;
  z-index: 1300;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.raports-reminder-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(3, 10, 28, 0.34);
}

.raports-reminder-sheet {
  position: relative;
  z-index: 1;
  width: min(100vw, 390px);
}

.raports-reminder-sheet img {
  width: 100%;
  height: auto;
  display: block;
}

.profile-task-popup {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.profile-task-popup-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(0, 0, 0, 0.5);
}

.profile-task-popup-card {
  position: relative;
  width: min(98vw, 730px);
  border-radius: 36px 36px 0 0;
  overflow: hidden;
  background: #f7f8fa;
  margin-bottom: 0;
  z-index: 1;
}

.profile-task-popup-title {
  min-height: 58px;
  padding: 16px 22px 10px;
  color: #14244d;
  font-size: 15px;
  line-height: 1.25;
  font-weight: 700;
}

.profile-task-popup-options {
  position: relative;
  border-top: 1px solid #d3e4ff;
  border-bottom: 1px solid #d3e4ff;
}

.profile-task-popup-row {
  position: relative;
  display: block;
  width: 100%;
  min-height: 54px;
  padding: 10px 60px 10px 22px;
  border: none;
  background: transparent;
  cursor: pointer;
  text-align: left;
  color: #1a2b57;
  font-size: 14px;
  line-height: 1.25;
  transition: background-color .18s ease;
}

.profile-task-popup-row + .profile-task-popup-row {
  border-top: 1px solid #d3e4ff;
}

.profile-task-popup-row span {
  pointer-events: none;
}

.profile-task-popup-indicator {
  position: absolute;
  right: 24px;
  top: 27px;
  width: 17px;
  height: 17px;
  transform: translateY(-50%);
  border-radius: 50%;
  border: 1.5px solid #5588FC;
  box-sizing: border-box;
  transition: top .18s ease;
}

.profile-task-popup-indicator::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 7px;
  height: 7px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: #4a78f2;
  opacity: 1;
}

.profile-task-popup-handle {
  width: 150px;
  height: 7px;
  border-radius: 4px;
  background: #000000;
  margin: 8px auto 8px;
}

.profile-task-popup[data-task-choice="top"] .profile-task-popup-row[data-task-toggle="top"] {
  background: #eaf4ff;
}

.profile-task-popup[data-task-choice="bottom"] .profile-task-popup-row[data-task-toggle="bottom"] {
  background: #eaf4ff;
}

.profile-task-popup[data-task-choice="bottom"] .profile-task-popup-indicator {
  top: 81px;
}

.account-avatar {
  margin-top: 14px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  overflow: hidden;
  background: #0F2D81;
}

.account-avatar-wrap {
  width: 60px;
  margin: 14px auto 0;
  position: relative;
}

.account-avatar-wrap .account-avatar {
  margin-top: 0;
}

.account-avatar img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.account-avatar-edit-btn {
  position: absolute;
  left: calc(50% - 3px);
  bottom: -8px;
  transform: translateX(-50%);
  width: 24px;
  height: 24px;
  border: 0;
  padding: 0;
  background: transparent;
  line-height: 0;
  cursor: pointer;
}

.account-avatar-input {
  display: none;
}

.account-form {
  margin-top: 22px;
  width: 100%;
  position: relative;
}

.account-form > img {
  width: 100%;
  height: auto;
  display: block;
}

.account-form-overlay {
  position: absolute;
  inset: 0;
}

.account-form-value {
  position: absolute;
  left: 4.5%;
  right: 4.5%;
  width: auto;
  height: 7.26%;
  color: #ffffff;
  font-size: 16px;
  line-height: 1.2;
  display: flex;
  align-items: center;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  pointer-events: auto;
  cursor: text;
  border-radius: 9px;
  padding: 0 10px;
  box-sizing: border-box;
  border: 2px solid transparent;
  outline: none;
  transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.account-form-value:focus {
  background: rgba(255, 255, 255, 0.10);
  border-color: #ffffff;
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12) inset;
}

.account-screen .question-footer {
  width: 100%;
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.account-screen .question-footer #btnNext {
  margin: 12px auto 0 !important;
  display: block;
  position: static !important;
  background: none;
  border: none;
  color: rgb(125 140 179 / 85%);
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 0 !important;
  cursor: pointer;
  padding: 8px 16px;
  border-radius: 12px;
  transition:
    transform 0.15s ease,
    opacity 0.15s ease,
    background-color 0.15s ease;
}

.account-screen .question-footer #btnNext:hover {
  background: rgba(255, 255, 255, 0.06);
}

.account-screen .question-footer #btnNext:active {
  transform: scale(0.96);
  opacity: 0.7;
}

.account-screen .question-footer #btnNext:disabled {
  background: none;
  color: rgb(125 140 179 / 45%);
  opacity: 1;
  cursor: not-allowed;
  box-shadow: none;
}

.account-screen .question-footer #btnBack {
  margin-bottom: 12px !important;
}

#account_first_name { top: 6.15%; }
#account_last_name { top: 20.67%; }
#account_birth_date { top: 35.20%; }
#account_gender { top: 49.72%; left: 0; right: 0; height: 7.26%; }
#account_email { top: 61.45%; }
#account_phone { top: 75.98%; }
#account_username { top: 90.50%; }

.account-gender-toggle {
  position: absolute;
  left: 0;
  right: 0;
  top: 49.72%;
  height: 7.26%;
}

.account-gender-option {
  position: absolute;
  top: 38.46%;
  width: 40%;
  height: 100%;
  transform: translate(-50%, -50%);
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: transform .15s ease;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  z-index: 2;
}

.account-gender-option::before {
  content: "";
  position: absolute;
  left: 14.3%;
  top: 50%;
  width: 18.5px;
  height: 18.5px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1.5px solid #ffffff;
  box-sizing: border-box;
  transition: border-color .18s ease;
}

.account-gender-option::after {
  content: "";
  position: absolute;
  left: 14.3%;
  top: 50%;
  width: 8px;
  height: 8px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: #4a78f2;
  opacity: 0;
  transition: opacity .18s ease;
}

.account-gender-option[data-gender="male"] {
  left: 22%;
}

.account-gender-option[data-gender="female"] {
  left: 70%;
}

.account-gender-option.is-active::before {
  border-color: #5588FC;
}

.account-gender-option.is-active::after {
  opacity: 1;
}

.account-gender-option:focus,
.account-gender-option:focus-visible {
  outline: none;
}

.user-profile-screen #first_name {
  margin-top: 12px;
}

.user-profile-screen .user-profile-hidden-name {
  display: none !important;
}

.user-profile-big-btn {
  margin-top: 14px;
  padding: 0;
  border: 0;
  background: none;
  width: 100%;
  display: flex;
  justify-content: flex-start;
  cursor: pointer;
  position: relative;
}

.user-profile-big-btn svg {
  max-width: 100%;
  height: auto;
}

.user-profile-avatar-row {
  align-items: center;
  justify-content: space-between;
  min-height: 60px;
}

.user-profile-avatar-wrap {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  overflow: hidden;
  background: #0F2D81;
  flex: 0 0 60px;
}

.user-profile-avatar-wrap img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.user-profile-avatar-name {
  flex: 1;
  margin-left: 14px;
  margin-right: 10px;
  color: #ffffff;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.2;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-profile-avatar-arrow {
  flex: 0 0 auto;
  margin-right: 8px;
}

.user-profile-keyboard {
  margin-top: 12px;
  width: 100%;
  display: flex;
  justify-content: flex-start;
  position: relative;
}

.user-profile-result-badge {
  width: 100%;
  margin-top: 10px;
}

.user-profile-result-badge img {
  display: block;
  width: 100%;
  height: auto;
}

.user-notifications-screen .user-profile-keyboard {
  margin-top: 24px;
}

.user-profile-keyboard img {
  width: 100%;
  height: auto;
  display: block;
}

.user-profile-keyboard-insert {
  position: relative;
  width: 100%;
  margin-top: 14px;
  min-height: 64px;
  flex-shrink: 0;
}

.user-profile-keyboard-insert img {
  width: 100%;
  height: auto;
  display: block;
}

.user-profile-keyboard-insert-btn {
  position: absolute;
  inset: 0;
  border: 0;
  padding: 0;
  background: transparent;
}

.user-profile-settings-row {
  position: relative;
  width: 100%;
  aspect-ratio: 358 / 62;
  min-height: 64px;
  overflow: hidden;
  margin-top: 14px;
  flex-shrink: 0;
}

.user-profile-settings-row img {
  width: 100%;
  height: auto;
  display: block;
}

.user-profile-settings-row-btn {
  position: absolute;
  inset: 0;
  border: 0;
  padding: 0;
  background: transparent;
  border-radius: 19px;
}

.user-profile-keyboard-overlay {
  position: absolute;
  inset: 0;
}

.notifications-row-values {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.notifications-row-value {
  position: absolute;
  right: 56px;
  width: 120px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  text-align: right;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.notifications-row-value:nth-child(1) { top: 0.27%; height: 23.26%; }
.notifications-row-value:nth-child(2) { top: 23.75%; height: 26.32%; }
.notifications-row-value:nth-child(3) { top: 50.33%; height: 26.32%; }
.notifications-row-value:nth-child(4) { top: 76.82%; height: 22.91%; }

.routine-row-values {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.routine-row-value {
  position: absolute;
  right: 56px;
  width: 120px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  text-align: right;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.routine-row-value:nth-child(1) { top: 0.27%; height: 23.26%; }
.routine-row-value:nth-child(2) { top: 23.75%; height: 26.32%; }
.routine-row-value:nth-child(3) { top: 50.33%; height: 26.32%; }

.user-profile-keyboard-row {
  position: absolute;
  left: 0.3%;
  width: 99.4%;
  border: 0;
  padding: 0;
  background: transparent;
  border-radius: 19px;
}

.user-profile-keyboard-row:nth-child(1) { top: 0.34%; height: 21.09%; }
.user-profile-keyboard-row:nth-child(2) { top: 26.19%; height: 21.77%; }
.user-profile-keyboard-row:nth-child(3) { top: 52.72%; height: 21.09%; }
.user-profile-keyboard-row:nth-child(4) { top: 78.57%; height: 21.09%; }

.profile-day-rutine-screen .user-profile-keyboard-row:nth-child(1) { top: 0.27%; height: 23.26%; }
.profile-day-rutine-screen .user-profile-keyboard-row:nth-child(2) { top: 23.75%; height: 26.32%; }
.profile-day-rutine-screen .user-profile-keyboard-row:nth-child(3) { top: 50.33%; height: 26.32%; }
.profile-day-rutine-screen .user-profile-keyboard-row:nth-child(4) { top: 76.82%; height: 22.91%; }

.notifications-time-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.notifications-time-modal-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(0, 0, 0, 0.45);
}

.notifications-time-modal-card {
  position: relative;
  z-index: 1;
  width: min(96vw, 430px);
  background: #e7e8ec;
  border-radius: 22px 22px 0 0;
  padding: 14px 14px 10px;
  box-sizing: border-box;
}

.notifications-time-modal-title {
  color: #11224f;
  font-size: 19px;
  line-height: 1.28;
  font-weight: 700;
  margin-bottom: 10px;
}

.notifications-time-modal-card .time-wheel {
  width: 100%;
  margin: 0 0 8px;
  padding: 0;
  gap: 14px;
  background: transparent;
  border-radius: 0;
}

.notifications-time-modal-card .wheel {
  width: 148px;
  height: 138px;
  overflow-y: auto;
  scrollbar-width: none;
}

.notifications-time-modal-card .wheel::-webkit-scrollbar {
  display: none;
}

.notifications-time-modal-card .wheel-item {
  color: #0d1f4b;
  font-size: 34px;
  line-height: 46px;
  height: 46px;
  font-weight: 700;
}

.notifications-time-modal-card .wheel-item.active {
  background: #a8bbea;
  color: #0d1f4b;
  border-radius: 12px;
  transform: none;
  width: 84px;
  margin-left: auto;
  margin-right: auto;
}

.notifications-time-modal-card .wheel-divider {
  color: #0d1f4b;
  font-size: 42px;
  line-height: 1;
  font-weight: 700;
  margin-top: 42px;
  padding-top: 0;
}

.notifications-time-save-btn.primary-btn {
  position: static !important;
  left: auto !important;
  bottom: auto !important;
  transform: none !important;
  width: 100%;
  margin: 0 0 6px;
  padding: 0;
  border: 0;
  min-height: 0;
  background: transparent;
  display: block;
  line-height: 0;
  cursor: not-allowed;
}

.notifications-time-save-btn.primary-btn svg {
  width: 100%;
  height: auto;
  display: block;
}

.notifications-time-save-btn.primary-btn:disabled {
  opacity: 1;
}

.notifications-time-save-btn.primary-btn:not(:disabled) {
  cursor: pointer;
  opacity: 0.96;
}

.notifications-time-cancel-btn {
  width: 78px;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  display: block;
  margin: 0 auto;
}

.notifications-time-cancel-btn svg {
  display: block;
  width: 78px;
  height: 12px;
}

.user-profile-keyboard-row.is-active {
  cursor: pointer;
}

.user-profile-keyboard-row.is-disabled {
  background: rgba(4, 14, 42, 0.42);
  cursor: not-allowed;
}

.user-profile-send-btn {
  margin-top: 12px;
  padding: 0;
  border: 0;
  background: none;
  width: 100%;
  display: flex;
  justify-content: flex-start;
  cursor: pointer;
}

.user-profile-send-btn img {
  max-width: 100%;
  height: auto;
  display: block;
}

.dev-message-modal {
  position: fixed;
  inset: 0;
  z-index: 1300;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dev-message-modal-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(0, 0, 0, 0.45);
}

.dev-message-modal-card {
  position: relative;
  z-index: 1;
  width: min(92vw, 360px);
}

.dev-message-modal-bg {
  width: 100%;
  height: auto;
  display: block;
}

.dev-message-modal-bg svg {
  width: 100%;
  height: auto;
  display: block;
}

.dev-message-modal-close-btn {
  position: absolute;
  top: 5.6%;
  right: 4.4%;
  width: 32px;
  height: 32px;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.dev-message-modal-input {
  position: absolute;
  left: 4.42%;
  top: 41.79%;
  width: 91.16%;
  height: 26.87%;
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: #111111;
  font-size: 15px;
  line-height: 1.3;
  resize: none;
  outline: none;
  padding: 12px 14px;
  box-sizing: border-box;
}

.dev-message-modal.has-text .dev-message-modal-input {
  background: #eff9ff;
}

.dev-message-modal-input::placeholder {
  color: #909090;
}

.dev-message-modal-send-btn {
  position: absolute;
  left: 4.42%;
  top: 74.63%;
  width: 91.16%;
  height: 19.4%;
  border: 0;
  padding: 0;
  background: transparent;
  line-height: 0;
  cursor: not-allowed;
}

.dev-message-modal-send-btn svg {
  width: 100%;
  height: auto;
  display: block;
}

.dev-message-modal-send-btn:disabled {
  opacity: 0;
}

.dev-message-modal-send-btn:not(:disabled) {
  opacity: 1;
  cursor: pointer;
}

.dev-message-success-modal {
  position: fixed;
  inset: 0;
  z-index: 1310;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dev-message-success-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(0, 0, 0, 0.45);
}

.dev-message-success-card {
  position: relative;
  z-index: 1;
  width: min(92vw, 362px);
  pointer-events: auto;
}

.dev-message-success-card img {
  width: 100%;
  height: auto;
  display: block;
}

.dev-message-success-close-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 44px;
  height: 44px;
  border: 0;
  background: transparent;
  cursor: pointer;
  z-index: 2;
}

.user-profile-main-name {
  position: absolute;
  left: 82px;
  top: 9px;
  width: 185px;
  height: 26px;
  line-height: 26px;
  padding: 0 6px;
  border-radius: 8px;
  background: #071f4f;
  font-size: 16px;
  font-weight: 600;
  color: #ffffff;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  pointer-events: none;
  display: none;
}


.footer-routine .routine-footer-art{
    display: block;
    width: 100%;
    height: auto;
}

/* Text is rendered by .routine-btn-label overlays, hide baked-in SVG glyph paths */
.footer-routine .routine-footer-art path{
    display: none;
}

.footer-routine .routine-hit-btn{
    position: absolute;
    left: 0;
    width: 100%;
    background: transparent;
    border: none;
    padding: 0;
}

.footer-routine .routine-hit-btn-top{
    top: 0;
    height: 52px;
}

.footer-routine .routine-hit-btn-bottom{
    top: 56px;
    height: 52px;
}

.footer-routine .routine-hit-btn:disabled{
    cursor: default;
}

.footer-routine .routine-hit-btn:not(:disabled){
    cursor: pointer;
}

.footer-routine .routine-btn-label{
    position: absolute;
    left: 0;
    width: 100%;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    font-size: 16px;
    font-weight: 600;
}

.footer-routine .routine-btn-label-top{
    top: 0;
    color: #d3e4ff;
}

.footer-routine .routine-btn-label-bottom{
    top: 56px;
    color: rgba(65, 119, 255, 0.4);
}

.answers.emoji .answer-btn.selected{
    background: #4177ff69;
    border: 1px solid #4177FF;
}

.daily-header .date.red{color:#E74C5C;}
.time-icon{
    display: flex;
}

.tasks-header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    padding: 0;
}
.tasks-header p{
    font-size: 22px;
    color: white;
    font-weight: 600;
    margin: 0;
}
.tasks-header button{
    border-radius: 12px;
    color: white;
    background: #1a2b57;
    border: none;
    font-size: 27px;
    width: 40px;
    height: 40px;
    font-weight: 200;
    display: flex;
    justify-content: center;
    align-items: center;
}

.main-task-modal .modal-close-btn,
.no-tasks-modal .modal-close-btn{
    position: absolute;
    top: 10px;
    right: 10px;
    background: none;
    border: none;
    font-size: 18px;
}
.modal-task-list{
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    gap: 10px;
    padding-top: 20px;
    border-top: 2px solid #e1e1e1;
    margin-top: 8px;
}
.no-tasks-modal .modal-text{
    border-top: 2px solid #e1e1e1;
    margin-top: 9px;
    margin-bottom: 0;
    padding-top: 15px;
    }
.modal-task-item{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.modal-task-item.active{
    color: inherit;
    font-weight: 700;
}
.modal-task-flag{
    display: none;
    flex-shrink: 0;
    line-height: 0;
}
.modal-task-item.active .modal-task-flag{
    display: inline-flex;
}
.no-tasks-modal .continue-btn,
.no-tasks-modal .add-tasks-btn,
.main-task-modal .continue-btn{
        width: 100%;
    box-shadow: none;
    margin: 0;
    margin-top: 30px;
}
.continue-anyway-btn{
    background: none;
    color: #537eff;
    margin-top: 0;
    margin-bottom: -10px;
}
.main-task-modal .modal-actions,
.no-tasks-modal .modal-actions{
    width: 100%;
}
.target-modal .delete-btn.danger{
    width: 100%;
    display: flex;
    justify-content: center;
    background: none;
    border: none;
    margin-top: 20px;
    font-size: 16px;
    font-weight: 600;
    color: #E74C5C;
}

.task-view-title{
    padding-left: 0 !important;
    margin-top: 10px !important;
}
#habitsList{
    margin-bottom: 0;
}
.habit-add .habit-progress p{
    font-size: 25px;
    background: #273d6d;
    font-weight: 200;
}
.habit-item.habit-add .habit-progress{
    border: none;
}
.reflection-question input{
    background: #3f4f7475;
    width: 100%;
    border-radius: 10px;
    padding: 20px;
    border: none;
}
.reflection-question input::placeholder{color:#acacac;}
.evening-h3{
    font-size: 21px !important;
    font-weight: 600 !important;
    margin-bottom: 30px;
}

.habit-modal-card{
    top: 0;
    left: 0;
    transform: none;
    width: 100%;
    height: 100%;
    max-width: 100%;
    background: none;
    border-radius: 0;
    padding: 24px 20px 32px;
    display: block;
    align-content: start;
}
.habit-modal-topline{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 28px;
    margin-bottom: 22px;
}
.habit-modal-back-btn{
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}
.habit-modal-topline-title{
    color: #ffffff;
    font-size: 22px;
    font-weight: 500;
    line-height: 1;
    display: flex;
    align-items: center;
}
.habit-modal-topline-spacer{
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
}
.habit-counter{
    width: max-content;
    display: flex;
    margin: 0 auto;
    align-items: center;
    gap: 30px;
}
.habit-modal-card .title{
    width: 100%;
    color: white;
    display: flex;
    justify-content: center;
    margin: 40px 0;
    font-size: 27px;
    font-weight: 600;
    margin-bottom: 0;
    height: max-content;
}
.habit-modal-card .text, .habit-modal-card .hint-text{
    color: #949494;
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 10px;
    text-align: center;
    font-size: 14px;
}
.habit-modal-card .weekdays{
    width: 100%;
    margin: 40px 10px;
}
.habit-modal-card .hint-text{}
.habit-counter .counter-value{
    margin: 0;
    width: 62px;
    height: 62px;
    color: white;
    background: var(--habit-color, #1d4ac8);
    border-radius: 50%;
    font-size: 15px;
    font-weight: 500;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: visible;
    flex-shrink: 0;
    z-index: 1;
}
.habit-counter .counter-value .habit-counter-value-text{
    width: 50px;
    height: 50px;
    color: white;
    font-size: 15px;
    font-weight: 500;
    line-height: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--habit-color, #1d4ac8);
    border-radius: 50%;
    position: relative;
    z-index: 1;
}
.habit-counter .counter-value .habit-counter-ring {
    position: absolute;
    width: 74px;
    height: 74px;
    inset: 50% auto auto 50%;
    transform: translate(-50%, -50%);
    display: block;
    pointer-events: none;
}
.habit-counter .counter-value .habit-counter-ring .habit-progress-ring-track,
.habit-counter .counter-value .habit-counter-ring .habit-progress-ring-fill {
    fill: none;
    stroke-width: 3;
}
.habit-counter .counter-value .habit-counter-ring .habit-progress-ring-track {
    stroke: var(--habit-color, #4177ff);
    stroke-opacity: 0.24;
}
.habit-counter .counter-value .habit-counter-ring .habit-progress-ring-fill {
    stroke: var(--habit-color, #4177ff);
    stroke-opacity: 1;
}
.habit-counter .counter-btn{
    border-radius: 12px;
    color: white;
    background: #1a2b57;
    border: none;
    font-size: 24px;
    width: 50px;
    height: 50px;
    font-weight: 200;
    display: flex;
    justify-content: center;
    align-items: center;
}
.habit-stats{
    width: 100%;
    display: flex;
    gap: 10px;
    justify-content: space-between;
    margin-bottom: 20px;
    margin-top: 30px;
}
.habit-stats .block-title{
    text-align: center;
    font-size: 29px;
    color: white;
    font-weight: 600;
}
.habit-stats .block{
    width: 48%;
    padding: 15px;
    border: 2px solid #1a2b57;
    border-radius: 15px;
}
.habit-stats .block-text{
    color: white;
    text-align: center;
    margin-top: 10px;
    font-size: 13px;
}
#closeHabitModal{
    background: #243767a3;
    font-size: 14px;
    font-weight: 500;
    margin-top: 14px;
}
.habit-modal #editHabitBtn{
    position: static;
    display: block;
    margin-top: 8px;
    margin-left: auto;
    margin-right: auto;
    background: none;
    border: none;
    font-size: 18px;
    color: #5081f0;
    font-weight: 600;
}
#dailyRoutineContent .question-title{
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 15px;
}
#dailyRoutineContent .text{
    font-size: 15px;
    font-weight: 500;
}
#dailyRoutineContent .title{
    font-size: 18px;
    color: white;
    margin-bottom: 10px;
    font-weight: 500;
    margin-top: 30px;
}
#dailyRoutineContent #habitsList{
    margin-bottom: 40px;
}
.main-task-modal{
}
.main-task-modal .modal-actions .continue-btn, .no-tasks-modal .modal-actions .continue-btn{
    position: relative;
}

/* Habit create: color picker */
.habit-color-picker {
  width: 100%;
  padding: 6px 20px 18px;
  --habit-selected-color: #4177ff;
}

.habit-color-preview {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-bottom: 14px;
}

.habit-color-preview-ring {
  width: 57px;
  height: 57px;
  border: 3px solid var(--habit-selected-color);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.habit-color-preview-fill {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: block;
}

.habit-color-list {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  gap: 8px;
}

.habit-color-item {
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  margin: 0 auto;
  position: relative;
  cursor: pointer;
}

.habit-color-item::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid transparent;
}

.habit-color-item.active::before {
  border-color: var(--habit-selected-color);
}

.habit-color-dot {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  display: block;
}

/* Home habits modal (from home_habits.js) */
.home-habits-modal .modal-backdrop {
  background: none;
}

.home-habits-modal .habit-modal-card {
  padding: 10px 14px 18px;
}

.home-habits-modal .habit-counter {
  gap: 18px;
}

.home-habits-modal .habit-counter .counter-btn {
  width: 42px;
  height: 42px;
  border-radius: 11px;
  font-size: 22px;
  background: rgba(31, 58, 122, 0.95);
}

.home-habits-modal .habit-counter .counter-value {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--habit-color, #1d4ac8);
  border: none;
  box-shadow: 0 0 0 6px var(--habit-color-glow, rgba(65, 119, 255, 0.12));
  font-size: 24px;
  font-weight: 600;
  position: relative;
  overflow: visible;
  z-index: 1;
}

.home-habits-modal .habit-counter .counter-value .habit-counter-ring {
  width: 66px;
  height: 66px;
}

.home-habits-modal .habit-counter .counter-value .habit-counter-ring .habit-segmented-ring-segment {
  stroke: rgba(255, 255, 255, 0.22);
}

.home-habits-modal .habit-counter .counter-value .habit-counter-ring .habit-segmented-ring-segment.is-filled {
  stroke: var(--habit-color, #4177ff);
}

.home-habits-modal .title {
  margin-top: 24px;
  margin-bottom: 6px;
  font-size: 24px;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  text-align: center;
}

.home-habits-modal .text {
  margin-top: 0;
  color: rgba(217, 224, 255, 0.72);
  font-size: 20px;
}

.home-habits-modal .weekdays {
  margin: 22px 0 8px;
}

.home-habits-modal .weekday-name {
  font-size: 11px;
}

.home-habits-modal .weekday {
  position: relative;
}

.home-habits-modal .habit-weekday-today-indicator {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #4177ff;
  margin: 6px auto 0;
}

.home-habits-modal .weekday-num {
  width: 34px;
  height: 34px;
  margin: 0 auto;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffffd9;
  font-size: 12px;
  font-weight: 500;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.08);
  position: relative;
}

.home-habits-modal .weekday-num.active,
.home-habits-modal .weekday-num.today {
  border: 0;
  background: var(--habit-color, #4177ff);
  color: #ffffff;
}

.home-habits-modal .weekday-num .habit-segmented-ring {
  width: 44px;
  height: 44px;
}

.home-habits-modal .weekday-num .habit-segmented-ring-segment {
  stroke: rgba(255, 255, 255, 0.2);
}

.home-habits-modal .weekday-num .habit-segmented-ring-segment.is-filled {
  stroke: var(--habit-color, #4177ff);
}

.home-habits-modal .weekday-num .habit-solid-ring-stroke {
  stroke: rgba(255, 255, 255, 0.24);
}

.home-habits-modal .weekday-num .habit-solid-ring.is-complete .habit-solid-ring-stroke {
  stroke: var(--habit-color, #4177ff);
}

.home-habits-modal .weekday-num .habit-solid-ring.is-pending .habit-solid-ring-stroke {
  stroke: rgba(255, 255, 255, 0.3);
}

.home-habits-modal .hint-text {
  margin-top: 12px;
  font-size: 12px;
  color: rgba(201, 211, 255, 0.7);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.home-habits-modal .habit-stats {
  margin-top: 18px;
  margin-bottom: 18px;
  gap: 10px;
}

.home-habits-modal .habit-stats .block {
  border-color: rgba(73, 126, 255, 0.45);
  background: rgba(18, 35, 88, 0.35);
  border-width: 2px;
}

.home-habits-modal .habit-stats .block-title {
  font-size: 22px;
}

.home-habits-modal .habit-stats .block-text {
  color: rgba(236, 241, 255, 0.9);
  text-align: center;
}

.home-habits-modal #closeHabitModal {
  width: 100%;
  margin-top: 0;
  min-height: 44px;
  border-radius: 12px;
  background: rgba(41, 72, 149, 0.85);
  box-shadow: none;
}

.home-habits-modal #editHabitBtn {
  margin-top: auto;
  color: #67a0ff;
}

.habit-day-sheet {
  position: fixed;
  inset: 0;
  z-index: 1400;
  display: flex;
  align-items: flex-end;
}

.habit-day-sheet-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(5, 15, 44, 0.42);
}

.habit-day-sheet-card {
  position: relative;
  width: 100%;
  border-radius: 20px 20px 0 0;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 -10px 35px rgba(6, 20, 58, 0.25);
}

.habit-day-sheet-item {
  width: 100%;
  min-height: 56px;
  border: 0;
  border-top: 1px solid #d3e4ff;
  background: #fff;
  color: #06143a;
  font-size: 17px;
  font-weight: 500;
  text-align: left;
  padding: 0 20px;
  cursor: pointer;
}

.habit-day-sheet-item:first-child {
  border-top: 0;
}

.habit-day-sheet-item.is-primary {
  color: #4177ff;
}

.habit-day-sheet-item.is-danger {
  color: #e74c5c;
}

.habit-finish-sheet {
  position: fixed;
  inset: 0;
  z-index: 1500;
  display: flex;
  align-items: center;
  justify-content: center;
}

.habit-finish-sheet-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(6, 20, 58, 0.36);
}

.habit-finish-sheet-card {
  position: relative;
  width: min(362px, calc(100% - 28px));
  min-height: 286px;
  border-radius: 20px;
  background: #ffffff;
  padding: 28px 16px 18px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.habit-finish-sheet-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #06143a;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.habit-finish-sheet-title {
  color: #06143a;
  font-size: 24px;
  font-weight: 700;
  text-align: center;
  margin-top: 8px;
}

.habit-finish-sheet-text {
  margin-top: 14px;
  color: #06143a;
  opacity: 0.84;
  font-size: 14px;
  text-align: center;
  line-height: 1.4;
}

.habit-finish-sheet-primary {
  margin-top: auto;
  width: 100%;
  min-height: 52px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 10px;
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  cursor: pointer;
  background: linear-gradient(135deg, #bccfff 0%, #4177ff 62%);
}

.habit-finish-sheet-secondary {
  margin-top: 14px;
  border: 0;
  background: transparent;
  color: #4177ff;
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
}

/* Daily routine habit modal: same typography tuning */
.habit-modal-card .title {
  text-align: center;
  font-size: 23px;
}

.habit-modal-card .weekday-name {
  font-size: 11px;
}

.habit-modal-card .weekday-num {
  width: 34px;
  height: 34px;
  margin: 0 auto;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffffd9;
  font-size: 12px;
  font-weight: 500;
  border: 0;
  background: #1d4ac8;
  position: relative;
}

.habit-modal-card .weekday-num .habit-weekday-ring {
  position: absolute;
  width: 44px;
  height: 44px;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.habit-modal-card .weekday-num .habit-progress-ring-track,
.habit-modal-card .weekday-num .habit-progress-ring-fill {
  fill: none;
  stroke-width: 3;
}

.habit-modal-card .weekday-num .habit-progress-ring-track {
  stroke: rgba(255, 255, 255, 0.22);
}

.habit-modal-card .weekday-num .habit-progress-ring-fill {
  stroke: #1d4ac8;
}

/* Targets screen: visual refresh to match miniapp mock */
.targets-modern-screen {
  display: flex;
  flex-direction: column;
  align-content: stretch;
  flex-wrap: nowrap;
  padding-top: 28px;
  padding-bottom: 108px;
  gap: 0;
  overflow-y: auto;
}

.targets-modern-screen .targets-main-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 28px;
  line-height: 36px;
  color: #ffffff;
  font-weight: 500;
  margin-bottom: 10px;
}

.targets-modern-screen .targets-main-title-icon {
  font-size: 28px;
  line-height: 1;
}

.targets-modern-screen .targets-block {
  margin: 0;
}

.targets-modern-screen .targets-empty-state {
  width: 100%;
}

.targets-modern-screen .targets-filled-header h3 {
  margin: 0;
  font-size: 29px;
  line-height: 1;
  font-weight: 700;
  color: #ffffff;
}

.targets-modern-screen .targets-filled-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
}

.targets-modern-screen .targets-filled-title {
  margin: 0;
  color: #ffffff;
  font-family: "Geist", "Montserrat", sans-serif !important;
  font-size: 32px !important;
  line-height: 40px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
}

.targets-modern-screen .targets-add-filled-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 44px;
  padding: 0 12px 0 8px;
  border: none;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
}

.targets-modern-screen .targets-add-filled-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  font-size: 18px;
  line-height: 1;
}

.targets-modern-screen .targets-add-btn-filled {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid rgba(188, 208, 255, 0.35);
  background: rgba(28, 48, 95, 0.72);
  color: #e7efff;
  font-size: 14px;
}

.targets-modern-screen .targets-add-btn-filled svg {
  width: 12px;
  fill: #d7e5ff;
}

.targets-modern-screen .targets-header-default,
.targets-modern-screen .targets-header-add {
  position: static;
  inset: auto;
  height: auto;
}

.targets-modern-screen .targets-goal-input {
  background: rgba(37, 58, 109, 0.8);
  border: 1px solid rgba(188, 208, 255, 0.08);
  border-radius: 12px;
  min-height: 46px;
  width: 100%;
  max-width: none;
  margin: 0;
  display: flex;
  align-items: center;
  padding: 0 8px 0 10px;
}

.targets-modern-screen .targets-goal-input .targets-input {
  flex: 1;
  background: transparent;
  border: none;
  color: #e7f0ff;
  font-size: 14px;
  padding: 0 6px;
}

.targets-modern-screen .targets-goal-input .targets-input::placeholder {
  color: rgba(188, 208, 255, 0.65);
}

.targets-modern-screen .targets-add-btn,
.targets-modern-screen .targets-next-btn {
  width: 30px;
  height: 30px;
  min-width: 30px;
  border-radius: 50%;
  border: none;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #284a97 0%, #223f84 100%);
}

.targets-modern-screen .targets-add-btn svg,
.targets-modern-screen .targets-next-btn svg {
  width: 13px;
  fill: #94b0ff;
}

.targets-modern-screen .targets-add-btn:disabled,
.targets-modern-screen .targets-next-btn:disabled {
  cursor: default;
  background: rgba(40, 61, 111, 0.7);
  box-shadow: none;
}

.targets-modern-screen .targets-add-btn:disabled svg,
.targets-modern-screen .targets-next-btn:disabled svg {
  fill: rgba(148, 176, 255, 0.45);
}

.targets-modern-screen .targets-add-btn:not(:disabled),
.targets-modern-screen .targets-next-btn:not(:disabled) {
  background: linear-gradient(180deg, #3d67c5 0%, #2f58b6 100%);
  box-shadow: 0 0 0 1px rgba(139, 171, 255, 0.18) inset;
}

.targets-modern-screen .targets-add-btn:not(:disabled) svg,
.targets-modern-screen .targets-next-btn:not(:disabled) svg {
  fill: #d5e5ff;
}

.targets-modern-screen .targets-filled-goal-input .targets-next-btn:disabled {
  cursor: default;
  opacity: 0.65;
}

.targets-modern-screen .targets-filled-goal-input .targets-next-btn {
  width: 32px;
  height: 32px;
  min-width: 32px;
  padding: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.targets-modern-screen .targets-filled-goal-input .targets-next-btn svg {
  width: 32px;
  height: 32px;
  background: transparent;
  padding: 0;
  border-radius: 0;
  display: block;
}

.targets-modern-screen .targets-filled-goal-input .targets-next-btn:disabled .arrow-bg {
  fill: #0F2D81;
}

.targets-modern-screen .targets-filled-goal-input .targets-next-btn:disabled .arrow-icon {
  fill: #ffffff;
  fill-opacity: 0.1;
}

.targets-modern-screen .targets-filled-goal-input .targets-next-btn:not(:disabled) .arrow-bg {
  fill: #4177FF;
}

.targets-modern-screen .targets-filled-goal-input .targets-next-btn:not(:disabled) .arrow-icon {
  fill: #ffffff;
  fill-opacity: 1;
}

.targets-modern-screen .targets-close-btn {
  background: transparent !important;
  border: none;
  color: #a8bcf7;
  width: 28px;
  min-width: 28px;
  height: 28px;
  border-radius: 8px;
  padding: 0 !important;
}

.targets-modern-screen .targets-ai-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
}

.targets-modern-screen .targets-ai-header .sub-header {
  font-family: "Geist", "Montserrat", sans-serif !important;
  font-size: 20px !important;
  line-height: 26px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  margin: 0;
  white-space: nowrap;
}

.targets-modern-screen .targets-generate-btn {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid rgba(188, 208, 255, 0.35);
  background: rgba(28, 48, 95, 0.72);
  color: #e7efff;
  font-size: 14px;
}

.targets-modern-screen .targets-generate-btn svg {
  width: 14px;
  fill: #d7e5ff;
}

.targets-modern-screen .ai-ideas-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}

.targets-modern-screen .ai-idea-item {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  background: transparent;
}

.targets-modern-screen .ai-idea-item .idea-text {
  flex: 1;
  width: auto;
  margin: 0;
  border: 1px solid rgba(88, 129, 214, 0.55);
  background: rgba(8, 25, 64, 0.32);
  border-radius: 10px;
  min-height: 40px;
  display: flex;
  align-items: center;
  padding: 10px 14px;
  font-size: 14px;
  line-height: 1.25;
  color: #f0f6ff;
}

.targets-modern-screen .idea-delete-btn {
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: 8px;
  background: rgba(29, 54, 118, 0.86);
  border: 1px solid rgba(105, 139, 221, 0.2);
}

.targets-modern-screen .idea-delete-btn svg {
  width: 20px;
  fill: #5f88e6;
}

.targets-modern-screen .targets-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  margin-top: 0;
  margin-bottom: 0;
}

.targets-modern-screen .card-content {
  background: rgba(12, 31, 76, 0.6);
  border: 1px solid rgba(188, 208, 255, 0.1);
}

.targets-modern-screen .target-card {
  width: 100%;
  padding: 16px;
  box-sizing: border-box;
  border-radius: 20px;
  border: 2px solid rgba(255, 255, 255, 0.05);
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(30px);
  margin-bottom: 0;
}

.targets-modern-screen .target-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin-bottom: 8px;
  flex-wrap: nowrap;
}

.targets-modern-screen .target-card-title {
  margin: 0;
  color: #ffffff;
  font-family: "Geist", "Montserrat", sans-serif !important;
  font-size: 20px !important;
  line-height: 26px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  white-space: nowrap;
  flex: 0 0 auto;
}

.targets-modern-screen .target-card-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1 1 auto;
  min-width: 0;
  flex-wrap: nowrap;
  justify-content: flex-start;
}

.targets-modern-screen .target-card-category {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 4px 8px;
  border-radius: 6px;
  background: #1d4ac8;
  color: #ffffff;
  font-size: 10px;
  line-height: 14px;
  font-weight: 400;
}

.targets-modern-screen .target-card-date {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  white-space: nowrap;
  color: #ffffff;
  font-size: 10px;
  line-height: 14px;
  font-weight: 400;
}

.targets-modern-screen .target-card-date svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
  flex: 0 0 auto;
}

.targets-modern-screen .target-card-body {
  margin: 0;
  color: #ffffff;
  font-size: 16px;
  line-height: 22px;
  font-weight: 400;
  overflow-wrap: anywhere;
}

.targets-modern-screen .targets-footer {
  width: 100%;
  margin-top: 8px;
}

.targets-modern-screen .continue-btn {
  width: calc(100% - 48px);
  max-width: 472px;
}

#targetModal .target-modal .category-list {
  width: 100%;
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  gap: 9px;
  padding-bottom: 10px;
}

.goals-screen .targets-header-add .targets-next-btn:disabled {
  cursor: default;
  opacity: 0.65;
}

.goals-screen .targets-header-add .targets-next-btn:disabled svg {
  background: #3a4d79;
  fill: rgba(255, 255, 255, 0.45);
}

.goals-screen .targets-header-add .targets-next-btn:not(:disabled) svg {
  background: #4c75c9;
  fill: #ffffff;
}

#taskSavedModal .task-saved-modal-card {
  width: calc(100% - 16px);
  max-width: 640px;
  border-radius: 22px;
  padding: 22px 18px 20px;
}

#taskSavedModal .modal-title {
  width: 100%;
  text-align: center;
  margin: 0 0 12px;
  font-size: clamp(28px, 7vw, 56px);
  line-height: 1;
  font-weight: 700;
}

#taskSavedModal .task-saved-name {
  margin: 26px 0 0;
  font-size: clamp(22px, 6.2vw, 52px);
  color: #06143a;
  font-weight: 600;
  line-height: 1.35;
  word-break: break-word;
  text-align: center;
}

#taskSavedModal .task-saved-datetime {
  margin: 18px 0 0;
  font-size: clamp(18px, 5.6vw, 46px);
  color: #11214f;
  text-align: center;
}

#taskSavedModal .task-saved-actions {
  width: 100%;
  margin-top: 28px;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 14px;
}

#taskSavedModal .task-saved-continue {
  margin-top: 0;
  width: 160px;
  min-width: 160px;
  height: 52px;
  border-radius: 10px;
  font-size: 20px;
  font-weight: 700;
  border: 1px solid transparent;
  background-image:
    linear-gradient(135deg, #bccfff 0%, #4177ff 62%),
    linear-gradient(167deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.4) 40%, rgba(255, 255, 255, 0.05) 100%);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  box-shadow: none;
}

#taskSavedModal .task-saved-create-more {
  flex: 1;
  margin-top: 0;
  border: none;
  background: transparent;
  color: #5588fc;
  font-size: 20px;
  font-weight: 600;
  text-align: center;
}

#taskSavedModal .task-saved-line {
  display: block;
  width: 100%;
  max-width: 330px;
  margin: 0 auto;
}

#taskSavedModal .task-saved-actions .task-saved-create-more {
  white-space: nowrap;
}