:root{
  --bg:#07132b;
  --card-bg:#0b1220;
  --accent:#2a63ff;
  --muted:#9fbfe6;
  --text:#eaf4ff;
}

/* базовые стили */
*{box-sizing:border-box;margin:0;padding:0}
html,body{
  height:100%;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial;
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
}

.app{max-width:480px;margin:0 auto;padding:20px;display:flex;flex-direction:column;align-items:center;gap:18px}

/* блок уведомления "Вы предложили запись" */
.status-block {
  width: 100%;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 20px;
  padding: 48px 32px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  color: var(--text);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease;
  position: relative;
}

.status-block::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--accent), #325eff);
  border-radius: 20px 20px 0 0;
  opacity: 0.95;
}

.status-block:hover {
  border-color: rgba(255, 255, 255, 0.08);
  transform: translateY(-2px);
}

/* плавная анимация появления текста */
@keyframes fadeUp {
  0% {
    opacity: 0;
    transform: translateY(15px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Заголовок и подзаголовки с анимацией */
.status-title {
  font-weight:700;
  font-size:35px;
  color: #eaf0ff;
  text-align: center;
  animation: fadeUp 0.6s ease-out forwards;
}

.status-subtitle {
  font-weight:400;
  font-size:16px;
  color: rgba(234, 244, 255, 0.75);
  line-height: 1.5;
  text-align: center;
  max-width: 90%;
  animation: fadeUp 0.6s ease-out forwards;
  animation-delay: 0.2s;
}

.status-subtitle2 {
  font-weight:400;
  font-size:10px;
  color: rgba(234, 244, 255, 0.45);
  letter-spacing: 0.2px;
  text-align: center;
  line-height: 1.5;
  margin-top: 4px;
  max-width: 95%;
  transition: color 0.3s ease;
  animation: fadeUp 0.6s ease-out forwards;
  animation-delay: 0.4s;
}



.status-subtitle2:hover {
  color: rgba(234, 244, 255, 0.65);
}

/* заголовок страницы */
.top{text-align:center}
.top h1{font-size:22px;font-weight:700}
.subtitle{color:var(--muted);font-size:13px;margin-top:4px}

/* slider */
.slider-container{width:100%;overflow:hidden;border-radius:14px;position:relative}
.slider{display:flex;transition:transform .55s cubic-bezier(.22,.9,.3,1);will-change:transform;gap:12px}

/* card */
.card{
  flex:0 0 100%;
  background:var(--card-bg);
  border-radius:14px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  text-align:left;
  transition:transform .25s ease,box-shadow .25s ease;
  user-select:none;
}

.card:hover{transform:translateY(-6px);}

.card img{
  display:block;
  width:100%;
  height:auto;
  max-height:260px;
  object-fit:cover;
}

.card-content{display:flex;flex-direction:column;padding:12px 14px 0;background:transparent}

.card-title{font-weight:700;font-size:16px;margin-bottom:6px;}
.card-text{
  color:var(--text);
  font-size:14px;
  line-height:1.5;
  margin:0 0 12px 0;
  word-break:break-word;
  display:block;
  position:relative;
}

/* длинный текст – блюр */
.card--long .card-text{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:10;
  overflow:hidden;
}
.card--long .card-text::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;height:48px;
  background:linear-gradient(to bottom, rgba(11,18,32,0) 0%, rgba(11,18,32,1) 100%);
}

.card-footer{margin-top:auto}
.read-btn{
  display:block;
  width:100%;
  border:none;
  background:linear-gradient(90deg,var(--accent),#1a4ed9);
  color:#fff;
  font-weight:700;
  padding:14px 16px;
  text-align:center;
  cursor:pointer;
  border-radius:0 0 14px 14px;
  transition:transform .18s ease,opacity .18s ease;
}
.read-btn:hover{transform:scale(1.02);}

/* Markdown стили */
.card-text strong{font-weight:700;}
.card-text em{font-style:italic;}
.card-text ul{padding-left:20px; margin:4px 0;}
.card-text ol{padding-left:20px; margin:4px 0;}
.card-text a{color:var(--accent); text-decoration:underline;}

@media (max-width:420px){
  .top h1{font-size:20px}
  .card img{max-height:180px}
  .card-text{font-size:13px}
  .read-btn{padding:12px 14px}
}