* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: #f6f5f9;
  font-family: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
  color: #1c1a27;
  overflow-x: hidden;
}
body.has-cookie-bar { padding-bottom: 140px; }
img, svg { max-width: 100%; }
.show-xs { display: none; }
a { color: #6d5ef8; text-decoration: none; font-weight: 600; }
a:hover { color: #5a4de0; }
::selection { background: #e4defd; }
::placeholder { color: #b3b0c2; }
button { font-family: inherit; }
input, textarea { font-family: inherit; outline: none; }

@keyframes fadeInUp { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:translateY(0); } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes scaleIn { from { opacity:0; transform:scale(0.94) translateY(6px); } to { opacity:1; transform:scale(1) translateY(0); } }

.view-fade { animation: fadeIn 0.35s ease both; }
.word-card { animation: fadeInUp 0.45s ease both; animation-delay: calc(var(--i, 0) * 55ms); }
.modal-backdrop { animation: fadeIn 0.2s ease both; }
.modal-card { animation: scaleIn 0.25s cubic-bezier(.2,.9,.3,1.15) both; }

.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 32px; position: sticky; top: 0; z-index: 5;
  background: rgba(246,245,249,0.85); backdrop-filter: blur(10px);
}
.brand { display: flex; align-items: center; gap: 10px; cursor: pointer; transition: transform .15s ease; }
.brand:hover { transform: scale(1.03); }
.logo-icon { width: 30px; height: 30px; border-radius: 9px; display: block; flex-shrink: 0; object-fit: cover; }
.logo { font-size: 20px; font-weight: 800; letter-spacing: -0.01em; white-space: nowrap; }
.topbar-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.add-top { display: inline-flex; align-items: center; gap: 6px; }
.profile-btn { display: flex; align-items: center; gap: 8px; padding: 0 14px 0 6px; max-width: 190px; }
.profile-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.btn { height: 38px; padding: 0 16px; border-radius: 12px; border: 1.5px solid #e4e2ee; background: #fff; color: #1c1a27; font-size: 14px; font-weight: 600; cursor: pointer; }
.btn-dark { border: none; background: #1c1a27; color: #fff; }
.btn-ghost { border: none; background: transparent; color: #8a86a0; }
.btn-pill { padding: 0 20px; }

.avatar { border-radius: 50%; background: #e4defd; color: #6d5ef8; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; flex-shrink: 0; }

.container { max-width: 720px; margin: 0 auto; padding: 24px 20px 80px; }
.container-narrow { max-width: 400px; margin: 60px auto; padding: 0 20px; }
.container-mid { max-width: 640px; margin: 0 auto; padding: 32px 20px 80px; }
.container-wide { max-width: 820px; margin: 0 auto; padding: 32px 20px 80px; }

.hero { text-align: center; margin: 24px 0 32px; }
.hero h1 { font-size: 38px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; margin: 0 0 10px; }
.hero p { font-size: 16px; color: #68647a; max-width: 44ch; margin: 0 auto; }

.search-row { display: flex; gap: 10px; margin-bottom: 16px; }
.search-row input {
  flex: 1; height: 52px; border-radius: 16px; border: 1.5px solid #e4e2ee;
  background: #fff; padding: 0 18px; font-size: 16px; color: #1c1a27;
  box-shadow: 0 1px 2px rgba(28,26,39,0.03);
}
.add-btn {
  display: flex; align-items: center; gap: 8px; height: 52px; padding: 0 22px;
  border-radius: 16px; border: none; background: #1c1a27; color: #fff;
  font-size: 15px; font-weight: 600; cursor: pointer; white-space: nowrap;
  transition: transform .15s ease, background .15s ease;
}
.add-btn:hover { transform: translateY(-2px); background: #2a2740; }

.section-label { font-size: 13px; font-weight: 700; color: #8a86a0; text-transform: uppercase; letter-spacing: 0.06em; margin: 24px 0 12px; }
.grid { display: grid; gap: 14px; }
.empty { padding: 32px 24px; text-align: center; background: #fff; border-radius: 20px; color: #8a86a0; font-size: 15px; border: 1.5px dashed #e4e2ee; }

.card {
  background: #fff; border-radius: 20px; padding: 20px 22px;
  box-shadow: 0 1px 3px rgba(28,26,39,0.04), 0 8px 24px -12px rgba(28,26,39,0.08);
  border: 1px solid #efeef5; transition: transform .15s ease, box-shadow .15s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: 0 4px 10px rgba(28,26,39,0.06), 0 16px 34px -14px rgba(28,26,39,0.16); }
.card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.card-word { font-size: 22px; font-weight: 700; margin-bottom: 6px; }
.card-desc { font-size: 15px; color: #4b4859; line-height: 1.5; }
.card-meta { margin-top: 14px; font-size: 13px; color: #a5a2b5; }

.vote-box { display: flex; flex-direction: column; align-items: center; gap: 2px; flex-shrink: 0; background: #f6f5f9; border-radius: 14px; padding: 6px 8px; }
.vote-btn { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; border: none; background: transparent; color: #8a86a0; cursor: pointer; transition: transform .12s ease, background .12s ease; }
.vote-btn:hover { transform: scale(1.12); }
.vote-btn.up-active { background: #e9f7ee; color: #1a9e52; }
.vote-btn.down-active { background: #fdecec; color: #e0453c; }
.vote-score { font-size: 14px; font-weight: 700; min-width: 22px; text-align: center; }

.panel { background: #fff; border-radius: 24px; padding: 32px; box-shadow: 0 1px 3px rgba(28,26,39,0.04), 0 8px 24px -12px rgba(28,26,39,0.08); }
.panel h2 { font-size: 24px; font-weight: 800; margin: 0 0 6px; }
.panel .sub { font-size: 14px; color: #8a86a0; margin-bottom: 22px; }
.field { margin-bottom: 14px; }
.field label { display: block; font-size: 13px; font-weight: 600; color: #68647a; margin-bottom: 6px; }
.field input, .field textarea { width: 100%; min-height: 46px; border-radius: 14px; border: 1.5px solid #e4e2ee; padding: 12px 14px; font-size: 15px; }
.field input { height: 46px; padding: 0 14px; }
.form-error { background: #fdecec; color: #c23a32; font-size: 13px; padding: 10px 14px; border-radius: 12px; margin-bottom: 16px; }
.form-ok { background: #e9f7ee; color: #1a9e52; font-size: 13px; padding: 10px 14px; border-radius: 12px; margin-bottom: 16px; }
.block-btn { width: 100%; height: 48px; border-radius: 14px; border: none; background: #1c1a27; color: #fff; font-size: 15px; font-weight: 700; cursor: pointer; margin: 6px 0 14px; }
.block-btn:disabled { background: #e4e2ee; color: #a5a2b5; cursor: not-allowed; }
.panel .switch { text-align: center; font-size: 14px; color: #68647a; }
.or-line { display: flex; align-items: center; gap: 12px; margin: 4px 0 14px; color: #a5a2b5; font-size: 13px; }
.or-line::before, .or-line::after { content: ""; flex: 1; height: 1px; background: #e4e2ee; }
.yandex-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; height: 48px; border-radius: 14px; border: 1.5px solid #e4e2ee;
  background: #fff; color: #1c1a27; font-size: 15px; font-weight: 700;
  cursor: pointer; margin-bottom: 14px; transition: background .15s ease;
}
.yandex-btn:hover { background: #f6f5f9; color: #1c1a27; }
.ya-suggest-slot { min-height: 48px; margin-bottom: 14px; display: flex; }
.ya-suggest-slot > * { width: 100%; }
.yandex-logo {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 6px;
  background: #fc3f1d; color: #fff; font-weight: 800; font-size: 15px;
}

.profile-head { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.profile-head .name { font-size: 22px; font-weight: 800; }
.profile-head .handle { font-size: 14px; color: #8a86a0; }
.badge-row { display: flex; gap: 10px; flex-wrap: wrap; }
.badge { display: flex; align-items: center; gap: 8px; background: #f6f5f9; border-radius: 14px; padding: 8px 14px; font-size: 14px; font-weight: 600; }
.tag { font-size: 11px; font-weight: 700; border-radius: 8px; padding: 3px 8px; }
.tag-pending { color: #a5772e; background: #fdf1de; }
.tag-admin { color: #5a4de0; background: #e4defd; }
.tag-user { color: #8a86a0; background: #f0eef7; }

.tabs { display: flex; gap: 8px; margin-bottom: 24px; flex-wrap: wrap; }
.tab { height: 38px; padding: 0 16px; border-radius: 12px; border: 1.5px solid #e4e2ee; background: #fff; color: #1c1a27; font-size: 14px; font-weight: 600; cursor: pointer; }
.tab.active { border: none; background: #1c1a27; color: #fff; }

.row { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: #fff; border-radius: 16px; padding: 14px 18px; box-shadow: 0 1px 3px rgba(28,26,39,0.04); }
.row-left { display: flex; align-items: center; gap: 12px; cursor: pointer; }
.mini-btn { height: 32px; padding: 0 12px; border-radius: 10px; border: 1.5px solid #e4e2ee; background: #fff; color: #1c1a27; font-size: 13px; font-weight: 600; cursor: pointer; }
.mini-btn.dark { border: none; background: #1c1a27; color: #fff; }
.mini-btn.danger { border: none; background: #fdecec; color: #c23a32; }
.mini-btn.ok { border: none; background: #e9f7ee; color: #1a9e52; }
.chip { height: 32px; padding: 0 12px; border-radius: 10px; border: 1.5px solid #e4e2ee; background: #fff; color: #8a86a0; font-size: 13px; font-weight: 600; cursor: pointer; }
.chip.on { border: none; background: #e4defd; color: #5a4de0; }

.modal-backdrop { position: fixed; inset: 0; background: rgba(28,26,39,0.45); display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 10; }
.modal-card { background: #fff; border-radius: 24px; padding: 28px; width: 100%; max-width: 440px; box-shadow: 0 24px 60px -12px rgba(28,26,39,0.35); }
.modal-card h3 { font-size: 20px; font-weight: 800; margin: 0 0 20px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 4px; }
.modal-actions .cancel { height: 44px; padding: 0 18px; border-radius: 14px; border: none; background: #f0eef7; color: #1c1a27; font-size: 15px; font-weight: 600; cursor: pointer; }
.modal-actions .confirm { height: 44px; padding: 0 20px; border-radius: 14px; border: none; background: #1c1a27; color: #fff; font-size: 15px; font-weight: 700; cursor: pointer; }
.modal-actions .confirm:disabled { background: #e4e2ee; color: #a5a2b5; cursor: not-allowed; }
.hint { font-size: 13px; color: #a5a2b5; }

.fmt-bar { display: flex; gap: 6px; margin-bottom: 8px; flex-wrap: wrap; }
.fmt-btn {
  min-width: 34px; height: 34px; padding: 0 10px; border-radius: 9px;
  border: 1.5px solid #e4e2ee; background: #fff; color: #1c1a27;
  font-size: 13px; font-weight: 700; line-height: 1; cursor: pointer;
  display: inline-flex; align-items: center; gap: 4px;
}
.fmt-btn:hover { background: #f6f5f9; border-color: #d9d6e8; }
.fmt-btn:active { transform: translateY(1px); }
.fmt-btn code { background: none; padding: 0; font-size: 12px; }

.add-page { max-width: 980px; margin: 0 auto; padding: 40px 24px 96px; }
.add-head h1 { font-size: 32px; font-weight: 800; letter-spacing: -0.02em; margin: 0 0 8px; }
.add-head p { font-size: 15px; color: #68647a; margin: 0 0 32px; max-width: 60ch; line-height: 1.5; }
.add-grid { display: grid; grid-template-columns: 1fr; gap: 32px; align-items: start; }
@media (min-width: 900px) { .add-grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); } }

.add-form { display: flex; flex-direction: column; }
.add-label { font-size: 12px; font-weight: 700; color: #68647a; text-transform: uppercase; letter-spacing: 0.06em; margin: 22px 0 8px; }
.add-form > .add-label:first-child { margin-top: 0; }
.add-input, .add-textarea {
  width: 100%; border-radius: 14px; border: 1.5px solid #e4e2ee; background: #fff;
  font-family: inherit; color: #1c1a27; box-sizing: border-box;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.add-input { height: 54px; padding: 0 18px; font-size: 17px; font-weight: 600; }
.add-textarea { min-height: 180px; padding: 15px 18px; font-size: 15px; line-height: 1.6; resize: vertical; }
.add-input:focus, .add-textarea:focus { border-color: #6d5ef8; box-shadow: 0 0 0 3px #e9e5fd; outline: none; }

.add-meta { display: flex; justify-content: space-between; gap: 16px; margin-top: 8px; flex-wrap: wrap; }
.add-meta .hint { line-height: 1.5; }
.add-actions { display: flex; gap: 12px; margin-top: 28px; }
.add-submit {
  flex: 1; height: 54px; border-radius: 14px; border: none; background: #1c1a27;
  color: #fff; font-size: 16px; font-weight: 700; cursor: pointer; transition: background .15s ease;
}
.add-submit:hover:not(:disabled) { background: #2a2740; }
.add-submit:disabled { background: #e4e2ee; color: #a5a2b5; cursor: not-allowed; }
.add-cancel {
  height: 54px; padding: 0 26px; border-radius: 14px; border: none;
  background: #f0eef7; color: #1c1a27; font-size: 15px; font-weight: 600; cursor: pointer;
}
.add-cancel:hover { background: #e7e4f2; }

.add-preview-pane { position: sticky; top: 88px; }
@media (max-width: 899px) { .add-preview-pane { position: static; } }
.add-preview-label { font-size: 12px; font-weight: 700; color: #8a86a0; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 12px; }
.add-preview-card:hover { transform: none; box-shadow: 0 1px 3px rgba(28,26,39,0.04), 0 8px 24px -12px rgba(28,26,39,0.08); }
.add-preview-card .card-word { color: #1c1a27; }
.add-preview-empty { color: #b3b0c2; }

.md > :first-child { margin-top: 0; }
.md > :last-child { margin-bottom: 0; }
.md p { margin: 0 0 8px; }
.md ul { margin: 6px 0; padding-left: 20px; }
.md li { margin: 2px 0; }
.md blockquote { margin: 6px 0; padding: 2px 0 2px 12px; border-left: 3px solid #e4defd; color: #68647a; }
.md code { background: #f0eef7; border-radius: 5px; padding: 1px 5px; font-size: 0.92em; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.md strong { font-weight: 700; }
.md a { color: #6d5ef8; word-break: break-word; }
.md-preview { margin-top: 10px; padding: 12px 14px; background: #f6f5f9; border-radius: 12px; font-size: 14px; color: #4b4859; }
.toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); background: #1c1a27; color: #fff; padding: 12px 20px; border-radius: 14px; font-size: 14px; font-weight: 600; z-index: 30; animation: fadeInUp .3s ease both; }

/* согласие при регистрации */
.consent { display: flex; gap: 10px; align-items: flex-start; margin: 4px 0 16px; font-size: 13px; color: #68647a; line-height: 1.45; cursor: pointer; }
.consent input { margin: 2px 0 0; width: 16px; height: 16px; flex-shrink: 0; accent-color: #6d5ef8; cursor: pointer; }

/* подвал */
.site-footer { border-top: 1px solid #eceaf3; margin-top: 40px; background: #f6f5f9; }
.site-footer-inner { max-width: 820px; margin: 0 auto; padding: 24px 20px; display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center; font-size: 13px; color: #8a86a0; }
.site-footer-inner nav { display: flex; gap: 18px; flex-wrap: wrap; }
.site-footer-inner a { color: #68647a; font-weight: 600; }
.site-footer-inner a:hover { color: #6d5ef8; }
.site-footer-note { margin-left: auto; }

/* плашка cookie */
.cookie-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; background: #1c1a27; color: #eceaf3; box-shadow: 0 -8px 24px -12px rgba(28,26,39,0.5); }
.cookie-bar-inner { max-width: 900px; margin: 0 auto; padding: 14px 20px; display: flex; gap: 16px; align-items: center; font-size: 13px; line-height: 1.45; }
.cookie-bar a { color: #b7aefc; font-weight: 600; }
.cookie-ok { flex-shrink: 0; height: 38px; padding: 0 22px; border-radius: 11px; border: none; background: #fff; color: #1c1a27; font-size: 14px; font-weight: 700; cursor: pointer; }
.cookie-ok:hover { background: #ece9f8; }
@media (max-width: 560px) { .cookie-bar-inner { flex-direction: column; align-items: stretch; gap: 10px; } .cookie-ok { width: 100%; } }

/* правовые страницы */
.legal-page { max-width: 760px; margin: 0 auto; padding: 32px 24px 80px; }
.legal-back { display: inline-block; margin-bottom: 20px; font-size: 14px; font-weight: 600; }
.legal-page h1 { font-size: 30px; font-weight: 800; letter-spacing: -0.02em; margin: 0 0 6px; }
.legal-page h2 { font-size: 18px; font-weight: 700; margin: 28px 0 8px; }
.legal-page p, .legal-page li { font-size: 15px; line-height: 1.65; color: #3f3c4d; }
.legal-page ul { padding-left: 22px; margin: 8px 0; }
.legal-page li { margin: 4px 0; }
.legal-page .legal-meta { color: #a5a2b5; font-size: 13px; margin-bottom: 24px; }
.legal-page a { font-weight: 600; }
.legal-page code { background: #f0eef7; border-radius: 5px; padding: 1px 5px; font-size: 0.9em; }

/* ============ мобильная адаптация ============ */
@media (max-width: 720px) {
  .container-wide { padding: 24px 16px 72px; }
}

@media (max-width: 640px) {
  .topbar { padding: 10px 12px; row-gap: 8px; flex-wrap: wrap; }
  .brand { gap: 8px; min-width: 0; }
  .logo { font-size: 15px; }
  .logo-icon { width: 26px; height: 26px; border-radius: 8px; }
  .topbar-actions { width: 100%; gap: 6px; }
  .btn { height: 36px; padding: 0 11px; font-size: 13px; }
  .btn-pill { padding: 0 16px; }
  .profile-btn { max-width: 44vw; }
  .add-top svg { display: none; }

  .container, .container-mid, .container-wide { padding: 18px 14px 72px; }
  .container-narrow { margin: 22px auto; padding: 0 14px; }

  .hero { margin: 14px 0 22px; }
  .hero h1 { font-size: 26px; line-height: 1.15; }
  .hero p { font-size: 14px; }

  .search-row { gap: 8px; }
  .search-row input { height: 48px; font-size: 15px; padding: 0 14px; border-radius: 14px; }
  .add-btn { height: 48px; padding: 0 15px; font-size: 14px; border-radius: 14px; gap: 6px; }

  .section-label { margin: 18px 0 10px; }
  .card { padding: 15px 15px; border-radius: 16px; }
  .card:hover { transform: none; }
  .card-head { gap: 10px; }
  .card-word { font-size: 18px; }
  .card-desc { font-size: 14px; }
  .card-meta { margin-top: 10px; }
  .vote-btn { width: 32px; height: 32px; }
  .empty { padding: 24px 16px; font-size: 14px; }

  .panel { padding: 20px 16px; border-radius: 20px; }
  .panel h2 { font-size: 21px; }
  .modal-card { padding: 20px 16px; }

  .profile-head { gap: 12px; flex-wrap: wrap; }
  .profile-head > div[style] { flex: 1 1 140px; }
  .profile-head .name { font-size: 19px; }
  .profile-head .mini-btn { margin-left: auto; }

  .tabs { gap: 6px; margin-bottom: 18px; }
  .tab { height: 36px; padding: 0 12px; font-size: 13px; }
  .row { padding: 13px 14px; border-radius: 14px; flex-wrap: wrap; }
  .row > div[style*="flex-shrink"] { flex-wrap: wrap; }
  .mini-btn { height: 34px; }
  .chip { height: 34px; }

  .fmt-bar { gap: 5px; }
  .fmt-btn { height: 36px; padding: 0 9px; font-size: 12px; }

  .add-page { padding: 20px 14px 80px; }
  .add-head h1 { font-size: 24px; }
  .add-head p { font-size: 14px; margin-bottom: 22px; }
  .add-grid { gap: 22px; }
  .add-label { margin: 18px 0 7px; }
  .add-input { height: 50px; font-size: 16px; padding: 0 15px; }
  .add-textarea { min-height: 150px; font-size: 15px; padding: 13px 15px; }
  .add-actions { gap: 10px; margin-top: 22px; }
  .add-submit, .add-cancel { height: 50px; font-size: 15px; }
  .add-cancel { padding: 0 18px; }

  .yandex-btn, .block-btn { height: 46px; }
  .consent { font-size: 12.5px; }

  .legal-page { padding: 20px 14px 72px; }
  .legal-page h1 { font-size: 23px; }
  .legal-page h2 { font-size: 16px; margin: 22px 0 6px; }
  .legal-page p, .legal-page li { font-size: 14px; line-height: 1.6; }

  .site-footer { margin-top: 28px; }
  .site-footer-inner { padding: 20px 14px; gap: 8px 16px; font-size: 12.5px; }
  .site-footer-note { margin-left: 0; width: 100%; }

  .cookie-bar-inner { padding: 12px 14px; font-size: 12.5px; }
  body.has-cookie-bar { padding-bottom: 170px; }

  .toast { left: 12px; right: 12px; bottom: 16px; transform: none; text-align: center; font-size: 13px; }
}

@media (max-width: 400px) {
  .hide-xs { display: none; }
  .show-xs { display: inline; }
  .logo { font-size: 13.5px; white-space: normal; }
  .btn { padding: 0 9px; font-size: 12.5px; }
  .btn-ghost { padding: 0 6px; }
  .profile-name { display: none; }
  .profile-btn { max-width: none; padding: 0 8px; }
  .hero h1 { font-size: 23px; }
  .add-actions { flex-direction: column; }
  .add-cancel { width: 100%; }
}