:root {
  /* Палитра — один в один с лендингом (site_dist/index.html): тёплый чёрный + золото. */
  --bg-0: #0A0908;
  --bg-1: #14110D;
  --bg-2: #1E1912;
  --bg-3: #2A2318;
  --bg-4: #362D1F;
  --border: rgba(242,237,228,.14);
  --text-0: #F2EDE4;
  --text-1: #C6BFB2;
  --text-2: #9B9388;
  --accent: #B89A68;
  --accent-light: #CBAE7C;
  --blue: #B89A68;    /* было отдельным синим — сведено к золоту бренда, второго акцента у лендинга нет */
  --green: #8FAE86;   /* success, приглушённый шалфейный — гармонично тёплой тёмной палитре */
  --red: #C17A6B;      /* error, терракотовый вместо ядовитого красного */

  /* Шкала кегля — низ поднят сильнее верха: мелкий текст был нечитаем, крупный уже был в порядке. */
  --fs-2xs: 11px;  /* было 10 — .badge */
  --fs-xs: 12px;   /* было 11 — label, .stat .l, .when */
  --fs-sm: 13px;   /* было 12 — .ref-box, .desc, .pill, li */
  --fs-md: 14px;   /* было 13 — .sub, .row, .msg, button, footer-link, .history-item */
  --fs-base: 15px; /* было 14 — .product-desc, textarea */
  --fs-lg: 16px;   /* было 15 — input/select, .perfume .name */
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg-0);
  color: var(--text-1);
  font-family: 'Jost', 'Helvetica Neue', Helvetica, sans-serif;
  font-weight: 300;
}

.wrap {
  max-width: 420px;
  margin: 0 auto;
  padding: 24px 18px 60px;
  min-height: 100vh;
}

.logo {
  text-align: center;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 300;
  font-size: 26px;
  color: var(--accent);
  letter-spacing: .28em;
  text-transform: uppercase;
  margin: 12px 0 28px;
}

.card {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 20px;
  margin-bottom: 16px;
}

h1 { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 300; font-size: 22px; color: var(--text-0); margin: 0 0 4px; }
h2 { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 300; font-size: 18px; color: var(--text-0); margin: 0 0 12px; }
.sub { color: var(--text-2); font-size: var(--fs-md); margin: 0 0 18px; }

label { display: block; font-size: var(--fs-xs); font-weight: 300; letter-spacing: .1em; text-transform: uppercase; color: var(--text-2); margin: 14px 0 6px; }
label:first-child { margin-top: 0; }

input, select {
  width: 100%;
  padding: 12px 14px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-0);
  font-family: inherit;
  font-size: var(--fs-lg);
}
input:focus, select:focus { outline: none; border-color: var(--accent); }

button {
  width: 100%;
  min-height: 46px;
  padding: 13px;
  margin-top: 20px;
  border: 1px solid var(--accent);
  border-radius: 999px;
  background: var(--accent);
  color: var(--bg-0);
  font-family: inherit;
  font-weight: 400;
  font-size: var(--fs-md);
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .3s ease, border-color .3s ease, color .3s ease;
}
button:hover { background: var(--accent-light); border-color: var(--accent-light); }
button:active { opacity: 0.85; }
button.secondary { background: transparent; color: var(--text-0); border-color: var(--border); }
button.secondary:hover { background: var(--bg-2); border-color: var(--border); }
button.link {
  width: auto;
  background: none;
  border: none;
  color: var(--accent);
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  padding: 4px 0;
  margin: 8px 0 0;
}
button.link:hover { background: none; color: var(--accent-light); }

.row { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 5px 0; font-size: var(--fs-md); color: var(--text-2); }
.row b { color: var(--text-0); font-weight: 500; }
.button-row { display: flex; gap: 10px; }
.button-row button { margin-top: 10px; }

.msg { font-size: var(--fs-md); margin-top: 12px; padding: 10px 12px; border-radius: 6px; display: none; }
.msg.error { display: block; background: rgba(193,122,107,0.14); color: var(--red); }
.msg.ok { display: block; background: rgba(143,174,134,0.14); color: var(--green); }

.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 4px; }
.stat { background: var(--bg-2); border-radius: 6px; padding: 12px; }
.stat .v { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 22px; font-weight: 400; color: var(--text-0); }
.stat .l { font-size: var(--fs-xs); color: var(--text-2); margin-top: 2px; }

.ref-box {
  background: var(--bg-2);
  border-radius: 6px;
  padding: 12px;
  font-size: var(--fs-sm);
  word-break: break-all;
  color: var(--accent-light);
}

.footer-link { text-align: center; margin-top: 8px; }
.footer-link a, .footer-link button.link { color: var(--text-2); font-size: var(--fs-md); }

.channel-btns { display: flex; gap: 10px; }
.channel-btns button { margin-top: 12px; }

.hidden { display: none !important; }

.badge {
  display: inline-block;
  font-size: var(--fs-2xs);
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(184,154,104,0.15);
  color: var(--accent-light);
}

