/* ═══════════════════════════════════════════════
     Anketta Brand for Fider — v2 (dark-only)
     suggest.anketta.ru
     ═══════════════════════════════════════════════ */

  @import url('https://fonts.googleapis.com/css2?family=Lora:wght@400;600;700&display=swap');

  /* ── 1. Color tokens — applied to BOTH themes ── */
  body[data-theme="light"],
  body[data-theme="dark"] {
    --primary-color: #c4943a;
    --primary-color-light: #d4ad5e;
    --primary-color-dark: #a67b2e;

    --colors-gray-50: #161616;
    --colors-gray-100: #1a1a1a;
    --colors-gray-200: #252525;
    --colors-gray-300: #333333;
    --colors-gray-400: #444444;
    --colors-gray-500: #666666;
    --colors-gray-600: #888888;
    --colors-gray-700: #aaaaaa;
    --colors-gray-800: #d4cfc5;
    --colors-gray-900: #f5f0e8;

    --colors-white: #1e1e1e;
    --colors-black: #f5f0e8;

    --colors-blue-50: rgba(196, 148, 58, 0.06);
    --colors-blue-100: rgba(196, 148, 58, 0.12);
    --colors-blue-200: rgba(196, 148, 58, 0.20);
    --colors-blue-300: #c4943a;
    --colors-blue-400: #d4ad5e;
    --colors-blue-500: #c4943a;
    --colors-blue-600: #d4ad5e;
    --colors-blue-700: rgba(196, 148, 58, 0.50);
    --colors-blue-800: rgba(196, 148, 58, 0.15);
    --colors-blue-900: rgba(196, 148, 58, 0.08);

    --colors-green-50: rgba(74, 222, 128, 0.06);
    --colors-green-600: #4ade80;
    --colors-green-800: #86efac;

    --colors-yellow-50: rgba(196, 148, 58, 0.08);
    --colors-yellow-800: #d4ad5e;

    --colors-red-50: rgba(248, 113, 113, 0.08);
    --colors-red-500: #f87171;
    --colors-red-600: #f87171;
    --colors-red-700: #fca5a5;
    --colors-red-800: #fca5a5;

    background-color: #1a1a1a;
    color: #f5f0e8;
  }

  /* ── 2. Typography — serif for titles ── */
  .p-home__welcome-title,
  .p-show-post__title,
  .c-posts-container__post-title {
    font-family: 'Lora', Georgia, serif;
    letter-spacing: -0.3px;
  }

  /* ── 3. Glass morphism — cards ── */
  .c-posts-container__post,
  .p-show-post__post-card,
  .c-comment-input-card,
  .c-comment__card,
  .c-share-feedback__content,
  .c-response-details__card {
    background-color: rgba(255, 255, 255, 0.025) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: none !important;
  }

  /* ── 4. Vote counter — gold ── */
  .c-vote-counter__button {
    background-color: rgba(196, 148, 58, 0.08) !important;
    border-color: rgba(196, 148, 58, 0.20) !important;
    color: #c4943a !important;
  }

  .c-vote-counter__button:hover {
    background-color: rgba(196, 148, 58, 0.15) !important;
    border-color: #c4943a !important;
  }

  .c-vote-counter__button--voted {
    background-color: rgba(196, 148, 58, 0.18) !important;
    border-color: #c4943a !important;
  }

  .c-vote-counter__icon {
    color: #c4943a !important;
  }

  /* ── 5. Buttons ── */
  .c-button--primary {
    background-color: #c4943a !important;
    border-color: #c4943a !important;
    color: #1a1a1a !important;
    font-weight: 600;
  }

  .c-button--primary:hover {
    background-color: #a67b2e !important;
    border-color: #a67b2e !important;
  }

  .c-button--secondary {
    background-color: #252525 !important;
    border-color: #444444 !important;
    color: #f5f0e8 !important;
  }

  .c-button--secondary:hover {
    background-color: #333333 !important;
    border-color: #666666 !important;
  }

  .c-button--link {
    color: #c4943a !important;
  }

  .c-button--tertiary {
    color: #f5f0e8 !important;
  }

  /* ── 6. Form controls — inputs, textareas, selects ── */
  .c-input,
  .c-textarea,
  .c-select {
    background-color: #1a1a1a !important;
    color: #f5f0e8 !important;
    border-color: #444444 !important;
  }

  .c-input:hover,
  .c-textarea:hover,
  .c-select:hover {
    border-color: #666666 !important;
  }

  .c-input:focus,
  .c-textarea:focus,
  .c-select:focus {
    border-color: #c4943a !important;
    box-shadow: 0 0 0 3px rgba(196, 148, 58, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.2) !important;
  }

  .c-input::placeholder,
  .c-textarea::placeholder {
    color: #888888 !important;
  }

  .c-input__suffix {
    background-color: #333333 !important;
  }

  /* ── 7. Comment editor (TipTap) ── */
  .fider-tiptap-editor {
    background-color: #1a1a1a !important;
    border-color: #444444 !important;
  }

  .c-editor-toolbar {
    border-bottom-color: #333333 !important;
  }

  .c-editor-button,
  .c-markdown-toggle {
    color: #aaaaaa !important;
  }

  .c-editor-button:hover,
  .c-markdown-toggle:hover {
    background-color: #333333 !important;
    color: #f5f0e8 !important;
  }

  .c-editor-button.is-active {
    background-color: #444444 !important;
    color: #f5f0e8 !important;
  }

  .c-markdown-textarea {
    background-color: #1a1a1a !important;
    color: #f5f0e8 !important;
  }

  .tiptap p.tiptap-is-empty:first-child::before {
    color: #888888 !important;
  }

  /* Editor links */
  .fider-tiptap-editor .ProseMirror a {
    color: #d4ad5e !important;
  }

  /* ── 8. Markdown content ── */
  .c-markdown blockquote,
  .tiptap blockquote {
    border-inline-start-color: #444444 !important;
    background-color: #252525 !important;
  }

  .c-markdown pre,
  .tiptap pre,
  .c-markdown code,
  .tiptap code {
    background-color: #252525 !important;
  }

  /* Mentions — gold tinted */
  .mention {
    background-color: rgba(196, 148, 58, 0.12) !important;
    color: #d4ad5e !important;
  }

  /* ── 9. Modals ── */
  .c-modal-dimmer {
    background-color: rgba(0, 0, 0, 0.75) !important;
  }

  .c-modal-window {
    background: #252525 !important;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5);
  }

  .c-modal-closeicon {
    color: #aaaaaa !important;
  }

  .c-modal-closeicon:hover {
    color: #f5f0e8 !important;
  }

  /* ── 10. Dropdowns ── */
  .c-dropdown__list {
    background-color: #252525 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4) !important;
  }

  .c-dropdown__listitem:hover {
    background-color: #333333 !important;
  }

  .c-dropdown__divider {
    background-color: #333333 !important;
  }

  .dropdown-menu {
    background: #252525 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4) !important;
  }

  .dropdown-menu button:hover {
    background-color: #333333 !important;
  }

  .dropdown-menu button.is-selected {
    background-color: rgba(196, 148, 58, 0.1) !important;
  }

  /* ── 11. Tags ── */
  .c-tag {
    background-color: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #d4cfc5 !important;
  }

  /* ── 12. Filter & sort buttons ── */
  .c-post-filter-btn,
  .c-post-sort-btn {
    background-color: #252525 !important;
    color: #d4cfc5 !important;
    border-color: #444444 !important;
  }

  .c-post-filter-btn:hover,
  .c-post-sort-btn:hover {
    background-color: #333333 !important;
    border-color: #666666 !important;
  }

  /* Focus ring override for filter buttons */
  .c-dropdown__handle:focus .c-post-filter-btn,
  .c-dropdown__handle:focus .c-post-sort-btn {
    border-color: #c4943a !important;
    box-shadow: 0 0 0 3px rgba(196, 148, 58, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.2) !important;
  }

  /* ── 13. Action buttons ── */
  .c-action-button {
    color: #aaaaaa !important;
  }

  .c-action-button:hover {
    background-color: #333333 !important;
    color: #f5f0e8 !important;
  }

  /* ── 14. Hints ── */
  .c-hint {
    background-color: rgba(196, 148, 58, 0.08) !important;
    border-inline-start-color: #c4943a !important;
    color: #d4cfc5 !important;
  }

  /* ── 15. Messages (success/warning/error) ── */
  .c-message--success {
    background-color: rgba(74, 222, 128, 0.08) !important;
    border-color: #4ade80 !important;
    color: #86efac !important;
  }

  .c-message--warning {
    background-color: rgba(196, 148, 58, 0.08) !important;
    border-color: #c4943a !important;
    color: #d4ad5e !important;
  }

  .c-message--error {
    background-color: rgba(248, 113, 113, 0.08) !important;
    border-color: #f87171 !important;
    color: #fca5a5 !important;
  }

  /* ── 16. Toggle switch ── */
  .c-toggle {
    background-color: #444444 !important;
  }

  .c-toggle--enabled {
    background-color: #4ade80 !important;
  }

  .c-toggle span {
    background-color: #f5f0e8 !important;
  }

  /* ── 17. Checkbox & radio — gold accent ── */
  .c-checkbox input,
  .c-radiobutton input {
    border-color: #444444 !important;
    color: #c4943a !important;
  }

  /* ── 18. Sign-in social buttons ── */
  .c-signin-social-button {
    border-color: #444444 !important;
  }

  .c-signin-social-button span {
    color: #d4cfc5 !important;
  }

  /* ── 19. Votes panel ── */
  .c-votes-panel__count-badge {
    background-color: #333333 !important;
    color: #aaaaaa !important;
  }

  .c-votes-panel__more-avatar {
    border-color: #444444 !important;
    background-color: #252525 !important;
    color: #888888 !important;
  }

  .c-votes-panel__more-avatar:hover {
    border-color: #c4943a !important;
    color: #c4943a !important;
    background-color: rgba(196, 148, 58, 0.08) !important;
  }

  /* ── 20. Post actions border ── */
  .p-show-post__actions {
    border-top-color: #c4943a !important;
  }

  /* ── 21. Header ── */
  #c-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  }

  /* ── 22. Notification dot — keep red ── */
  .c-notification-indicator-unread-counter {
    background-color: #f87171 !important;
  }

  /* ── 23. Legal page links ── */
  #p-legal a {
    color: #d4ad5e !important;
  }

  #p-legal a:hover {
    color: #c4943a !important;
  }

  /* ── 24. Powered by ── */
  .c-powered a {
    color: rgba(245, 240, 232, 0.3) !important;
  }

  .c-powered a:hover {
    color: rgba(245, 240, 232, 0.5) !important;
  }

  /* ── 25. Avatar borders ── */
  .c-avatar {
    border-color: #252525 !important;
  }

  /* ── 26. Comment highlight ── */
  .c-comment__content--highlighted {
    background-color: rgba(196, 148, 58, 0.1) !important;
  }

  /* ── 27. Response details card ── */
  .c-response-details__card {
    background-color: rgba(196, 148, 58, 0.06) !important;
  }

  /* ── 28. Add idea button ── */
  .p-home__add-idea-btn {
    background-color: #252525 !important;
    border-color: #333333 !important;
    color: #aaaaaa !important;
  }

  .p-home__add-idea-btn:hover {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3) !important;
  }

  .p-home__add-idea-icon {
    color: #c4943a !important;
  }

  /* ── 29. Discussion count badge ── */
  .p-show-post__discussion-count {
    background-color: rgba(196, 148, 58, 0.12) !important;
    color: #c4943a !important;
  }

  /* ── 30. Follow button ── */
  .p-show-post__action-col__follow-button--follow,
  .p-show-post__action-col__follow-button--following {
    background-color: #1a1a1a !important;
    border-color: #444444 !important;
    color: #d4cfc5 !important;
  }

  /* ── 31. Selection ── */
  ::selection {
    background: rgba(196, 148, 58, 0.3);
    color: #f5f0e8;
  }

  /* ── 32. Scrollbar ── */
  ::-webkit-scrollbar {
    width: 6px;
  }

  ::-webkit-scrollbar-track {
    background: #1a1a1a;
  }

  ::-webkit-scrollbar-thumb {
    background: #333333;
    border-radius: 3px;
  }

  ::-webkit-scrollbar-thumb:hover {
    background: #444444;
  }

  /* ── 33. Loader spinner ── */
  .c-loader__spinner:before {
    border-color: #333333 !important;
  }

  /* ── 34. General link color ── */
  a {
    color: #f5f0e8;
  }

  /* ── 35. Smooth transitions ── */
  a, .c-button, .c-vote-counter__button, .c-input, .c-textarea {
    transition: all 0.2s ease;
  }

  /* ── 36. Hide theme switcher (always dark) ── */
  .c-themeswitcher {
    display: none;
  }