:root,
:root[data-theme-family="watchman"] {
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

[x-cloak] {
  display: none !important;
}

:root {
  --watchman-bg: #F4F3EA;
  --watchman-surface: #FBFAF3;
  --watchman-surface-muted: #EEEBDD;
  --watchman-surface-elevated: #FFFFFF;
  --watchman-hover-surface: #ECE8D7;
  --watchman-primary: #5E6F3B;
  --watchman-primary-soft: #95A96A;
  --watchman-secondary: #8A6A45;
  --watchman-accent: #B8860B;
  --watchman-accent-muted: #7E8B5A;
  --watchman-text: #1C2118;
  --watchman-muted: #5B6452;
  --watchman-subtle: #8B9282;
  --watchman-border: #D9D6C8;
  --watchman-border-strong: #B8B29C;
  --watchman-chip: #EEEBDD;
  --watchman-chip-active: #5E6F3B;
  --watchman-chip-text: #4E5748;
  --watchman-chip-text-active: #FFFFFF;
  --watchman-success: #4F7A33;
  --watchman-warning: #B8860B;
  --watchman-danger: #B4543D;
  --watchman-danger-surface: rgba(180, 84, 61, 0.08);
  --watchman-info: #6C7A57;
  color-scheme: light;
}

:root[data-theme-family="watchman"][data-theme="dark"] {
  --watchman-bg: #0d120b;
  --watchman-surface: #151c13;
  --watchman-surface-muted: #20291D;
  --watchman-surface-elevated: #283124;
  --watchman-hover-surface: #303A2B;
  --watchman-primary: #556B2F;
  --watchman-primary-soft: #B7C98A;
  --watchman-secondary: #8B6F47;
  --watchman-accent: #D4A017;
  --watchman-accent-muted: #6E7F4B;
  --watchman-text: #E8EDE0;
  --watchman-muted: #A8B39C;
  --watchman-subtle: #7C876F;
  --watchman-border: #36412f;
  --watchman-border-strong: #556B2F;
  --watchman-chip: #20291D;
  --watchman-chip-active: #556B2F;
  --watchman-chip-text: #B3BEA6;
  --watchman-chip-text-active: #F7F8F3;
  --watchman-success: #6FAE4B;
  --watchman-warning: #D4A017;
  --watchman-danger: #C65A3A;
  --watchman-danger-surface: rgba(198, 90, 58, 0.16);
  --watchman-info: #A3B18A;
  color-scheme: dark;
}

:root[data-theme-family="lordsTwins"] {
  --watchman-bg: #FFFFFF;
  --watchman-surface: #F9FAFB;
  --watchman-surface-muted: #F3F4F6;
  --watchman-surface-elevated: #FFFFFF;
  --watchman-hover-surface: #EFF6FF;
  --watchman-primary: #0284C7;
  --watchman-primary-soft: #38BDF8;
  --watchman-secondary: #EC4899;
  --watchman-accent: #0369A1;
  --watchman-accent-muted: #F9A8D4;
  --watchman-text: #111827;
  --watchman-muted: #4B5563;
  --watchman-subtle: #6B7280;
  --watchman-border: #D1D5DB;
  --watchman-border-strong: #D78BB2;
  --watchman-chip: #F3F4F6;
  --watchman-chip-active: #0284C7;
  --watchman-chip-text: #374151;
  --watchman-chip-text-active: #FFFFFF;
  --watchman-success: #16A34A;
  --watchman-warning: #D97706;
  --watchman-danger: #DC2626;
  --watchman-danger-surface: rgba(220, 38, 38, 0.08);
  --watchman-info: #0284C7;
  color-scheme: light;
}

:root[data-theme-family="lordsTwins"][data-theme="dark"] {
  --watchman-bg: #111827;
  --watchman-surface: #182231;
  --watchman-surface-muted: #1F2937;
  --watchman-surface-elevated: #223247;
  --watchman-hover-surface: #26384F;
  --watchman-primary: #38BDF8;
  --watchman-primary-soft: #7DD3FC;
  --watchman-secondary: #F472B6;
  --watchman-accent: #60A5FA;
  --watchman-accent-muted: #F9A8D4;
  --watchman-text: #F3F4F6;
  --watchman-muted: #CBD5E1;
  --watchman-subtle: #94A3B8;
  --watchman-border: #374151;
  --watchman-border-strong: #7C3F68;
  --watchman-chip: #1F2937;
  --watchman-chip-active: #38BDF8;
  --watchman-chip-text: #D1D5DB;
  --watchman-chip-text-active: #0F172A;
  --watchman-success: #4ADE80;
  --watchman-warning: #F59E0B;
  --watchman-danger: #F87171;
  --watchman-danger-surface: rgba(248, 113, 113, 0.16);
  --watchman-info: #38BDF8;
  color-scheme: dark;
}

:root[data-theme-family="myBible"] {
  --watchman-bg: #FFFFFF;
  --watchman-surface: #F5F5F5;
  --watchman-surface-muted: #FFF7FB;
  --watchman-surface-elevated: #FFFFFF;
  --watchman-hover-surface: #EFFBFF;
  --watchman-primary: #00BFFF;
  --watchman-primary-soft: #B3ECFF;
  --watchman-secondary: #FF69B4;
  --watchman-accent: #C026D3;
  --watchman-accent-muted: #A16207;
  --watchman-text: #111111;
  --watchman-muted: #5B6678;
  --watchman-subtle: #94A3B8;
  --watchman-border: #E5E5E5;
  --watchman-border-strong: #CBD5E1;
  --watchman-chip: #FFFFFF;
  --watchman-chip-active: #FF69B4;
  --watchman-chip-text: #1F2937;
  --watchman-chip-text-active: #FFFFFF;
  --watchman-success: #16A34A;
  --watchman-warning: #D97706;
  --watchman-danger: #E11D48;
  --watchman-danger-surface: rgba(225, 29, 72, 0.08);
  --watchman-info: #00BFFF;
  color-scheme: light;
}

:root[data-theme-family="myBible"][data-theme="dark"] {
  --watchman-bg: #0A1118;
  --watchman-surface: #132131;
  --watchman-surface-muted: #16273A;
  --watchman-surface-elevated: #172A3D;
  --watchman-hover-surface: #1D334A;
  --watchman-primary: #00BFFF;
  --watchman-primary-soft: #7DD3FC;
  --watchman-secondary: #FF69B4;
  --watchman-accent: #F472B6;
  --watchman-accent-muted: #FDE68A;
  --watchman-text: #E5EDF5;
  --watchman-muted: #9FB4C9;
  --watchman-subtle: #7B92AA;
  --watchman-border: #28435F;
  --watchman-border-strong: #3B5E80;
  --watchman-chip: #16273A;
  --watchman-chip-active: #00BFFF;
  --watchman-chip-text: #D9E5F2;
  --watchman-chip-text-active: #0A1118;
  --watchman-success: #34D399;
  --watchman-warning: #FBBF24;
  --watchman-danger: #FB7185;
  --watchman-danger-surface: rgba(251, 113, 133, 0.16);
  --watchman-info: #00BFFF;
  color-scheme: dark;
}

body {
  background: var(--watchman-bg);
  color: var(--watchman-text);
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: 0;
  overflow-x: hidden;
}

html {
  overflow-x: hidden;
}

* {
  min-width: 0;
}

::-webkit-scrollbar {
  height: 8px;
  width: 8px;
}

::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 9999px;
}

