/* ============================================================
   Sub2API Cartoon Theme v2 (Kawaii / Sticker Style)
   Injected via nginx sub_filter - safe to remove anytime
   Keeps the application's light/dark color system intact.
   ============================================================ */
:root {
  --ct-orange: #ff8a3d;
  --ct-orange-soft: #ffb25c;
  --ct-blue: #5ca8ff;
  --ct-green: #58c9a5;
  --ct-green-soft: #7fe0c0;
  --ct-yellow: #ffd166;
  --ct-pink: #ff9eb5;
  --ct-light-bg: #fff7ea;
  --ct-light-surface: #fffdf7;
  --ct-light-ink: #4a3b32;
  --ct-light-muted: #806f64;
  --ct-light-line: rgba(74, 59, 50, 0.38);
  --ct-dark-bg: #080f24;
  --ct-dark-surface: rgba(30, 41, 59, 0.78);
  --ct-dark-surface-solid: #1e293b;
  --ct-dark-ink: #f4f7ff;
  --ct-dark-muted: #9aa9c4;
  --ct-dark-line: rgba(148, 163, 184, 0.28);
  --ct-dark-shadow: rgba(1, 7, 22, 0.7);
  --ct-light-shadow: rgba(74, 59, 50, 0.72);
}

html:not(.dark) {
  --ct-bg: var(--ct-light-bg);
  --ct-surface: var(--ct-light-surface);
  --ct-ink: var(--ct-light-ink);
  --ct-muted: var(--ct-light-muted);
  --ct-line: var(--ct-light-line);
  --ct-shadow: var(--ct-light-shadow);
}

html.dark {
  --ct-bg: var(--ct-dark-bg);
  --ct-surface: var(--ct-dark-surface-solid);
  --ct-ink: var(--ct-dark-ink);
  --ct-muted: var(--ct-dark-muted);
  --ct-line: var(--ct-dark-line);
  --ct-shadow: var(--ct-dark-shadow);
}

html,
body {
  background-color: var(--ct-bg) !important;
}

body {
  color: var(--ct-ink) !important;
  font-family: "Comic Sans MS", "Chalkboard SE", "PingFang SC", "Microsoft YaHei", sans-serif !important;
}

body * {
  font-family: inherit;
}

/* Cards and panels: use the same surface family as the active app theme. */
.card,
.card-glass,
.bg-white.rounded-xl,
.bg-white[class*="rounded"] {
  background-color: var(--ct-surface) !important;
  border: 2px solid var(--ct-line) !important;
  border-radius: 18px !important;
  box-shadow: 4px 4px 0 var(--ct-shadow) !important;
}

html.dark .card-glass,
html.dark .shadow-glass {
  background-color: var(--ct-dark-surface) !important;
}

/* Sidebar */
.sidebar {
  background-color: var(--ct-bg) !important;
  border-right: 2px solid var(--ct-line) !important;
}

.sidebar-header {
  border-bottom: 2px dashed var(--ct-line) !important;
}

.sidebar-link {
  border-radius: 12px !important;
  border: 2px solid transparent;
  transition: transform 0.12s ease, background-color 0.12s ease;
}

.sidebar-link:hover {
  background: rgba(255, 178, 92, 0.2) !important;
  transform: translateX(3px) rotate(-0.4deg);
}

.sidebar-link.router-link-active,
.sidebar-link.active {
  background: var(--ct-yellow) !important;
  border-color: var(--ct-light-ink) !important;
  box-shadow: 3px 3px 0 var(--ct-shadow) !important;
  color: var(--ct-light-ink) !important;
  font-weight: 700;
}

/* Buttons */
.btn {
  border-radius: 999px !important;
  font-weight: 700 !important;
  transition: transform 0.12s ease, box-shadow 0.12s ease !important;
}

.btn:active {
  transform: scale(0.97) translateY(1px);
}

