/* =====================================================================
   theme.css — общая дизайн-система платформы и сайтов-визиток.
   Тема "день/ночь" переключается через JS по локальному времени браузера
   (класс .theme-day / .theme-night на <html>), см. assets/js/theme.js
   ===================================================================== */

:root{
  --accent:        #FF3D77;
  --accent-2:      #8B2FFF;
  --radius-lg:     28px;
  --radius-md:     18px;
  --radius-sm:     12px;
  --shadow-soft:   0 20px 60px rgba(20,10,40,.18);
  --shadow-pop:    0 8px 24px rgba(20,10,40,.22);
  --ff-display:    'Unbounded', 'Manrope', system-ui, sans-serif;
  --ff-text:       'Manrope', system-ui, sans-serif;
}

/* ---------- Светлая (дневная) палитра — по умолчанию ---------- */
html.theme-day{
  --bg-1: #FFF4E0;
  --bg-2: #FFD6E8;
  --surface: #FFFFFF;
  --surface-2: #FFFBF5;
  --text-main: #1A1030;
  --text-muted: #6B5E7B;
  --border: rgba(26,16,48,.08);
}

/* ---------- Тёмная (ночная) палитра ---------- */
html.theme-night{
  --bg-1: #1A1030;
  --bg-2: #2B0F3A;
  --surface: #241536;
  --surface-2: #2C1A40;
  --text-main: #FCEEFF;
  --text-muted: #C7B8D6;
  --border: rgba(255,255,255,.08);
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family: var(--ff-text);
  color: var(--text-main);
  background: linear-gradient(160deg, var(--bg-1), var(--bg-2));
  background-attachment: fixed;
  min-height: 100vh;
  transition: background .6s ease, color .4s ease;
  -webkit-font-smoothing: antialiased;
}
h1,h2,h3,.display{ font-family: var(--ff-display); font-weight: 700; letter-spacing: -.02em; }
a{color: inherit; text-decoration:none;}
img{max-width:100%; display:block;}
button, .btn{
  font-family: var(--ff-text);
  cursor:pointer; border:none; border-radius: 999px;
}

.container{ max-width:1160px; margin:0 auto; padding:0 20px; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding: 14px 28px; font-weight:700; font-size:16px;
  transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.btn:active{ transform: scale(.97); }
.btn-primary{
  background: linear-gradient(120deg, var(--accent), var(--accent-2));
  color:#fff; box-shadow: var(--shadow-pop);
}
.btn-primary:hover{ box-shadow: 0 12px 32px rgba(139,47,255,.35); transform: translateY(-2px); }
.btn-ghost{
  background: var(--surface); color: var(--text-main); border:2px solid var(--border);
}
.btn-block{ width:100%; }
.btn-sm{ padding:10px 18px; font-size:14px; }

.card{
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  border: 1px solid var(--border);
}

.badge{
  display:inline-block; padding:6px 14px; border-radius:999px; font-weight:700; font-size:13px;
  background: rgba(255,61,119,.12); color: var(--accent);
}

.pill-nav{
  display:flex; align-items:center; justify-content:space-between;
  padding: 14px 22px; border-radius: 999px;
  background: var(--surface); box-shadow: var(--shadow-pop);
  border: 1px solid var(--border);
}

input[type=text], input[type=email], input[type=password], input[type=tel], input[type=date],
input[type=time], input[type=number], textarea, select{
  width:100%; padding:14px 16px; border-radius: var(--radius-sm);
  border: 2px solid var(--border); background: var(--surface-2); color: var(--text-main);
  font-family: var(--ff-text); font-size:15px; outline:none;
  transition: border-color .15s ease;
}
input:focus, textarea:focus, select:focus{ border-color: var(--accent); }
label{ font-weight:600; font-size:14px; color: var(--text-muted); display:block; margin-bottom:6px; }
.field{ margin-bottom:18px; }

.grid{ display:grid; gap:24px; }
.grid-2{ grid-template-columns: repeat(2, 1fr); }
.grid-3{ grid-template-columns: repeat(3, 1fr); }
.grid-4{ grid-template-columns: repeat(4, 1fr); }

.section{ padding: 80px 0; }
.text-muted{ color: var(--text-muted); }
.center{ text-align:center; }

@media (max-width: 900px){
  .grid-2,.grid-3,.grid-4{ grid-template-columns: 1fr; }
  .section{ padding: 48px 0; }
}

/* Плашка тарифа/статуса подписки */
.status-pill{
  display:inline-flex; align-items:center; gap:8px; padding:8px 16px; border-radius:999px;
  font-weight:700; font-size:13px;
}
.status-trial{ background:rgba(255,138,0,.15); color:#FF8A00; }
.status-active{ background:rgba(0,217,163,.15); color:#00A87C; }
.status-expired,.status-blocked{ background:rgba(255,61,119,.15); color:#FF3D77; }

.scroll-fade{ animation: fadeUp .6s ease both; }
@keyframes fadeUp{ from{opacity:0; transform:translateY(16px);} to{opacity:1; transform:none;} }