/* Оформление согласовано с каталогом на 95.163.176.88/helpermanagergoldshell:
   те же переменные палитры, шрифты Satoshi/Boska, радиусы и тёплые тени.
   Пользователь переходит сюда прямо оттуда — переход не должен ощущаться
   как попадание на другой сайт. */

:root {
  --text-xs: clamp(.75rem, .7rem + .25vw, .875rem);
  --text-sm: clamp(.875rem, .8rem + .35vw, 1rem);
  --text-base: clamp(1rem, .95rem + .25vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1rem + .75vw, 1.5rem);
  --text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem);

  --bg: #f6efe8;
  --surface: #fcf7f2;
  --surface-2: #f3e6da;
  --ink: #241914;
  --muted: #7d6254;
  --primary: #bc7046;
  --primary-2: #d8b298;
  --danger: #a33a28;
  --ok: #4a7c52;

  --line: rgba(188, 112, 70, .10);
  --shadow-sm: 0 10px 30px rgba(109, 72, 45, .08);
  --shadow-md: 0 18px 40px rgba(109, 72, 45, .10);
  --shadow-lg: 0 26px 52px rgba(109, 72, 45, .16);
  --ease: 340ms cubic-bezier(.16, 1, .3, 1);

  --font-body: 'Satoshi', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Boska', Georgia, 'Times New Roman', serif;

  --radius: 1.35rem;
  --radius-sm: .75rem;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-body);
  background: linear-gradient(180deg,
      rgba(251, 247, 243, .92) 0%,
      rgba(246, 239, 232, .90) 46%,
      rgba(242, 232, 223, .94) 100%);
  background-attachment: fixed;
  color: var(--ink);
  line-height: 1.55;
}

main { max-width: 900px; margin: 0 auto; padding: 0 1rem 4rem; }

/* --- шапка: липкая, полупрозрачная, как в каталоге --- */
.top {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .9rem 1rem;
  background: rgba(248, 241, 234, .88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255, 255, 255, .55);
}

.brand { display: flex; align-items: center; gap: .85rem; text-decoration: none; color: var(--ink); }

.logo-mark {
  width: 42px; height: 42px; flex: none;
  border-radius: 15px;
  background: linear-gradient(135deg, #cb7f52, #e8c2a3);
  box-shadow: 0 8px 24px rgba(188, 112, 70, .22);
  position: relative;
}
.logo-mark::before {
  content: ''; position: absolute; inset: 8px;
  border-radius: 10px; background: rgba(255, 255, 255, .38);
}

.brand-text strong {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 500;
  line-height: 1.1;
}
.brand-text span {
  font-size: var(--text-xs);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .16em;
}

.top nav { margin-left: auto; display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.top nav a { color: var(--primary); text-decoration: none; font-size: var(--text-sm); }
.top nav a:hover { text-decoration: underline; }
.top .who { color: var(--muted); font-size: var(--text-sm); }

.back {
  padding: .45rem .9rem;
  border-radius: 999px;
  background: rgba(255, 250, 246, .8);
  box-shadow: inset 0 0 0 1px var(--line);
  white-space: nowrap;
  transition: box-shadow var(--ease), transform var(--ease);
}
.back:hover { text-decoration: none !important; transform: translateY(-2px); box-shadow: inset 0 0 0 1px rgba(188, 112, 70, .2), var(--shadow-sm); }

/* --- карточки и формы --- */
.card {
  background: linear-gradient(180deg, rgba(255, 250, 246, .86), rgba(245, 234, 225, .72));
  border-radius: var(--radius);
  box-shadow: var(--shadow-md), inset 0 0 0 1px var(--line);
  padding: 1.35rem 1.5rem;
  margin: 0 0 1.15rem;
}
.card.narrow { max-width: 400px; margin: 3.5rem auto; }
.card h1, .card h2 { margin: 0 0 .85rem; font-family: var(--font-display); font-weight: 500; font-size: var(--text-lg); }

h1 { font-family: var(--font-display); font-weight: 500; font-size: var(--text-xl); margin: 1.4rem 0 1.1rem; line-height: 1.05; }

label { display: block; margin: 0 0 .9rem; font-size: .72rem; text-transform: uppercase; letter-spacing: .16em; color: var(--muted); }
label.check { display: flex; align-items: center; gap: .5rem; text-transform: none; letter-spacing: 0; font-size: var(--text-sm); color: var(--ink); }

input[type=text], input[type=password], input[type=search], input:not([type]) {
  display: block; width: 100%; margin-top: .4rem;
  font: inherit; font-size: max(16px, var(--text-sm));
  padding: .8rem 1rem;
  color: var(--ink);
  background: rgba(255, 251, 247, .8);
  border: none; border-radius: 999px;
  box-shadow: inset 0 0 0 1px var(--line), 0 10px 26px rgba(109, 72, 45, .05);
  outline: none;
}
input:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

button {
  font: inherit; font-size: var(--text-sm);
  padding: .6rem 1.15rem; cursor: pointer;
  color: var(--ink);
  background: rgba(255, 250, 246, .9);
  border: none; border-radius: 999px;
  box-shadow: inset 0 0 0 1px var(--line);
  transition: transform var(--ease), box-shadow var(--ease), background var(--ease);
}
button:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px rgba(188, 112, 70, .2), var(--shadow-sm); }
button:active { transform: translateY(0); }
button.primary { background: linear-gradient(135deg, #cb7f52, #bc7046); color: #fff8f2; box-shadow: 0 12px 28px rgba(188, 112, 70, .28); }
button.primary:hover { box-shadow: 0 18px 38px rgba(188, 112, 70, .34); }
button.danger { color: var(--danger); }
button.link { background: none; box-shadow: none; color: var(--primary); padding: 0; }
button.link:hover { transform: none; text-decoration: underline; }

form.inline { display: inline; }
.grid-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0 1.1rem; align-items: end; }
.grid-form button { margin-bottom: .9rem; }

.muted { color: var(--muted); }
.note { font-size: var(--text-xs); margin: .8rem 0 0; color: var(--muted); }
code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .92em; }

/* --- сообщения --- */
.flashes { margin: 1rem 0 0; }
.flash { padding: .8rem 1.1rem; border-radius: var(--radius-sm); margin: 0 0 .6rem; font-size: var(--text-sm); }
.flash.error { background: rgba(163, 58, 40, .10); color: var(--danger); }
.flash.ok { background: rgba(74, 124, 82, .12); color: var(--ok); }

/* --- поиск --- */
.search-wrap { margin: 1.6rem 0 1.4rem; }
.combo { position: relative; }
#q {
  width: 100%;
  padding: 1.05rem 1.4rem;
  font-size: max(16px, var(--text-base));
  background: rgba(255, 251, 247, .82);
  border: none; border-radius: 999px;
  box-shadow: inset 0 0 0 1px var(--line), 0 14px 34px rgba(109, 72, 45, .07);
  outline: none;
}
.hint { font-size: var(--text-xs); color: var(--muted); margin: .7rem 1.2rem 0; }