.btn-primary {
  background-image: linear-gradient(135deg, var(--ct-green), var(--ct-green-soft)) !important;
  border: 2px solid var(--ct-light-ink) !important;
  color: #143d31 !important;
  text-shadow: none !important;
  box-shadow: 3px 3px 0 var(--ct-shadow) !important;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 4px 5px 0 var(--ct-shadow) !important;
}

.btn-secondary {
  background: rgba(92, 168, 255, 0.16) !important;
  border: 2px solid var(--ct-blue) !important;
  color: var(--ct-blue) !important;
  box-shadow: 3px 3px 0 var(--ct-shadow) !important;
}

.btn-danger {
  background: linear-gradient(135deg, #ff7a7a, var(--ct-pink)) !important;
  border: 2px solid var(--ct-light-ink) !important;
  color: #fff !important;
  box-shadow: 3px 3px 0 var(--ct-shadow) !important;
}

button[type="submit"],
.btn-success {
  background: linear-gradient(135deg, var(--ct-green), var(--ct-green-soft)) !important;
  border: 2px solid var(--ct-light-ink) !important;
  color: #143d31 !important;
  box-shadow: 3px 3px 0 var(--ct-shadow) !important;
}

/* Text fields only. Radio and checkbox controls must keep native geometry. */
input:not([type="radio"]):not([type="checkbox"]),
select,
textarea {
  border-radius: 12px !important;
  border: 2px solid var(--ct-line) !important;
  background: var(--ct-surface) !important;
  color: var(--ct-ink) !important;
}

html:not(.dark) input:not([type="radio"]):not([type="checkbox"]),
html:not(.dark) select,
html:not(.dark) textarea {
  background: var(--ct-light-surface) !important;
}

html.dark input:not([type="radio"]):not([type="checkbox"]),
html.dark select,
html.dark textarea {
  background: rgba(15, 23, 42, 0.72) !important;
}

input:not([type="radio"]):not([type="checkbox"]):focus,
select:focus,
textarea:focus {
  outline: none !important;
  border-color: var(--ct-orange) !important;
  box-shadow: 0 0 0 3px rgba(255, 138, 61, 0.22) !important;
}

input[type="radio"],
input[type="checkbox"] {
  width: 1rem !important;
  height: 1rem !important;
  min-width: 1rem !important;
  min-height: 1rem !important;
  margin: 0 0.45rem 0 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  accent-color: var(--ct-orange) !important;
  vertical-align: middle !important;
}

/* Tables */
table {
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

thead th {
  background: var(--ct-yellow) !important;
  color: var(--ct-light-ink) !important;
  border-bottom: 2px solid var(--ct-light-ink) !important;
  font-weight: 800 !important;
}

tbody tr:nth-child(even) td {
  background: rgba(255, 247, 234, 0.12) !important;
}

tbody tr:hover td {
  background: rgba(255, 209, 102, 0.18) !important;
}

/* Modals and notices */
.modal-overlay {
  backdrop-filter: blur(3px);
}

.modal-overlay > div,
[class*="modal"] .card {
  border: 2px solid var(--ct-line) !important;
  border-radius: 20px !important;
  box-shadow: 6px 6px 0 var(--ct-shadow) !important;
}

.modal-header {
  border-bottom: 2px dashed var(--ct-line) !important;
  font-weight: 800;
}

[class*="toast"] {
  border: 2px solid var(--ct-light-ink) !important;
  border-radius: 14px !important;
  box-shadow: 4px 4px 0 var(--ct-shadow) !important;
}

/* Badges and small chips */
[class*="badge"],
span[class*="rounded-full"][class*="px-"] {
  border-radius: 999px !important;
  border: 1.5px solid var(--ct-line) !important;
  font-weight: 700 !important;
}

/* Scrollbar */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--ct-orange-soft);
  border-radius: 999px;
  border: 2px solid var(--ct-bg);
}

@media (max-width: 640px) {
  .card,
  .card-glass,
  .bg-white.rounded-xl,
  .bg-white[class*="rounded"] {
    border-radius: 14px !important;
    box-shadow: 3px 3px 0 var(--ct-shadow) !important;
  }
}