/* Дизайн «Подарочные карты»: тёплый тёмный, янтарный акцент, товары — как настоящие подарочные карты.
   Подключается поверх theme.css + shop.css / admin.css / app.css. data-ui на <html>: shop | admin | app. */

@font-face { font-family: "Onest"; src: url("/static/fonts/onest.woff") format("woff"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Unbounded"; src: url("/static/fonts/unbounded.woff") format("woff"); font-weight: 600 700; font-display: swap; }

:root {
  --bg: #15120f;
  --surface: #1e1a16;
  --surface-2: #27221c;
  --text: #f3ede4;
  --muted: #b3a898;
  --border: #322b24;
  --accent: #f2a93b;
  --accent-soft: #3a2c14;
  --primary: #f2a93b;
  --primary-text: #1a1208;
  --ok: #7fd892;
  --ok-soft: #1b3322;
  --warn: #f2a93b;
  --warn-soft: #3a2c14;
  --err: #ff8a6b;
  --err-soft: #43201a;
  --radius: 20px;
  --shadow: none;
  --focus: 0 0 0 3px rgb(242 169 59 / 45%);
  --font: "Onest", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --display: "Unbounded", "Onest", system-ui, sans-serif;
  color-scheme: dark;
}
:root[data-theme="light"] {
  --bg: #faf6f0;
  --surface: #ffffff;
  --surface-2: #f4ece1;
  --text: #231c14;
  --muted: #6b5f50;
  --border: #e7dccc;
  --accent: #9a5b06;
  --accent-soft: #fbebd0;
  --primary: #f2a93b;
  --primary-text: #1a1208;
  --ok: #1e7a3c;
  --ok-soft: #e3f3e6;
  --warn: #9a5b06;
  --warn-soft: #fbebd0;
  --err: #b93815;
  --err-soft: #fbe7df;
  --shadow: 0 1px 2px rgb(35 28 20 / 6%), 0 4px 14px rgb(35 28 20 / 6%);
  --focus: 0 0 0 3px rgb(154 91 6 / 30%);
  color-scheme: light;
}

/* ---------- общее: кнопки-«пилюли», крупные скругления ---------- */
.btn { border-radius: 999px; }
.btn.sm { border-radius: 999px; }
.badge { border-radius: 999px; }

/* ---------- подарочные карты (сайт и мини-апп) ---------- */
.face-0 { --face: #1b2838; }
.face-1 { --face: #2e5fa8; }
.face-2 { --face: #8e1e22; }
.face-3 { --face: #1f6b33; }
.face-4 { --face: #5b3a8c; }
.face-5 { --face: #8c5a10; }
.gcard {
  background-image: none;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 9%);
  border-radius: 16px;
}
.gcard::after {
  content: ""; position: absolute; right: -34px; top: -34px; width: 132px; height: 132px; border-radius: 50%;
  border: 22px solid rgb(255 255 255 / 8%); pointer-events: none;
}
.gcard .region { background: rgb(255 255 255 / 16%); border-radius: 999px; }
.gcard.big { border-radius: 24px; }
.gcard.big::after { width: 220px; height: 220px; right: -60px; top: -60px; border-width: 34px; }
.tile .price, .p-price, .wallet .sum { color: var(--text); }

/* ---------- сайт ---------- */
[data-ui="shop"] body { font-family: var(--font); }
[data-ui="shop"] .logo::after { content: "."; color: var(--primary); }
[data-ui="shop"] .mainnav a { border-radius: 999px; }
[data-ui="shop"] .mainnav a.on { background: var(--text); color: var(--bg); }
[data-ui="shop"] .cats a { padding: 10px 18px; font-weight: 600; }
[data-ui="shop"] .cats a:hover { background: var(--text); color: var(--bg); border-color: var(--text); }
[data-ui="shop"] .panel { border-radius: 24px; }
[data-ui="shop"] input[type=text], [data-ui="shop"] input[type=email], [data-ui="shop"] input[type=password],
[data-ui="shop"] input[type=number], [data-ui="shop"] textarea { border-radius: 14px; }
[data-ui="shop"] .choice span { border-radius: 16px; }
[data-ui="shop"] .balance-pill { background: var(--surface); }
[data-ui="shop"] h1 { font-weight: 700; }

/* ---------- мини-апп ---------- */
[data-ui="app"] .chip.on { background: var(--text); color: var(--bg); border-color: var(--text); }
[data-ui="app"] .chip { height: 38px; padding: 0 16px; font-weight: 600; }
[data-ui="app"] .panel, [data-ui="app"] .rows { border-radius: 20px; }
[data-ui="app"] .search input { border-radius: 999px; }
[data-ui="app"] .tabs a.on svg { stroke: var(--primary); }
[data-ui="app"] .choice span { border-radius: 16px; }

/* ---------- админка ---------- */
[data-ui="admin"] body { font-family: var(--font); }
[data-ui="admin"] h1 { font-family: var(--display); font-weight: 700; letter-spacing: -0.01em; }
[data-ui="admin"] .brand { font-family: var(--display); }
[data-ui="admin"] .side, [data-ui="admin"] .mbar { background: var(--bg); }
[data-ui="admin"] .nav a { border-radius: 999px; padding: 0 14px; }
[data-ui="admin"] .nav a.on { background: var(--text); color: var(--bg); }
[data-ui="admin"] .count { background: var(--primary); color: var(--primary-text); }
[data-ui="admin"] .nav a.on .count { background: var(--bg); color: var(--text); }
[data-ui="admin"] .btn { background: var(--primary); color: var(--primary-text); }
[data-ui="admin"] .btn.ghost { background: transparent; color: var(--text); }
[data-ui="admin"] .btn.danger { background: transparent; color: var(--err); }
[data-ui="admin"] .card, [data-ui="admin"] .stat { border-radius: 20px; }
[data-ui="admin"] .stat .v { font-family: var(--display); font-weight: 700; font-size: 20px; }
[data-ui="admin"] .stats .stat:first-child { background: var(--primary); border-color: var(--primary); color: var(--primary-text); }
[data-ui="admin"] .stats .stat:first-child .k, [data-ui="admin"] .stats .stat:first-child .s { color: var(--primary-text); opacity: .8; }
[data-ui="admin"] .tabs a { border-radius: 999px; }
[data-ui="admin"] .tabs a.on { background: var(--text); color: var(--bg); }
[data-ui="admin"] input[type=text], [data-ui="admin"] input[type=password], [data-ui="admin"] input[type=number],
[data-ui="admin"] input[type=search], [data-ui="admin"] select, [data-ui="admin"] textarea { border-radius: 12px; }
[data-ui="admin"] .pager a, [data-ui="admin"] .pager span, [data-ui="admin"] .per a, [data-ui="admin"] .per b { border-radius: 999px; }
[data-ui="admin"] .pager span, [data-ui="admin"] .per b { background: var(--text); color: var(--bg); }
[data-ui="admin"] .flash { border-radius: 14px; }