/* --- вкладки ЛК (Кабинет/Депозит/Магазин/История) — как в мини-аппе --- */
body.has-tabs .wrap { padding-bottom: 76px; }
.tabs {
  position: fixed; bottom: 0; left: 0; right: 0;
  background: var(--bg-1); border-top: 1px solid var(--border);
  display: flex; padding: 8px 8px 18px; z-index: 5;
  max-width: 420px; margin: 0 auto;
}
.tabs .tab { flex: 1; text-align: center; padding: 6px; color: var(--text-2); font-size: var(--fs-xs); letter-spacing: .04em; text-transform: uppercase; cursor: pointer; }
.tabs .tab.active { color: var(--accent); }
.tabs .tab .icon { font-size: 20px; display: block; margin-bottom: 2px; }

.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }

.deposit-card {
  background: var(--bg-2); border: 1px solid var(--border); border-radius: 6px;
  padding: 14px; text-align: center; cursor: pointer; transition: border-color .2s ease, background .2s ease;
}
.deposit-card:hover { border-color: var(--accent); }
.deposit-card.selected { border-color: var(--accent); background: rgba(184,154,104,0.08); }
.deposit-card .pv { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 26px; color: var(--accent); font-weight: 400; }
.deposit-card .price { font-size: var(--fs-base); color: var(--text-0); margin-top: 4px; }
.deposit-card .label { font-size: var(--fs-xs); color: var(--text-2); margin-top: 4px; }

.perfume {
  background: var(--bg-1); border: 1px solid var(--border); border-radius: 6px;
  padding: 12px 14px; margin-top: 10px; cursor: pointer; transition: border-color .2s ease;
}
.perfume:active { border-color: var(--accent); }
.perfume .top { display: flex; gap: 10px; }
.perfume .photo { width: 56px; height: 56px; border-radius: 6px; object-fit: cover; background: var(--bg-2); flex-shrink: 0; }
.perfume .name { font-weight: 500; font-size: var(--fs-lg); color: var(--text-0); }
.perfume .desc { color: var(--text-2); font-size: var(--fs-sm); margin: 4px 0; }
.perfume .desc.clamped { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.perfume .desc-toggle { color: var(--accent); font-size: var(--fs-sm); cursor: pointer; display: inline-block; margin-top: 2px; }
.perfume .price { color: var(--accent); font-weight: 500; }
.perfume .buy-btn { width: auto; margin: 0; padding: 8px 14px; }

.history-item { background: var(--bg-1); border: 1px solid var(--border); border-radius: 6px; padding: 10px 12px; margin-top: 8px; font-size: var(--fs-md); color: var(--text-1); }
.history-item .when { color: var(--text-2); font-size: var(--fs-xs); }
.history-item .amt { color: var(--green); font-weight: 500; float: right; }

.modal { position: fixed; inset: 0; background: rgba(10,9,8,.82); display: flex; align-items: flex-end; justify-content: center; z-index: 30; }
.modal .box { width: 100%; max-width: 420px; background: var(--bg-1); padding: 20px; border-radius: 10px 10px 0 0; max-height: 90vh; overflow-y: auto; }
.modal .close { float: right; cursor: pointer; color: var(--text-2); }
.modal h2 { margin-top: 0; }

.delivery-terms-title { font-weight: 500; font-size: var(--fs-md); margin-bottom: 4px; color: var(--text-0); }
.delivery-terms ul { margin: 0; padding-left: 18px; }
.delivery-terms li { color: var(--text-2); font-size: var(--fs-sm); line-height: 1.4; margin: 4px 0; }

.search-box { margin-top: 10px; }

.ext-id { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 30px; letter-spacing: .1em; color: var(--accent); font-weight: 400; }
.pill { display: inline-block; padding: 2px 10px; border-radius: 999px; background: var(--bg-2); font-size: var(--fs-sm); color: var(--text-2); }
.pill.green { background: rgba(143,174,134,.16); color: var(--green); }
.pill.red { background: rgba(193,122,107,.16); color: var(--red); }

.seg { display: flex; gap: 4px; background: var(--bg-2); border-radius: 999px; padding: 4px; margin-top: 8px; }
.seg button { flex: 1; margin: 0; padding: 8px; background: transparent; border: none; color: var(--text-2); font-weight: 400; border-radius: 999px; }
.seg button.active { background: var(--accent); color: var(--bg-0); }

.product-photo-wrap { position: relative; margin: -20px -20px 0; }
.product-hero { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; border-radius: 10px 10px 0 0; background: var(--bg-2); }
.product-hero-empty { display: flex; align-items: center; justify-content: center; font-size: 64px; }
.product-photo-wrap .close { position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; border-radius: 50%; background: rgba(10,9,8,.6); color: var(--text-0); display: flex; align-items: center; justify-content: center; font-size: 15px; }
.product-name { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 22px; font-weight: 400; margin-top: 14px; color: var(--text-0); }
.product-price { color: var(--accent); font-weight: 500; font-size: 22px; margin-top: 6px; }
.product-desc { color: var(--text-1); font-size: var(--fs-base); line-height: 1.6; margin-top: 10px; white-space: pre-wrap; }
textarea {
  width: 100%; padding: 12px 14px; background: var(--bg-2); border: 1px solid var(--border);
  border-radius: 6px; color: var(--text-0); font-size: var(--fs-base); font-family: inherit; resize: vertical; min-height: 60px;
}