/* ===== Theme switch (GeneratePress + Bootstrap 5.3) ===== */

/* Variables */
:root {
  --bg: #ffffff;
  --bg-soft: #f7f7fb;
  --bg-anime-info: #eeeef3;
  --text: #0f172a;
  --home-text-title: linear-gradient(to right, #006859, #022e58);
  --muted: #6b7280;
  --treding-muted: #ff0505;
  --line: #e5e7eb;
  --brand: #0ea5e9;
  --text-related-img: #1e5841;

  --ep-badge-bg1: #4f46e5;
  --ep-badge-bg2: #0ea5e9;
  --ep-badge-text: #e5e7eb;

  /* Bridge to GeneratePress vars */
  --base-2: var(--bg);
  --base-3: var(--bg-soft);
  --contrast: var(--text);
  --accent: var(--brand);

  /* Toggle + Shadow */
  --toggle-start: #4f46e5;
  --toggle-end: #0ea5e9;
  --shadow: rgba(2, 132, 199, .35);
}

/* Dark variables */
html[data-theme="dark"] {
  color-scheme: dark;

  --bg: #0b1220;
  --bg-soft: #111a2b;
  --bg-anime-info: #111a2b;
  --text: #e5e7eb;
  --text-related-img: #dfee05;

  --home-text-title: linear-gradient(90deg, #41ff00, #fffe00);
  --muted: #9ca3af;
  --treding-muted: #f3f909;
  --line: #223148;
  --brand: #38bdf8;

  --toggle-start: #0ea5e9;
  --toggle-end: #22d3ee;
  --shadow: rgba(56, 189, 248, .35);
}

/* Base */
html,
body {
  background-color: var(--bg);
  color: var(--text);
}


/* Surfaces */
.separate-containers .inside-article,
.widget,
.card,
.topic-row,
.topic-head,
.topic-content,
.completed-header,
.section-heading-wrapper,
.bixbox,
.gp-widget-area,
.site-footer,
.site-header,
.main-navigation{background:var(--base-2);color:var(--text);border-color:var(--line)}

/* Elements */
hr,.wp-block-separator{border-color:var(--line)}
a{color:var(--brand);text-decoration-thickness:.06em}
a:hover{color:color-mix(in srgb,var(--brand) 85%,#000 15%)}
.widget-title,.section-title,.latest-release-title{color:var(--text)}
input[type="text"],input[type="search"],input[type="email"],select,textarea{background-color:var(--base-2);color:var(--text);border:1px solid var(--line)}
input::placeholder,textarea::placeholder{color:var(--muted)}
html[data-theme="dark"] .sidebar .widget{background:var(--bg-soft)}
html[data-theme="dark"] .widget-title{border-color:var(--line)}

/* Toggle button (.theme-toggle and alias .agn-theme-toggle) */
.theme-toggle,
.agn-theme-toggle{--size:36px;position:relative;display:inline-flex;align-items:center;justify-content:center;width:var(--size);height:var(--size);margin-left:.5rem;border:0;border-radius:999px;cursor:pointer;background:linear-gradient(135deg,var(--toggle-start),var(--toggle-end));color:#fff;box-shadow:0 8px 20px var(--shadow);transition:transform .15s ease,box-shadow .15s ease,background .2s ease;-webkit-appearance:none;appearance:none}
.theme-toggle:hover,
.agn-theme-toggle:hover{transform:translateY(-1px) scale(1.03);box-shadow:0 10px 26px var(--shadow)}
.theme-toggle:focus-visible,
.agn-theme-toggle:focus-visible{outline:2px solid color-mix(in srgb,var(--brand) 70%,#fff 30%);outline-offset:2px}
@media (min-width:768px){.theme-toggle,.agn-theme-toggle{--size:38px}}
@media (prefers-reduced-motion:reduce){.theme-toggle,.agn-theme-toggle{transition:none}}

/* Layout in user widget */
.user-system-widget{display:flex;align-items:center;gap:12px}
.user-system-widget .theme-toggle,
.user-system-widget .agn-theme-toggle{margin-left:4px}

/* Icon handling */
.theme-toggle svg,
.agn-theme-toggle svg{display:none!important}
.theme-toggle::before,
.agn-theme-toggle::before{content:none!important;display:none!important}

/* Icons per theme */
html[data-theme="light"] .theme-toggle,
html[data-theme="light"] .agn-theme-toggle{--icon:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'><path d='M6.76 4.84l-1.8-1.79-1.41 1.41 1.79 1.8 1.42-1.42zM1 13h3v-2H1v2zm10-9h2V1h-2v3zm7.04.46l1.79-1.8-1.41-1.41-1.8 1.79 1.42 1.42zM17 13h3v-2h-3v2zm-5 8h2v-3h-2v3zm-7.04-.46l1.8 1.79 1.41-1.41-1.79-1.8-1.42 1.42zM4 17H1v-2h3v2zm16.24 1.76l-1.8-1.79-1.41 1.41 1.79 1.8 1.42-1.42zM12 8a4 4 0 100 8 4 4 0 000-8z'/></svg>")}
html[data-theme="dark"] .theme-toggle,
html[data-theme="dark"] .agn-theme-toggle{--icon:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'><path d='M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z'/></svg>")}

/* Draw icon on top of gradient */
.theme-toggle,
.agn-theme-toggle{background-image:var(--icon),linear-gradient(135deg,var(--toggle-start),var(--toggle-end));background-repeat:no-repeat,no-repeat;background-position:center,center;background-size:18px 18px,100% 100%}