/**
 * Flat design layer — loaded after bundled theme CSS.
 * Scoped to html.theme-flat (set in include_header_general.tpl).
 */

/* -------------------------------------------------------------------------- */
/* Design tokens                                                               */
/* -------------------------------------------------------------------------- */

html.theme-flat {
  --flat-accent: #2563eb;
  --flat-accent-hover: #1d4ed8;
  --flat-accent-soft: rgba(37, 99, 235, 0.12);
  --flat-bg-page: #e8ebf3;
  --flat-bg-elevated: rgba(255, 255, 255, 0.72);
  --flat-surface: #ffffff;
  --flat-border: #e2e6ef;
  --flat-border-strong: #c8cedc;
  --flat-text: #111827;
  --flat-text-muted: #5b6474;
  --flat-chip: #f0f2f8;
  --flat-radius: 8px;
  --flat-radius-sm: 5px;
  --flat-radius-lg: 14px;
  --flat-space: clamp(14px, 3vw, 26px);
  --flat-content-max: 1320px;
  --flat-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05);
  --flat-shadow-md: 0 4px 18px rgba(15, 23, 42, 0.07), 0 1px 3px rgba(15, 23, 42, 0.04);
  --flat-shadow-nav: 0 6px 24px rgba(15, 23, 42, 0.06);
}

html.theme-flat {
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(37, 99, 235, 0.07), transparent 55%),
    radial-gradient(900px 500px at 90% 0%, rgba(99, 102, 241, 0.05), transparent 50%),
    var(--flat-bg-page) !important;
}

html.theme-flat body {
  color: var(--flat-text);
  font-family:
    ui-sans-serif,
    system-ui,
    -apple-system,
    "Segoe UI",
    Roboto,
    "Noto Sans TC",
    "Helvetica Neue",
    Arial,
    sans-serif;
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}

html.theme-flat .no-touch a:hover {
  color: var(--flat-accent-hover);
}

/* -------------------------------------------------------------------------- */
/* Shell & content width                                                       */
/* -------------------------------------------------------------------------- */

html.theme-flat .container {
  background-image: none !important;
  background-color: transparent !important;
}

html.theme-flat .content {
  max-width: var(--flat-content-max);
  padding-left: var(--flat-space);
  padding-right: var(--flat-space);
}

html.theme-flat .header-inner,
html.theme-flat .navigation {
  max-width: var(--flat-content-max);
  padding-left: var(--flat-space);
  padding-right: var(--flat-space);
}

html.theme-flat .main-content {
  padding-bottom: 2.75rem;
}

html.theme-flat .box {
  margin-bottom: 2.25rem;
}

/* -------------------------------------------------------------------------- */
/* Top utility bar                                                             */
/* -------------------------------------------------------------------------- */

html.theme-flat .top-links {
  background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%) !important;
  border-bottom: 1px solid rgba(37, 99, 235, 0.35);
  padding: 10px var(--flat-space);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset;
}

html.theme-flat .member-links a {
  border-radius: 999px;
  padding: 5px 12px;
  transition:
    background-color 0.15s ease,
    color 0.15s ease;
}

html.theme-flat .no-touch .member-links a:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #f8fafc !important;
}

html.theme-flat .member-links .languages {
  border-radius: var(--flat-radius-sm);
}

html.theme-flat .member-links .languages li:last-child a {
  border-radius: 0 0 var(--flat-radius-sm) var(--flat-radius-sm);
}

/* -------------------------------------------------------------------------- */
/* Header + search                                                             */
/* -------------------------------------------------------------------------- */

html.theme-flat .header {
  background: var(--flat-bg-elevated);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 12px 0;
  border-bottom: 1px solid var(--flat-border);
  box-shadow: var(--flat-shadow-md);
}

html.theme-flat .search form {
  box-shadow: var(--flat-shadow-sm) !important;
  border: 1px solid var(--flat-border-strong);
  border-radius: 999px;
  background: var(--flat-surface);
  overflow: hidden;
}

html.theme-flat .search .search-text input {
  background: var(--flat-chip);
  color: var(--flat-text);
  border-radius: 999px 0 0 999px;
  font-size: 14px;
  padding-top: 12px;
  padding-bottom: 12px;
}

html.theme-flat .search-text input::placeholder {
  color: var(--flat-text-muted) !important;
}

html.theme-flat .search .search-button {
  border-radius: 0 999px 999px 0;
  background-color: var(--flat-accent);
}

html.theme-flat .no-touch .search .search-button:hover {
  background-color: var(--flat-accent-hover);
}

