/* Brown theme — creamy chocolate latte */

html[data-theme="brown"] {
  color-scheme: dark;
  --bg: #18100c;
  --bg-elevated: #261810;
  --bg-card: #322018;
  --bg-card-hover: #3f2a1c;
  --border: rgba(232, 201, 168, 0.14);
  --border-strong: rgba(245, 234, 216, 0.24);
  --text: #faf3eb;
  --text-muted: #b89878;
  --accent: #e8c9a8;
  --accent-dim: rgba(232, 201, 168, 0.16);
  --title-accent: #c4a882;
  --tab-active-fg: #f5ead8;
  --search-field-bg: rgba(10, 6, 4, 0.78);
  --filter-field-bg: rgba(61, 37, 24, 0.92);
  --movie: #8ec0e8;
  --movie-dim: rgba(142, 192, 232, 0.14);
  --tv: #c4a8e0;
  --tv-dim: rgba(196, 168, 224, 0.14);
  --anime: #e098a8;
  --anime-dim: rgba(224, 152, 168, 0.14);
  --franchise: #7ed4b4;
  --franchise-dim: rgba(126, 212, 180, 0.14);
  --watched: #78d898;
  --in-progress: #f0a060;
  --shadow: 0 22px 54px rgba(12, 6, 2, 0.62);
  --latte-cream: #f5ead8;
  --latte-foam: #fff8f0;
  --latte-caramel: #c9956a;
  --latte-espresso: #2a1810;
  --latte-mocha: #3d2518;
}

html[data-theme="brown"] ::selection {
  background: rgba(232, 201, 168, 0.34);
  color: #fff;
}

