/* ============================================================
   RE-FRESH — единая дизайн-система (крем · карамель · небо)
   Подключается на КАЖДОМ экране:  <link rel="stylesheet" href="/theme.css">
   Маршрут для отдачи файла добавить в server.py (см. README).
   Менять цвета/скругления/тени только здесь, в :root.
   ============================================================ */

:root{
  /* --- цвета --- */
  --bg:#f7f4ee;              /* базовый фон */
  --paper:#fffdf9;           /* «бумага» карточек */
  --blue:#eaf2f5;            /* холодный светлый акцент */
  --navy:#16324a;            /* основной текст */
  --muted:#5f7286;           /* вторичный текст (контраст проверен) */
  --caramel:#a96843;         /* акцент: кнопки, активные состояния */
  --caramel-2:#c78a61;       /* акцент светлее, для градиента */
  --caramel-ink:#8c5535;     /* акцент на светлом фоне (текст) */
  --line:rgba(255,255,255,.94);
  --hairline:#e3ebee;        /* разделители внутри карточек */

  /* --- форма --- */
  --r:26px;                  /* скругление карточек */
  --r-sm:18px;               /* скругление полей и мелких блоков */
  --shadow:0 18px 42px rgba(75,103,122,.12), 0 6px 18px rgba(153,104,72,.06);
  --shadow-soft:0 8px 20px rgba(76,106,124,.10);

  /* --- безопасные зоны Telegram --- */
  --safe-t:max(14px, env(safe-area-inset-top));
  --safe-b:max(10px, env(safe-area-inset-bottom));
  --kb:0px;                  /* высота клавиатуры, выставляется из JS */

  /* Только светлая схема: иначе iOS в тёмной теме рисует поля ввода
     тёмными, и текст в них не виден. */
  color-scheme:light;
}

*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:var(--bg)}
body{
  color:var(--navy);
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
}

/* ---------- ЕДИНСТВЕННЫЙ скролл-контейнер ----------
   overflow-x: hidden обязателен: без него overflow-y:auto
   вычисляется как overflow-x:auto и экран тащится вбок. */