html.theme-flat .logo .logo-word {
  border-bottom-color: var(--flat-accent);
}

/* -------------------------------------------------------------------------- */
/* Main nav                                                                    */
/* -------------------------------------------------------------------------- */

html.theme-flat .header + nav {
  background: var(--flat-surface);
  border-top: none;
  border-bottom: 1px solid var(--flat-border);
  box-shadow: var(--flat-shadow-nav);
}

html.theme-flat .navigation .primary .drop > a {
  border-radius: 999px;
  background-color: var(--flat-chip);
  padding: 10px 32px 10px 48px;
}

html.theme-flat .navigation .primary .drop ul li a {
  background-color: var(--flat-chip);
  color: var(--flat-text);
}

html.theme-flat .navigation .primary .drop ul {
  border-radius: 0 0 var(--flat-radius-lg) var(--flat-radius-lg);
  box-shadow: var(--flat-shadow-md);
  border: 1px solid var(--flat-border);
  border-top: none;
  overflow: hidden;
}

html.theme-flat .navigation .primary .drop > a:before {
  color: var(--flat-text-muted);
}

html.theme-flat .navigation .primary a {
  color: var(--flat-text);
}

html.theme-flat .no-touch .navigation .primary a:hover {
  color: var(--flat-accent);
}

html.theme-flat .navigation .primary a:before {
  background-color: var(--flat-accent);
}

html.theme-flat .navigation .primary .selected a {
  color: var(--flat-accent);
}

html.theme-flat .navigation .primary .drop:hover > a {
  background-color: var(--flat-accent);
  color: #fff !important;
}

html.theme-flat .navigation .primary .drop:hover > a:before {
  color: #fff !important;
}

html.theme-flat .navigation .primary ul li a:before {
  display: none;
}

html.theme-flat .navigation .secondary a {
  color: var(--flat-text-muted);
}

html.theme-flat .navigation .secondary a:before {
  background-color: var(--flat-accent);
}

html.theme-flat .no-touch .navigation .secondary a:hover {
  color: var(--flat-accent);
}

/* Hamburger strokes (base theme assumes dark nav bg) */
html.theme-flat .navigation .button .ico-bar {
  background: var(--flat-text);
}

html.theme-flat .navigation.open .button .ico-bar {
  background: var(--flat-accent);
}

/* -------------------------------------------------------------------------- */
/* Headlines & page titles                                                     */
/* -------------------------------------------------------------------------- */

html.theme-flat h1,
html.theme-flat h2 {
  color: var(--flat-text);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  font-size: clamp(1.45rem, 2.1vw, 1.95rem);
}

html.theme-flat h1 a,
html.theme-flat h2 a {
  text-decoration: none;
  color: inherit;
}