.suggest {
  position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + .5rem);
  margin: 0; padding: .4rem; list-style: none; max-height: 350px; overflow-y: auto;
  background: rgba(255, 250, 246, .97);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-radius: 1.1rem;
  box-shadow: var(--shadow-lg), inset 0 0 0 1px var(--line);
}
.suggest li {
  display: flex; justify-content: space-between; gap: 1rem; align-items: baseline;
  padding: .65rem 1rem; border-radius: .85rem; cursor: pointer;
}
.suggest li[aria-selected="true"] { background: rgba(188, 112, 70, .10); }
.suggest .s-title { font-weight: 500; }
.suggest .s-sub { color: var(--primary); font-size: var(--text-xs); white-space: nowrap; }

/* --- результаты --- */
.results { display: grid; gap: .9rem; }
.res {
  position: relative; overflow: hidden;
  padding: 1.2rem 1.45rem;
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255, 250, 246, .88), rgba(245, 234, 225, .74));
  box-shadow: var(--shadow-md), inset 0 0 0 1px var(--line);
}
.res::before {
  content: ""; position: absolute; inset: -40% -20% auto auto;
  width: 120px; height: 120px; border-radius: 50%;
  background: radial-gradient(circle, rgba(188, 112, 70, .16), transparent 68%);
  transform: translate3d(24px, -18px, 0);
}
.res.miss::before { background: radial-gradient(circle, rgba(216, 178, 152, .3), transparent 68%); }
.res.bad::before { background: radial-gradient(circle, rgba(163, 58, 40, .14), transparent 68%); }

.res h3 {
  margin: 0 0 .5rem;
  font-family: var(--font-display); font-weight: 500;
  font-size: var(--text-base);
}
.res .price { font-size: var(--text-xl); font-weight: 700; line-height: 1.1; }
.res dl { display: grid; grid-template-columns: max-content 1fr; gap: .15rem .9rem; margin: .7rem 0 0; font-size: var(--text-sm); }
.res dt { font-size: .72rem; text-transform: uppercase; letter-spacing: .14em; color: var(--muted); align-self: center; }
.res dd { margin: 0; }
.res .why { margin: .4rem 0 0; font-size: var(--text-sm); color: var(--muted); }
.res .near { margin: .7rem 0 0; font-size: var(--text-sm); }
.res .near button { margin: .35rem .4rem 0 0; }

/* --- таблицы --- */
table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
th, td { text-align: left; padding: .65rem .8rem; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-size: .72rem; text-transform: uppercase; letter-spacing: .14em; color: var(--muted); font-weight: 500; }
tr.off td { opacity: .5; }
td.actions { white-space: nowrap; }
td.actions button { margin: 0 .3rem .3rem 0; padding: .4rem .8rem; }
.creds td code { font-size: var(--text-base); }
.issued { box-shadow: var(--shadow-md), inset 0 0 0 1px rgba(74, 124, 82, .3); }

.products { margin-top: 2rem; }
.products summary { cursor: pointer; color: var(--muted); padding: .5rem 0; font-size: var(--text-sm); }

@media (max-width: 700px) {
  .top { padding: .7rem .9rem; gap: .7rem; }
  .brand-text span { display: none; }
  .top nav { gap: .7rem; width: 100%; margin-left: 0; }
  .grid-form { grid-template-columns: 1fr; }
  td.actions { white-space: normal; }
  .card { padding: 1.1rem 1.15rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}