.brand-titlebar {
  background:
    radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--watchman-accent) 24%, transparent), transparent 25%),
    radial-gradient(circle at 82% 12%, color-mix(in srgb, var(--watchman-primary) 30%, transparent), transparent 28%),
    linear-gradient(115deg, #0D120B 0%, #1C2419 48%, #3B2D17 100%);
}

.app-card {
  background: var(--watchman-surface);
  border: 1px solid var(--watchman-border);
}

.manage-edit-action {
  align-items: center;
  background: var(--watchman-surface-muted);
  border: 1px solid var(--watchman-border);
  border-radius: 0.5rem;
  color: var(--watchman-muted);
  display: inline-grid;
  flex: 0 0 auto;
  height: 2.25rem;
  justify-content: center;
  transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
  width: 2.25rem;
}

.manage-edit-action:hover {
  background: var(--watchman-hover-surface);
  border-color: var(--watchman-border-strong);
  color: var(--watchman-text);
}

.muted {
  color: var(--watchman-muted);
}

.spin {
  animation: spin 0.9s linear infinite;
}

.loading-flower {
  animation: spin 1.1s linear infinite;
  background:
    radial-gradient(circle at 50% 8%, var(--watchman-primary) 0 14%, transparent 15%),
    radial-gradient(circle at 82% 26%, var(--watchman-secondary) 0 14%, transparent 15%),
    radial-gradient(circle at 82% 74%, var(--watchman-primary) 0 14%, transparent 15%),
    radial-gradient(circle at 50% 92%, var(--watchman-secondary) 0 14%, transparent 15%),
    radial-gradient(circle at 18% 74%, var(--watchman-primary) 0 14%, transparent 15%),
    radial-gradient(circle at 18% 26%, var(--watchman-secondary) 0 14%, transparent 15%),
    radial-gradient(circle at 50% 50%, currentColor 0 13%, transparent 14%);
  display: inline-block;
  flex: 0 0 auto;
  height: 1rem;
  width: 1rem;
}

.loading-flower-lg {
  height: 1.25rem;
  width: 1.25rem;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.run-chip-active {
  position: relative;
  overflow: hidden;
}

.run-chip-active::after {
  animation: run-chip 1.4s linear infinite;
  background: linear-gradient(90deg, transparent, var(--watchman-accent), transparent);
  bottom: 0;
  content: "";
  height: 2px;
  left: -60%;
  position: absolute;
  width: 60%;
}

@keyframes run-chip {
  to {
    left: 100%;
  }
}

.theme-dark .dark-surface,
:root[data-theme="dark"] .bg-white {
  background-color: var(--watchman-surface) !important;
}

:root[data-theme="dark"] .bg-slate-50,
:root[data-theme="dark"] .bg-slate-100,
:root[data-theme="dark"] .bg-gray-50 {
  background-color: var(--watchman-surface-muted) !important;
}

:root[data-theme="dark"] .border-slate-200,
:root[data-theme="dark"] .border-gray-200,
:root[data-theme="dark"] .divide-slate-200 > :not([hidden]) ~ :not([hidden]) {
  border-color: var(--watchman-border) !important;
}

:root[data-theme="dark"] .text-slate-900,
:root[data-theme="dark"] .text-gray-900,
:root[data-theme="dark"] .text-slate-800 {
  color: var(--watchman-text) !important;
}

:root[data-theme="dark"] .text-slate-600,
:root[data-theme="dark"] .text-slate-500,
:root[data-theme="dark"] .text-gray-600 {
  color: var(--watchman-muted) !important;
}

:root[data-theme="dark"] input,
:root[data-theme="dark"] select,
:root[data-theme="dark"] textarea {
  background-color: #20291d !important;
  border-color: var(--watchman-border) !important;
  color: var(--watchman-text) !important;
}

.text-slate-900,
.text-gray-900,
.text-slate-800 {
  color: var(--watchman-text) !important;
}

.text-slate-600,
.text-slate-500,
.text-gray-600 {
  color: var(--watchman-muted) !important;
}

.bg-white {
  background-color: var(--watchman-surface-elevated) !important;
}

.bg-slate-50,
.bg-slate-100 {
  background-color: var(--watchman-surface-muted) !important;
}

.border-slate-200,
.border-gray-200 {
  border-color: var(--watchman-border) !important;
}

.bg-slate-900 {
  background-color: var(--watchman-primary) !important;
}

.hover\:bg-slate-700:hover,
.hover\:bg-slate-50:hover {
  background-color: var(--watchman-hover-surface) !important;
}

.text-white {
  color: var(--watchman-chip-text-active) !important;
}

.break-anywhere {
  overflow-wrap: anywhere;
  word-break: break-word;
}

@media (max-width: 480px) {
  .mobile-tab-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mobile-tight-card {
    border-radius: 1rem;
    padding: 1rem;
  }

  .mobile-shell-pad {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
}