.page-scroll{
  height:100dvh;
  overflow-y:auto;
  overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  padding:var(--safe-t) 16px calc(104px + var(--safe-b) + var(--kb));
  background:
    radial-gradient(circle at 87% 4%, rgba(190,220,236,.55), transparent 24%),
    radial-gradient(circle at 8% 88%, rgba(238,215,196,.32), transparent 23%),
    linear-gradient(180deg,#faf7f1,#eef5f7 48%,#f8f0e8);
}
.page{max-width:720px;margin:0 auto}

/* ---------- типографика ---------- */
h1,h2,h3{margin:0;font-family:Georgia,"Times New Roman",serif;font-weight:500}
h1{font-size:clamp(34px,9vw,46px);line-height:1.0}
h2{font-size:28px;line-height:1.1}
h3{font-size:20px;line-height:1.15}
p{margin:0}
.accent{color:var(--caramel);font-style:italic}       /* курсивное слово в заголовке */
.eyebrow{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-bottom:7px}
.subtitle{margin-top:7px;font-size:13px;line-height:1.45;color:var(--muted)}
/* Пометка о системе домов (заполярье, не Плацидус) — одна строка на всех экранах с домами */
.house-system-note{margin:8px 0 0;font-size:12px;line-height:1.4;color:var(--muted)}
.section{margin-top:15px}
.center{text-align:center}
.hidden{display:none !important}

/* ---------- шапка экрана ---------- */
.page-header{display:flex;align-items:center;gap:10px;margin:2px 0 18px}
.page-title-group{flex:1;display:flex;justify-content:center}
.page-header-spacer{width:44px;flex:0 0 44px}
.back-button,.round{
  display:grid;place-items:center;flex:0 0 auto;width:44px;height:44px;
  border:1px solid #fff;border-radius:50%;background:rgba(255,255,255,.72);
  box-shadow:var(--shadow-soft);color:var(--navy);text-decoration:none;cursor:pointer;
}

/* ---------- карточки ---------- */
.card{
  padding:19px;background:rgba(255,253,249,.86);
  border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
}
.card + .card{margin-top:12px}
.row{display:flex;align-items:center;gap:12px}
.between{justify-content:space-between}

.icon{
  display:grid;place-items:center;flex:0 0 auto;width:46px;height:46px;border-radius:50%;
  background:linear-gradient(145deg,#f7fbfd,#dcebf3);border:1px solid #fff;color:var(--navy);
}
.icon svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}

/* ---------- кнопки ---------- */
.btn-primary{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:48px;padding:0 21px;border:0;border-radius:999px;
  color:#fff;font:600 15px Inter,sans-serif;text-decoration:none;cursor:pointer;
  background:linear-gradient(135deg,var(--caramel-2),var(--caramel));
  box-shadow:0 8px 22px rgba(169,104,67,.22);
}
.btn-ghost{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:46px;padding:0 18px;border:1px solid #d7e2e7;border-radius:999px;
  background:rgba(255,255,255,.62);color:var(--navy);font:600 15px Inter,sans-serif;
  text-decoration:none;cursor:pointer;
}
.btn-block{width:100%}
.link{color:var(--caramel-ink);font:600 14px Inter,sans-serif;text-decoration:none}

/* ---------- вкладки (Карта/Планеты/Дома/Аспекты) ---------- */
.seg{
  display:grid;grid-template-columns:repeat(4,1fr);gap:5px;padding:5px;
  border-radius:999px;background:rgba(255,255,255,.7);border:1px solid #fff;box-shadow:var(--shadow);
}
.seg button{min-height:42px;border:0;border-radius:999px;background:transparent;
  color:var(--navy);font:600 13.5px Inter,sans-serif;cursor:pointer}
.seg button.on{color:#fff;background:linear-gradient(135deg,var(--caramel-2),var(--caramel))}

/* ---------- герой-блок (иллюстрация + призыв) ---------- */
.hero{
  position:relative;overflow:hidden;display:flex;align-items:flex-end;min-height:250px;padding:22px;
  border:1px solid #fff;border-radius:var(--r);box-shadow:var(--shadow);
  background:linear-gradient(155deg,#dcecf4,#a9cde1 54%,#f6ede3);
  color:var(--navy);text-decoration:none;
}
.hero-copy{position:relative;z-index:2;max-width:74%}
.hero-title{margin:7px 0 13px;font:34px/1.0 Georgia,serif}
.hero-art{position:absolute;inset:0;z-index:1;width:100%;height:100%;pointer-events:none}

/* ---------- плитки разделов ---------- */
.tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.tiles-4{grid-template-columns:repeat(4,1fr)}
.tile{min-height:118px;display:flex;flex-direction:column;justify-content:space-between;
  color:var(--navy);text-decoration:none}
.tile h3{margin-top:14px;font:600 16px Inter,sans-serif}
.tile .subtitle{font-size:12px}

/* ---------- промо (интенсив, Premium) ---------- */
.promo{position:relative;overflow:hidden;color:#fff;
  background:linear-gradient(135deg,#b97850,#8e5537);text-decoration:none;display:block}
.promo .eyebrow{color:#f9e7db}
.promo .btn-ghost{background:#fffdf9;border-color:transparent;color:var(--caramel-ink)}

/* ---------- формы ---------- */
.field{width:100%;padding:14px 16px;border:1px solid #dfe8eb;border-radius:22px;background:#fff;
  font:15px Inter,sans-serif;color:var(--navy);outline:none}
.field::placeholder{color:#8fa1ad}
/* Явные цвета текстовых полей на всех экранах — не зависят от тёмной темы
   телефона (-webkit-text-fill-color перебивает системный цвет текста в
   WebKit). Чекбоксы и радиокнопки не трогаем — у них своё оформление. */
input:not([type="checkbox"]):not([type="radio"]),textarea{
  color:#16324a;-webkit-text-fill-color:#16324a;caret-color:#16324a;background-color:#ffffff;opacity:1}
input::placeholder,textarea::placeholder{color:#8fa1ad;-webkit-text-fill-color:#8fa1ad;opacity:1}
textarea.field{min-height:130px;resize:none;line-height:1.5}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{min-height:42px;padding:0 15px;border:1px solid #dce5e9;border-radius:999px;background:#fff;
  color:var(--navy);font:600 14px Inter,sans-serif;cursor:pointer}
.chip.on{color:#fff;border-color:transparent;background:linear-gradient(135deg,var(--caramel-2),var(--caramel))}
.note{padding:14px;border-radius:var(--r-sm);background:#e9f2f6;color:#546c7f;font-size:12.5px;line-height:1.45}

/* ---------- списки (профиль, настройки) ---------- */
.settings{padding:5px 18px}
.setting{display:flex;align-items:center;gap:12px;min-height:66px;border-bottom:1px solid var(--hairline);
  color:var(--navy);text-decoration:none}
.setting:last-child{border-bottom:0}
.setting > .grow{flex:1}
.avatar{display:grid;place-items:center;width:78px;height:78px;border:3px solid #fff;border-radius:50%;
  background:linear-gradient(145deg,#e6f3f8,#b9d4e3);box-shadow:var(--shadow);font:34px Georgia,serif}

/* ---------- календарь ---------- */
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-top:14px}
.day,.wd{display:grid;place-items:center;aspect-ratio:1;font-size:12.5px;cursor:pointer}
.wd{font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);cursor:default}
.day.selected{border-radius:50%;color:#fff;background:var(--caramel);box-shadow:0 0 0 5px rgba(169,104,67,.1)}
.day.dim{color:#a9b8c2}
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px}
.fact{padding:10px 5px;border-radius:15px;background:#f2f7f8;text-align:center;font-size:12.5px}
.fact small{display:block;margin-bottom:4px;color:var(--muted)}

/* ---------- тарифы и преимущества ---------- */
.plans{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.plan{position:relative;text-align:center}
.plan.selected{border:2px solid var(--caramel);background:#fff8f1}
.plan h3{font:600 14px Inter,sans-serif}
.price{margin:13px 0 3px;font:700 30px Inter,sans-serif}
.badge{display:inline-flex;padding:7px 12px;border-radius:999px;background:#f3e5d8;
  color:var(--caramel-ink);font-size:10px;letter-spacing:.06em}
.save{position:absolute;right:12px;top:-12px;padding:6px 10px;border-radius:999px;
  background:var(--caramel);color:#fff;font-size:9.5px}
.benefits{display:grid;gap:14px;margin-top:14px}
.benefit{display:flex;align-items:flex-start;gap:11px;font-size:13px;line-height:1.4}
.check{display:grid;place-items:center;flex:0 0 auto;width:25px;height:25px;border-radius:50%;
  background:#e5f1f6;color:var(--caramel)}

/* ---------- состояния загрузки (защита от мигания статуса) ----------
   Реальный контент скрыт в разметке, до ответа сервера виден только лоадер. */
.loading-text,.error-text{padding:18px;text-align:center;color:var(--muted);font-size:14px}

/* ---------- нижняя навигация: 5 вкладок ---------- */
.nav{
  position:fixed;z-index:20;left:14px;right:14px;bottom:calc(10px + var(--safe-b));
  display:grid;grid-template-columns:repeat(5,1fr);min-height:72px;padding:7px;
  border:1px solid #fff;border-radius:26px;background:rgba(255,253,249,.88);
  box-shadow:0 18px 42px rgba(73,105,124,.17);
  backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
}
.nav a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  border-radius:18px;color:var(--muted);text-decoration:none;font-size:9.5px}
.nav a.active{color:var(--caramel-ink);background:#f5e7da}
.nav-ico{width:22px;height:22px;background:currentColor;
  -webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-size:22px;mask-size:22px}
/* иконки-маски: меняются только здесь, в HTML остаётся один <i class="nav-ico ..."> */
.ic-home{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10.5 12 4l8 6.5V19a1 1 0 0 1-1 1h-4.5v-5.5h-5V20H5a1 1 0 0 1-1-1z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10.5 12 4l8 6.5V19a1 1 0 0 1-1 1h-4.5v-5.5h-5V20H5a1 1 0 0 1-1-1z'/%3E%3C/svg%3E")}
.ic-chart{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3Ccircle cx='12' cy='12' r='3.5'/%3E%3Cpath d='M12 4v4.5M12 15.5V20M4 12h4.5M15.5 12H20'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3Ccircle cx='12' cy='12' r='3.5'/%3E%3Cpath d='M12 4v4.5M12 15.5V20M4 12h4.5M15.5 12H20'/%3E%3C/svg%3E")}
.ic-ai{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linejoin='round'%3E%3Cpath d='M12 3.5l1.6 5.6 5.4 2.9-5.4 2.9L12 20.5l-1.6-5.6L5 12l5.4-2.9z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linejoin='round'%3E%3Cpath d='M12 3.5l1.6 5.6 5.4 2.9-5.4 2.9L12 20.5l-1.6-5.6L5 12l5.4-2.9z'/%3E%3C/svg%3E")}
.ic-cal{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'%3E%3Crect x='4' y='5.5' width='16' height='14.5' rx='3'/%3E%3Cpath d='M4 10h16M8.5 3.5v4M15.5 3.5v4'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'%3E%3Crect x='4' y='5.5' width='16' height='14.5' rx='3'/%3E%3Cpath d='M4 10h16M8.5 3.5v4M15.5 3.5v4'/%3E%3C/svg%3E")}
.ic-user{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8.5' r='3.5'/%3E%3Cpath d='M5 20c1.2-3.6 4-5.2 7-5.2s5.8 1.6 7 5.2'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8.5' r='3.5'/%3E%3Cpath d='M5 20c1.2-3.6 4-5.2 7-5.2s5.8 1.6 7 5.2'/%3E%3C/svg%3E")}

@media(min-width:700px){
  .nav{left:50%;width:min(700px,calc(100% - 28px));transform:translateX(-50%)}
  .tiles-4{grid-template-columns:repeat(4,1fr)}
}