html[data-theme="brown"] body {
  background:
    radial-gradient(ellipse 70% 42% at 50% -12%, rgba(255, 248, 240, 0.11), transparent 62%),
    radial-gradient(ellipse 55% 38% at 12% 18%, rgba(201, 149, 106, 0.14), transparent 58%),
    radial-gradient(ellipse 48% 40% at 88% 22%, rgba(232, 201, 168, 0.1), transparent 55%),
    radial-gradient(ellipse 50% 45% at 50% 108%, rgba(60, 32, 18, 0.55), transparent 62%),
    linear-gradient(168deg, #201410 0%, #18100c 42%, #120a08 100%);
}

html[data-theme="brown"] .header__stat-chip {
  background: linear-gradient(
    145deg,
    rgba(255, 248, 240, 0.07) 0%,
    rgba(201, 149, 106, 0.1) 100%
  );
  border-color: rgba(232, 201, 168, 0.2);
  box-shadow: inset 0 1px 0 rgba(255, 248, 240, 0.06);
}

html[data-theme="brown"] .header__stat-value {
  color: var(--latte-foam);
}

html[data-theme="brown"] .header__stat-chip--watched .header__stat-value {
  color: var(--watched);
}

html[data-theme="brown"] .header__stat-chip--in-progress .header__stat-value {
  color: var(--in-progress, #f0a060);
}

html[data-theme="brown"] .header__stat-label {
  color: #c4a484;
}

html[data-theme="brown"] .header__toolbar {
  background: linear-gradient(
    180deg,
    rgba(255, 248, 240, 0.06) 0%,
    rgba(201, 149, 106, 0.08) 100%
  );
  border-color: rgba(232, 201, 168, 0.18);
  box-shadow:
    inset 0 1px 0 rgba(255, 248, 240, 0.07),
    0 8px 24px rgba(12, 6, 2, 0.22);
}

html[data-theme="brown"] .header__toolbar .account-menu__trigger:hover,
html[data-theme="brown"] .header__toolbar .account-menu__trigger:focus-visible {
  background: rgba(232, 201, 168, 0.12);
  border-color: rgba(245, 234, 216, 0.24);
}

html[data-theme="brown"] .panel {
  background: linear-gradient(
    165deg,
    rgba(58, 36, 24, 0.94) 0%,
    rgba(42, 26, 16, 0.9) 55%,
    rgba(32, 20, 12, 0.92) 100%
  );
  border-color: rgba(232, 201, 168, 0.16);
  box-shadow:
    inset 0 1px 0 rgba(255, 248, 240, 0.07),
    0 14px 36px rgba(12, 6, 2, 0.28);
}

html[data-theme="brown"] .type-tabs {
  background: linear-gradient(180deg, rgba(8, 4, 2, 0.42) 0%, rgba(18, 10, 6, 0.55) 100%);
  border-bottom-color: rgba(232, 201, 168, 0.12);
}

html[data-theme="brown"] .search__input,
html[data-theme="brown"] .gate__input,
html[data-theme="brown"] .form-input,
html[data-theme="brown"] .form-textarea,
html[data-theme="brown"] .tds-episode-jump__input {
  background: linear-gradient(180deg, rgba(10, 6, 4, 0.82) 0%, rgba(22, 14, 10, 0.68) 100%);
  border-color: rgba(232, 201, 168, 0.16);
  box-shadow: inset 0 1px 0 rgba(255, 248, 240, 0.04);
}

html[data-theme="brown"] .genre-filter__select,
html[data-theme="brown"] .watched-filter__select,
html[data-theme="brown"] .rating-filter__select,
html[data-theme="brown"] .select {
  background-color: var(--filter-field-bg);
  background-image: var(--select-chevron);
  background-repeat: no-repeat;
  background-position: right 0.65rem center;
  border-color: rgba(232, 201, 168, 0.16);
  box-shadow: inset 0 1px 0 rgba(255, 248, 240, 0.04);
}

html[data-theme="brown"] .panel__filters #genreSelect,
html[data-theme="brown"] .panel__filters #watchedFilter,
html[data-theme="brown"] .panel__filters #ratingFilter {
  background-color: var(--filter-field-bg);
}

html[data-theme="brown"] .search__input:focus,
html[data-theme="brown"] .select:focus,
html[data-theme="brown"] .form-input:focus,
html[data-theme="brown"] .form-textarea:focus,
html[data-theme="brown"] .tds-episode-jump__input:focus {
  border-color: rgba(232, 201, 168, 0.46);
  box-shadow:
    0 0 0 3px rgba(201, 149, 106, 0.14),
    inset 0 1px 0 rgba(255, 248, 240, 0.06);
}

html[data-theme="brown"] select,
html[data-theme="brown"] .select,
html[data-theme="brown"] .account-menu__select {
  accent-color: var(--latte-caramel);
  background-color: #2a1810;
}

html[data-theme="brown"] select option,
html[data-theme="brown"] .select option {
  background-color: #2a1810;
}

html[data-theme="brown"] select option:checked,
html[data-theme="brown"] .select option:checked {
  background-color: #4a3020;
  color: var(--latte-cream);
}

html[data-theme="brown"] .btn--primary {
  color: #3d2318;
  background: linear-gradient(180deg, #e8d4b8 0%, #d4b896 55%, #c9956a 100%);
  border-color: rgba(212, 184, 150, 0.35);
  box-shadow: none;
}

html[data-theme="brown"] .btn--primary:hover {
  background: linear-gradient(180deg, #f0e0c8 0%, #dcc0a0 55%, #ceb08a 100%);
  box-shadow: none;
}

html[data-theme="brown"] .layout-bar {
  background: linear-gradient(
    180deg,
    rgba(255, 248, 240, 0.05) 0%,
    rgba(201, 149, 106, 0.1) 100%
  );
  border-color: rgba(232, 201, 168, 0.16);
}

html[data-theme="brown"] .layout-toggle--active {
  background: rgba(232, 201, 168, 0.16);
  border-color: rgba(245, 234, 216, 0.3);
  box-shadow: inset 0 1px 0 rgba(255, 248, 240, 0.08);
}

html[data-theme="brown"] .genre-section__bar {
  background: linear-gradient(
    135deg,
    rgba(255, 248, 240, 0.07) 0%,
    rgba(201, 149, 106, 0.1) 38%,
    rgba(42, 26, 16, 0.72) 100%
  );
  border-color: rgba(232, 201, 168, 0.18);
  box-shadow: inset 0 1px 0 rgba(255, 248, 240, 0.05);
}

html[data-theme="brown"] .genre-section--all-match .genre-section__bar {
  border-color: rgba(232, 201, 168, 0.36);
  background: linear-gradient(
    135deg,
    rgba(255, 248, 240, 0.1) 0%,
    rgba(201, 149, 106, 0.14) 100%
  );
}

html[data-theme="brown"] .genre-section__count {
  background: rgba(12, 6, 4, 0.38);
  border-color: rgba(232, 201, 168, 0.16);
}

html[data-theme="brown"] .card {
  background: linear-gradient(
    155deg,
    #4a3224 0%,
    #3d281c 28%,
    #322018 58%,
    #241610 100%
  );
  border-color: rgba(232, 201, 168, 0.14);
  box-shadow:
    inset 0 1px 0 rgba(255, 248, 240, 0.07),
    0 10px 28px rgba(12, 6, 2, 0.32);
}

html[data-theme="brown"] .card:hover {
  border-color: rgba(245, 234, 216, 0.32);
  box-shadow:
    inset 0 1px 0 rgba(255, 248, 240, 0.1),
    0 16px 40px rgba(12, 6, 2, 0.42),
    0 0 0 1px rgba(201, 149, 106, 0.12);
}

html[data-theme="brown"] .card--linked:hover .card__title {
  color: var(--latte-cream);
}

html[data-theme="brown"] .card__lead {
  color: #d4a574;
}

html[data-theme="brown"] .card__rating,
html[data-theme="brown"] .card-menu__trigger {
  background: linear-gradient(180deg, rgba(12, 6, 4, 0.55) 0%, rgba(24, 14, 10, 0.42) 100%);
  border-color: rgba(232, 201, 168, 0.14);
}

html[data-theme="brown"] .modal__panel,
html[data-theme="brown"] .app-dialog__panel {
  background: linear-gradient(
    180deg,
    #3f2a1c 0%,
    #322018 38%,
    #261810 100%
  );
  border-color: rgba(245, 234, 216, 0.22);
  box-shadow:
    inset 0 1px 0 rgba(255, 248, 240, 0.08),
    0 28px 64px rgba(12, 6, 2, 0.55);
}

html[data-theme="brown"] .add-mode-tabs {
  background: linear-gradient(180deg, rgba(8, 4, 2, 0.45) 0%, rgba(18, 10, 6, 0.58) 100%);
}

html[data-theme="brown"] .add-mode-tab--active {
  color: #3d2318;
  background: linear-gradient(180deg, #e8d4b8 0%, #d4b896 100%);
  box-shadow: none;
}

html[data-theme="brown"] .add-mode-tab--active:hover,
html[data-theme="brown"] .add-mode-tab--active:focus,
html[data-theme="brown"] .add-mode-tab--active:focus-visible {
  color: #3d2318;
  background: linear-gradient(180deg, #e8d4b8 0%, #d4b896 100%);
}

html[data-theme="brown"] .add-panel-hint {
  background: linear-gradient(
    135deg,
    rgba(255, 248, 240, 0.06) 0%,
    rgba(201, 149, 106, 0.1) 100%
  );
  border-color: rgba(232, 201, 168, 0.18);
}

html[data-theme="brown"] .gate__card {
  background: linear-gradient(
    180deg,
    #3f2a1c 0%,
    #322018 45%,
    #261810 100%
  );
  border-color: rgba(245, 234, 216, 0.22);
  box-shadow:
    inset 0 1px 0 rgba(255, 248, 240, 0.08),
    0 24px 56px rgba(12, 6, 2, 0.5);
}

html[data-theme="brown"] .gate__mode--active {
  color: #3d2318;
  background: linear-gradient(180deg, #e8d4b8 0%, #d4b896 100%);
  box-shadow: none;
}

html[data-theme="brown"] .gate__lang-btn--active,
html[data-theme="brown"] .account-menu__lang-btn--active,
html[data-theme="brown"] .theme-option--active {
  color: #3d2318;
  background: linear-gradient(180deg, #e8d4b8 0%, #d4b896 100%);
  border-color: transparent;
  box-shadow: none;
}

html[data-theme="brown"] .account-menu__panel {
  background: linear-gradient(180deg, #322018 0%, #261810 100%);
  border-color: rgba(232, 201, 168, 0.2);
  box-shadow:
    inset 0 1px 0 rgba(255, 248, 240, 0.06),
    0 16px 40px rgba(12, 6, 2, 0.45);
}

html[data-theme="brown"] .genre-chip--filter {
  color: #1a1208;
  background: linear-gradient(180deg, #e8d4bc 0%, #d4b896 100%);
  border-color: rgba(232, 201, 168, 0.45);
}

html[data-theme="brown"] .genre-chip--filter .genre-chip__remove:hover {
  background: rgba(26, 18, 8, 0.1);
}

html[data-theme="brown"] .rating-picker__star--filled .rating-picker__star-icon {
  color: var(--latte-cream);
  filter: drop-shadow(0 0 6px rgba(232, 201, 168, 0.35));
}

html[data-theme="brown"] .btn--ghost:hover {
  border-color: rgba(232, 201, 168, 0.32);
  background: rgba(255, 248, 240, 0.05);
}

html[data-theme="brown"] .modal__backdrop {
  background: rgba(12, 6, 2, 0.78);
}