html.theme-flat .no-touch h1 a:hover,
html.theme-flat .no-touch h2 a:hover {
  color: var(--flat-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

html.theme-flat .headline {
  border-bottom: 1px solid var(--flat-border);
  padding: 1.35rem 0 14px;
  margin-bottom: 1.25rem;
  gap: 10px 14px;
}

html.theme-flat .headline .button,
html.theme-flat .headline .more {
  border-radius: var(--flat-radius-sm);
  font-weight: 600;
}

html.theme-flat .no-touch .headline .more:hover,
html.theme-flat .no-touch .headline .button:hover {
  background-color: var(--flat-accent-hover);
  color: #fff;
}

/* -------------------------------------------------------------------------- */
/* Sidebar                                                                     */
/* -------------------------------------------------------------------------- */

html.theme-flat .sidebar {
  box-shadow: var(--flat-shadow-md) !important;
  border: 1px solid var(--flat-border);
  border-radius: var(--flat-radius-lg);
  background: var(--flat-surface);
}

@media screen and (min-width: 961px) {
  html.theme-flat .sidebar {
    position: sticky;
    top: 10px;
    align-self: flex-start;
    z-index: 4;
    max-height: calc(100dvh - 20px);
    overflow-y: auto;
    scrollbar-width: thin;
  }
}

html.theme-flat .sidebar h2 {
  color: var(--flat-text);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
}

html.theme-flat .sidebar .list a {
  color: var(--flat-text);
  border-radius: var(--flat-radius-sm);
  padding: 6px 8px;
  margin-left: -4px;
  margin-right: -4px;
}

html.theme-flat .no-touch .sidebar .list a:hover {
  background: var(--flat-accent-soft);
  color: var(--flat-accent);
}

html.theme-flat .sidebar .comments li {
  border-bottom-color: var(--flat-border);
}

/* -------------------------------------------------------------------------- */
/* Content chrome                                                              */
/* -------------------------------------------------------------------------- */

html.theme-flat .footer-margin {
  background: transparent !important;
  background-image: none !important;
  padding: 1.5rem 0;
}

/* -------------------------------------------------------------------------- */
/* Video / album / channel tiles (not list-videos premium overrides)         */
/* -------------------------------------------------------------------------- */

html.theme-flat .list-playlists .item,
html.theme-flat .list-models .item,
html.theme-flat .list-sponsors .item,
html.theme-flat .list-channels .item,
html.theme-flat .list-categories .item,
html.theme-flat .list-albums .item,
html.theme-flat .list-albums-images .item {
  box-shadow: var(--flat-shadow-sm) !important;
  border: 1px solid var(--flat-border);
  border-radius: var(--flat-radius);
  background: var(--flat-surface) !important;
  overflow: hidden;
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease;
}

html.theme-flat .no-touch .list-playlists .item:hover,
html.theme-flat .no-touch .list-models .item:hover,
html.theme-flat .no-touch .list-sponsors .item:hover,
html.theme-flat .no-touch .list-channels .item:hover,
html.theme-flat .no-touch .list-categories .item:hover,
html.theme-flat .no-touch .list-albums .item:hover,
html.theme-flat .no-touch .list-albums-images .item:hover {
  border-color: var(--flat-accent);
  box-shadow: var(--flat-shadow-md) !important;
  transform: translateY(-2px);
}

html.theme-flat .list-videos .is-hd,
html.theme-flat .list-videos-screenshots .is-hd {
  border-radius: var(--flat-radius-sm);
}

html.theme-flat .item-control {
  border-top-color: var(--flat-border);
  background: var(--flat-chip);
}

/* -------------------------------------------------------------------------- */
/* Footer                                                                      */
/* -------------------------------------------------------------------------- */

html.theme-flat .footer {
  background: linear-gradient(180deg, #0f172a 0%, #020617 100%);
  margin-top: 0.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding-top: 2rem;
}

html.theme-flat .footer .footer-wrap {
  color: #94a3b8;
  max-width: var(--flat-content-max);
  margin-left: auto;
  margin-right: auto;
  padding: 2.5rem var(--flat-space) 3rem;
}

html.theme-flat .footer .copyright a {
  color: #cbd5e1;
}

html.theme-flat .footer .nav a {
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: #e2e8f0;
  padding: 6px 14px;
}

html.theme-flat .no-touch .footer .nav a:hover {
  background: var(--flat-accent);
  color: #fff;
}

html.theme-flat .footer a:hover {
  color: #f1f5f9;
}

/* -------------------------------------------------------------------------- */
/* Sort dropdowns & filters                                                   */
/* -------------------------------------------------------------------------- */

html.theme-flat .sort {
  border-radius: var(--flat-radius);
  border: 1px solid var(--flat-border-strong);
  background: var(--flat-chip);
  color: var(--flat-text);
}

html.theme-flat .sort:focus,
html.theme-flat .sort:hover {
  border-radius: var(--flat-radius) var(--flat-radius) 0 0;
}

html.theme-flat .sort ul {
  border-radius: 0 0 var(--flat-radius) var(--flat-radius);
  border: 1px solid var(--flat-border-strong);
  border-top: none;
  background: var(--flat-surface);
}

html.theme-flat .sort:hover {
  border-color: var(--flat-accent);
}

/* -------------------------------------------------------------------------- */
/* Pagination                                                                  */
/* -------------------------------------------------------------------------- */

html.theme-flat .pagination a,
html.theme-flat .pagination span {
  border-radius: var(--flat-radius-sm) !important;
  border: 1px solid transparent;
  margin: 0 2px;
  min-width: 2.25rem;
  text-align: center;
  font-weight: 600;
}

html.theme-flat .pagination a {
  background: var(--flat-surface);
  border-color: var(--flat-border);
  color: var(--flat-text);
  box-shadow: var(--flat-shadow-sm);
}

html.theme-flat .no-touch .pagination a:hover {
  border-color: var(--flat-accent);
  color: var(--flat-accent);
}

/* -------------------------------------------------------------------------- */
/* Buttons & forms                                                             */
/* -------------------------------------------------------------------------- */

html.theme-flat .toggle-button {
  border-radius: var(--flat-radius);
  border-color: var(--flat-border-strong);
}

html.theme-flat form .progressbar {
  border-radius: var(--flat-radius);
  border-width: 1px;
  box-shadow: none;
}

html.theme-flat form .progressbar .progress {
  border-radius: var(--flat-radius-sm);
}

html.theme-flat form .success {
  border-radius: var(--flat-radius);
  background: var(--flat-accent);
}

html.theme-flat form .generic-error,
html.theme-flat .page-error {
  border-radius: var(--flat-radius-sm);
  box-shadow: none;
}

html.theme-flat form .info-message {
  border-radius: var(--flat-radius);
  background: var(--flat-chip);
  border: 1px solid var(--flat-border);
}

html.theme-flat form .info-message:before {
  display: none;
}

html.theme-flat .load-more a {
  border-radius: var(--flat-radius);
  font-weight: 600;
}

/* -------------------------------------------------------------------------- */
/* Autocomplete                                                                */
/* -------------------------------------------------------------------------- */

html.theme-flat .autocomplete-suggestions {
  border-color: var(--flat-border-strong) !important;
  border-radius: var(--flat-radius);
  box-shadow: var(--flat-shadow-md);
}

/* -------------------------------------------------------------------------- */
/* Focus visibility                                                            */
/* -------------------------------------------------------------------------- */

html.theme-flat a:focus-visible,
html.theme-flat button:focus-visible,
html.theme-flat input:focus-visible,
html.theme-flat select:focus-visible {
  outline: 2px solid var(--flat-accent);
  outline-offset: 2px;
}

/* -------------------------------------------------------------------------- */
/* Dark (“metal”) theme variant                                                */
/* -------------------------------------------------------------------------- */

html.theme-flat.theme-flat-metal {
  --flat-accent: #3b82f6;
  --flat-accent-hover: #60a5fa;
  --flat-accent-soft: rgba(59, 130, 246, 0.15);
  --flat-bg-page: #0c0e14;
  --flat-bg-elevated: rgba(26, 29, 38, 0.85);
  --flat-surface: #161a24;
  --flat-border: #2a3142;
  --flat-border-strong: #3d4658;
  --flat-text: #f1f5f9;
  --flat-text-muted: #94a3b8;
  --flat-chip: #1e2431;
  --flat-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
  --flat-shadow-md: 0 8px 32px rgba(0, 0, 0, 0.45), 0 2px 8px rgba(0, 0, 0, 0.3);
  --flat-shadow-nav: 0 8px 28px rgba(0, 0, 0, 0.35);
}

html.theme-flat.theme-flat-metal {
  background:
    radial-gradient(1000px 480px at 15% -5%, rgba(59, 130, 246, 0.08), transparent 50%),
    radial-gradient(800px 400px at 85% 5%, rgba(139, 92, 246, 0.06), transparent 45%),
    var(--flat-bg-page) !important;
}

html.theme-flat.theme-flat-metal body {
  color: var(--flat-text);
}

html.theme-flat.theme-flat-metal .no-touch a:hover {
  color: var(--flat-accent-hover);
}

html.theme-flat.theme-flat-metal .header {
  border-bottom-color: var(--flat-border);
}

html.theme-flat.theme-flat-metal .search form {
  background: var(--flat-surface);
  border-color: var(--flat-border-strong);
}

html.theme-flat.theme-flat-metal .search .search-text input {
  background: var(--flat-chip);
  color: var(--flat-text);
}

html.theme-flat.theme-flat-metal .search-text input::placeholder {
  color: var(--flat-text-muted) !important;
}

html.theme-flat.theme-flat-metal .header + nav {
  border-bottom-color: var(--flat-border);
}

html.theme-flat.theme-flat-metal .footer-margin {
  background: transparent !important;
}

html.theme-flat.theme-flat-metal .headline {
  border-bottom-color: var(--flat-border);
}

html.theme-flat.theme-flat-metal h1,
html.theme-flat.theme-flat-metal .sidebar h2,
html.theme-flat.theme-flat-metal h2 {
  color: var(--flat-text);
}

html.theme-flat.theme-flat-metal .footer .footer-wrap {
  color: var(--flat-text-muted);
}

html.theme-flat.theme-flat-metal .footer .copyright a {
  color: var(--flat-text-muted);
}

html.theme-flat.theme-flat-metal .autocomplete-suggestions {
  background: var(--flat-surface) !important;
  box-shadow: 0 14px 48px rgba(0, 0, 0, 0.55);
}

html.theme-flat.theme-flat-metal .navigation .primary .drop ul li a:hover,
html.theme-flat.theme-flat-metal .no-touch .navigation .primary ul li a:hover {
  background-color: var(--flat-accent);
  color: #fff !important;
}