:root { --bg:#fff; --ink:#231d20; --mute:#7b7075; --line:#f0e4e1; --tint:#fff6f3; --accent:#c8465f; --accent-h:#b13a52; color-scheme:light; }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font:16px/1.6 ui-rounded,"Segoe UI",system-ui,-apple-system,sans-serif; }
a { color:inherit; }
h1,h2 { line-height:1.2; letter-spacing:-.01em; }
:focus-visible { outline:3px solid var(--accent); outline-offset:3px; }

header { display:flex; align-items:center; gap:16px; padding:12px 32px; background:rgba(255,255,255,.92); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:5; backdrop-filter:blur(8px); }
.brand { display:flex; align-items:center; gap:12px; margin-right:auto; text-decoration:none; font-weight:700; font-size:18px; }
.brand img { border-radius:50%; display:block; }
nav { display:flex; align-items:center; gap:22px; }
nav a { text-decoration:none; font-weight:600; }
nav a:not(.btn):hover { color:var(--accent); }
nav form { margin:0; }

.btn { display:inline-block; border:0; border-radius:99px; background:var(--accent); color:#fff !important; font-family:inherit; font-weight:700; font-size:15px; line-height:1; padding:13px 24px; cursor:pointer; text-decoration:none; transition:background .15s; }
.btn:hover { background:var(--accent-h); }
.btn.full { width:100%; padding:16px; font-size:16px; text-align:center; }
.btn.ghost { background:#fff; color:var(--accent) !important; border:1.5px solid var(--accent); }
.btn.ghost:hover { background:var(--tint); }
.btn:disabled { opacity:.6; cursor:wait; }
.link { background:none; border:0; padding:0; font:inherit; color:var(--accent); text-decoration:underline; cursor:pointer; }
.link.danger { color:#b3261e; }

main { max-width:1160px; margin:0 auto; padding:8px 32px 60px; }
.page-head { display:flex; align-items:flex-end; justify-content:space-between; margin:36px 0 8px; }
.page-head h1 { margin:0 0 8px; font-size:38px; }
.row { padding:30px 0; }
.row + .row { border-top:1px solid var(--line); }
.row h2 { display:flex; align-items:center; gap:10px; margin:0 0 18px; font-size:24px; }
.cards { display:flex; gap:24px; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:8px; }
.card { flex:none; width:250px; scroll-snap-align:start; text-decoration:none; }
.card b { display:block; margin-top:12px; font-size:17px; }
.card span { display:block; color:var(--mute); font-size:14px; }
.card em { font-style:normal; font-weight:700; color:var(--accent); }
.card:hover b { color:var(--accent); }

.cover { aspect-ratio:4/3; border-radius:22px; display:flex; align-items:center; justify-content:center; overflow:hidden; background:color-mix(in srgb, var(--c1,#f37f8a) 16%, #fff) center/cover no-repeat; }
.cover .cat { width:46%; }
.cover.big { aspect-ratio:3/2; max-width:520px; margin:0 auto 28px; }

.cat { display:block; }
.cat.paw { width:22px; height:22px; flex:none; color:var(--accent); }
.cat.peek { width:120px; }
.cat.face { width:110px; }
.empty { text-align:center; padding:60px 20px; }
.empty .cat { margin:0 auto 16px; }

.narrow { max-width:600px; margin:0 auto; padding:40px 24px; }
.narrow.wide { max-width:760px; }
.narrow h1 { font-size:32px; margin:0 0 24px; }
.narrow > .peek { margin:0 0 -2px 36px; position:relative; z-index:1; }
.box { background:#fff; border:1.5px solid var(--line); border-radius:26px; padding:32px; max-width:520px; margin:0 auto; }
.narrow .box { max-width:none; }
.err { background:#fdecee; color:#9b2238; border-radius:14px; padding:10px 14px; margin:0 0 16px; }
.center { text-align:center; color:var(--mute); margin:18px 0 0; }
.muted { color:var(--mute); font-size:14px; }

label.f { display:block; font-size:14px; font-weight:600; margin-bottom:6px; }
input[type=text], input[type=email], input[type=password], input[type=url], input[type=number], textarea, select { width:100%; padding:14px 16px; border:1.5px solid var(--line); border-radius:14px; background:#fff; color:var(--ink); font:inherit; margin-bottom:16px; }
input:focus, textarea:focus, select:focus { border-color:var(--accent); outline:none; }
input[type=file] { margin-bottom:16px; max-width:100%; }
.chk { display:flex; gap:10px; align-items:flex-start; margin-bottom:16px; font-size:15px; }
.chk input { margin-top:5px; accent-color:var(--accent); }
.langs { border:0; padding:0; margin:0 0 8px; }
.langs legend { padding:0; margin-bottom:8px; }
.promo-row { display:flex; gap:8px; align-items:flex-start; }
.promo-row input { margin:0; flex:1; }
.promo-row .btn { white-space:nowrap; }
#pmsg { min-height:1.4em; margin:8px 0 12px; }

.order { display:grid; grid-template-columns:1fr 1fr; min-height:calc(100vh - 70px); }
.order .l { padding:44px 40px; text-align:center; }
.order .l h1 { font-size:clamp(26px,3.4vw,38px); margin:0 0 24px; }
.descr { max-width:52ch; margin:0 auto; white-space:pre-line; }
.order .r { background:var(--tint); padding:44px 40px; }
.order .r h2 { text-align:center; font-size:30px; margin:0 0 26px; }
.price { text-align:center; font-size:24px; font-weight:700; margin-bottom:16px; }
.price s { color:var(--mute); font-size:16px; font-weight:400; margin-left:8px; }

.admin-bar { display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between; align-items:center; margin:24px 0; }
.admin-bar h1 { margin:0; font-size:28px; }
.tbl-wrap { overflow-x:auto; }
.tbl { width:100%; border-collapse:collapse; }
.tbl th, .tbl td { text-align:left; padding:12px 10px; border-bottom:1px solid var(--line); }
.acts { display:flex; gap:14px; align-items:center; white-space:nowrap; }
.acts form { margin:0; }
.two { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.thumb { display:block; max-width:220px; border-radius:14px; margin-bottom:10px; }
.cat-item { margin-top:16px; }
.cat-row { display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.cat-row input[type=text] { flex:1; min-width:160px; margin:0; }
.cat-row input[type=number], .cat-row input[type=color] { margin:0; }
.cat-row label { display:flex; gap:6px; align-items:center; }
.cat-item form + form { margin-top:10px; display:flex; gap:14px; align-items:center; }

footer { display:flex; align-items:center; justify-content:center; gap:10px; margin-top:40px; padding:28px; border-top:1px solid var(--line); color:var(--mute); font-size:14px; }

@media (max-width:820px) {
  header { padding:10px 16px; }
  nav { gap:14px; }
  .brand span { font-size:15px; }
  main { padding:8px 16px 40px; }
  .page-head h1 { font-size:30px; }
  .cat.peek { width:90px; }
  .order { grid-template-columns:1fr; }
  .order .l, .order .r { padding:28px 18px; }
  .two { grid-template-columns:1fr; }
}

/* Тёплая палитра */
:root { --bg:#fbece6; --surface:#fffaf7; --tint:#f8dcd3; --line:#efd3c9; --ink:#3a2530; --mute:#6f5560; --accent:#b93c55; --accent-h:#a23049; --sky:#5aa9b8; }
body { background:var(--bg) linear-gradient(180deg,#fbdccf 0,var(--bg) 420px) no-repeat; }
header { background:rgba(251,236,230,.92); }
.btn.ghost, .box, input[type=text], input[type=email], input[type=password], input[type=url], input[type=number], textarea, select { background:var(--surface); }
.btn.ghost:hover { background:var(--tint); }
.cover { background:color-mix(in srgb, var(--c1,#f37f8a) 22%, var(--surface)) center/cover no-repeat; }
.cat.paw { color:var(--sky); }
footer { background:var(--tint); border-top:0; }
.err { background:#fbd9de; color:#8c1f35; }
/* Шрифт заголовков */
h1, h2, .card b { font-family: "Playfair Display", Georgia, "Times New Roman", serif; font-weight: 700; letter-spacing: 0; }
.card b { font-size: 18px; }

/* Объём и тени */
header { border-bottom: 0; box-shadow: 0 8px 24px -14px rgba(120, 40, 60, .35); }
.btn { box-shadow: 0 10px 20px -10px rgba(185, 60, 85, .7); transition: background .15s, transform .15s, box-shadow .15s; }
.btn:hover { transform: translateY(-1px); box-shadow: 0 14px 24px -10px rgba(185, 60, 85, .75); }
.btn.ghost, .btn:disabled { box-shadow: none; }

.cover { box-shadow: 0 16px 32px -14px rgba(185, 60, 85, .45), 0 3px 8px rgba(58, 37, 48, .08); }
.cover .cat { filter: drop-shadow(0 6px 8px rgba(58, 37, 48, .18)); }
.cover.big { box-shadow: 0 30px 56px -22px rgba(185, 60, 85, .5), 0 4px 12px rgba(58, 37, 48, .1); }
.card { transition: transform .2s; }
.card:hover { transform: translateY(-4px); }
.card:hover .cover { box-shadow: 0 22px 38px -14px rgba(185, 60, 85, .55), 0 3px 8px rgba(58, 37, 48, .08); }

/* Страница курса: описание и заказ разделены */
.order .r { background: #f4cfc4; border-left: 1px solid #e8b9ad; box-shadow: inset 14px 0 28px -18px rgba(120, 40, 60, .3); }
.order .r .box { position: sticky; top: 92px; box-shadow: 0 30px 60px -24px rgba(120, 40, 60, .45), 0 6px 16px rgba(58, 37, 48, .1); }

/* Формы: вход, регистрация, админка */
.box { background: linear-gradient(180deg, #fffdfb, var(--surface)); box-shadow: 0 30px 60px -26px rgba(120, 40, 60, .4), 0 6px 16px rgba(58, 37, 48, .08); }
input[type=text], input[type=email], input[type=password], input[type=url], input[type=number], textarea, select { box-shadow: inset 0 2px 4px rgba(58, 37, 48, .06); }
input:focus, textarea:focus, select:focus { box-shadow: 0 0 0 4px rgba(185, 60, 85, .15); }

@media (max-width: 820px) {
  .order .r { border-left: 0; border-top: 1px solid #e8b9ad; box-shadow: inset 0 14px 28px -18px rgba(120, 40, 60, .3); }
  .order .r .box { position: static; }
}
/* Не обрезать карточки при наведении */
.cards { padding: 14px 10px 34px; margin: -14px -10px -14px; scroll-padding-inline: 10px; }

/* Коричневый вместо чёрного */
:root { --ink: #5a3a32; --mute: #7d5f57; }
h1, h2, .card b, .brand { color: var(--ink); }
input, textarea, select { color: var(--ink); }
::placeholder { color: #a98f86; opacity: 1; }
.cat [stroke] { stroke: var(--ink); }
.cat ellipse[fill="#2b2326"] { fill: var(--ink); }
.box, .row, footer { position: relative; }
.perch { position: absolute; bottom: 100%; margin-bottom: -2px; z-index: 1; pointer-events: none; }
.cat.sit { width: 84px; }
.cat.loaf { width: 130px; }
.row-cat { right: 32px; }
.p-right { right: 30px; }
.f-right { right: 8%; }
.ledge { width: 150px; height: 6px; border-radius: 3px; background: var(--line); margin: -2px auto 18px; }
.empty .cat.sit { width: 100px; margin: 0 auto; }

/* котик на странице каталога стоит лапками на линии */
.page-head { border-bottom: 2px solid var(--line); }
.page-head h1 { margin: 0 0 14px; }
.page-head .peek { margin-bottom: -2px; }
@media (max-width: 820px) { .cat.loaf { width: 100px; } .row-cat { right: 16px; } }
.langsw { display: flex; gap: 6px; margin-left: 12px; }
.langsw a { text-decoration: none; padding: 4px 10px; border-radius: 99px; font-weight: 700; font-size: 13px; color: var(--mute); }
.langsw a:hover { background: var(--tint); }
.langsw a.on { background: var(--accent); color: #fff; }
.lang-overlay { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(58, 37, 48, .5); backdrop-filter: blur(4px); }
.lang-box { width: 100%; max-width: 420px; padding: 32px 28px; text-align: center; background: var(--surface); border-radius: 28px; box-shadow: 0 40px 80px -30px rgba(58, 37, 48, .6); }
.lang-box .cat { margin: 0 auto 12px; }
.lang-box h2 { margin: 0 0 20px; font-size: 24px; }
.lang-btns { display: grid; gap: 10px; }
.lang-btns .btn { padding: 15px; font-size: 16px; }
.badge { display: inline-block; margin-top: 4px; padding: 2px 10px; border-radius: 99px; background: var(--tint); color: var(--accent); font-size: 12px; font-weight: 700; }
.tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.tabs a { padding: 6px 14px; border-radius: 99px; text-decoration: none; font-weight: 600; font-size: 14px; background: var(--tint); }
.tabs a.on { background: var(--accent); color: #fff; }
.cat-row select { width: auto; margin: 0; padding: 10px 12px; }
.order .l h1 { margin-bottom: 8px; }
.subtitle { margin: 0 0 26px; font-size: 16px; font-weight: 300; letter-spacing: .02em; color: var(--mute); }
.card span { font-size: 13px; font-weight: 300; }