/* OtherEyes — маленькая дизайн-система поверх старых стилей. Подключается ПОСЛЕДНЕЙ.
   Правила: одна обводка 1 px, фокус 2 px, кнопки 48–56 px, скругления 14 / 20 / pill, один набор иконок (inline SVG, штрих 1.75). */
:root {
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;
  --r-field: 14px; --r-card: 20px; --r-pill: 999px;
  --bd: rgba(255, 255, 255, .12); --bd-strong: rgba(255, 255, 255, .22);
  --surface: rgba(255, 255, 255, .05); --surface-hi: rgba(255, 255, 255, .09);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .35), 0 4px 14px rgba(0, 0, 0, .25);
  --shadow-2: 0 10px 40px rgba(0, 0, 0, .45);
  --focus: 0 0 0 2px var(--bg, #0d0f13), 0 0 0 4px var(--accent, #ffb54a);
  --h-btn: 48px; --h-btn-lg: 56px; --h-chip: 40px;
}
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* кнопки: основная (янтарь), вторичная (.ghost), малая */
.btn { min-height: var(--h-btn); padding: 0 22px; border-radius: var(--r-pill); font-weight: 600; font-size: 16px; line-height: 1.15; justify-content: center; box-shadow: none; }
.btn.small { min-height: 44px; padding: 0 16px; font-size: 14px; }
.btn.big { min-height: var(--h-btn-lg); padding: 0 28px; font-size: 18px; }
.btn.ghost { background: var(--surface); color: var(--fg); border: 1px solid var(--bd); }
.btn.ghost:hover { background: var(--surface-hi); border-color: var(--bd-strong); }
.btn:not(.ghost):not(.live):hover { filter: brightness(1.06); }
.btn svg { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

/* чипы */
.chip { min-height: var(--h-chip); display: inline-flex; align-items: center; padding: 0 14px; font-size: 14px; border-radius: var(--r-pill); background: var(--surface); border: 1px solid var(--bd); color: var(--fg); }
.chip:hover, .chip.on { border-color: var(--accent); }
.wanted .chip, .wchips .chip, .gwho .chip { border: 1px solid var(--bd); background: var(--surface); padding: 0 14px; font-size: 14px; }
.gwho .chip.on, .wanted .chip:hover, .wchips .chip:hover { background: var(--accent); color: var(--accent-ink); border-color: transparent; }

/* поля */
.wishbox input, .search input { min-height: 0; border-radius: 0; }
:where(input[type="text"], input[type="email"], input[type="number"], input[type="search"], input[type="url"], input:not([type]), textarea, select) {
  background: var(--bg2); color: var(--fg); border: 1px solid var(--bd); border-radius: var(--r-field); min-height: 48px; padding: 11px 14px; font-size: 16px; }
textarea { min-height: 96px; }
input::placeholder, textarea::placeholder { color: #8b91a0; }
input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }
input[type="file"] { min-height: 0; padding: 8px; border: 1px dashed var(--bd-strong); color: var(--muted); max-width: 100%; }
input[type="file"]::file-selector-button { font: 600 14px var(--body); min-height: 40px; padding: 0 16px; margin-right: 12px; border-radius: var(--r-pill); border: 1px solid var(--bd); background: var(--surface-hi); color: var(--fg); cursor: pointer; }

/* карточки: одна обводка, один радиус, мягкая тень */
.card, .mcard, .mcard2, .kpi, .sooncard, .gcard, .gwcard, .bring, .invite, .introcard, .survey, .storagenote, .crcard, .crtile, .crpanel, .emptybox, .adcard, .blogcard, .seenbox, .shopitem, .pbanner, .earnlink, .gcounter { border: 1px solid var(--bd); border-radius: var(--r-card); }
.mcard2 { border-left-width: 1px; box-shadow: inset 3px 0 0 var(--live); }
.stats div { border: 1px solid var(--bd); border-radius: var(--r-field); }

/* плитки: тонкая рамка, текст на затемнении */
.tile { border-width: 1px; border-color: var(--bd); box-shadow: var(--shadow-1); }
.tile.fam { border-color: rgba(255, 181, 74, .55); }
.tile.fam.live { box-shadow: 0 0 0 2px rgba(255, 90, 78, .45); }
.tile::after { background: linear-gradient(to top, rgba(8, 9, 12, .82), rgba(8, 9, 12, 0) 62%); }
.qtile { border-width: 1px; border-color: var(--bd); }

/* текст поверх фото главной: подложка вместо голого текста */
#vquote, #vwho, #vtitle { text-shadow: 0 1px 2px rgba(0, 0, 0, .7), 0 2px 18px rgba(0, 0, 0, .55); }

/* ТВ: кнопки без белой толстой рамки */
.controls button { border: 1px solid rgba(255, 255, 255, .3); background: rgba(10, 11, 14, .66); backdrop-filter: blur(8px); }

/* заголовки и подсказки */
h1, h2 { text-wrap: balance; }
.hint, .note, small { text-wrap: pretty; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }