/*
 * ============================================================
 *  ChadTasks — SellAuth theme skin (custom.css)
 *  Dark, professional, minimal. Neutral charcoal + one indigo
 *  accent. A real work-tool look (Linear / Notion / Todoist).
 *  No galaxy, no neon, no gaming. Survives theme updates.
 * ============================================================
 */

:root {
  --ct-radius: 12px;
  --ct-radius-sm: 8px;
  --ct-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ct-border: 255, 255, 255;
}

/* ---------- base ---------- */
* { scrollbar-width: thin; scrollbar-color: rgba(var(--ct-border), 0.15) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: rgba(var(--ct-border), 0.14); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background: rgba(var(--ct-border), 0.24); background-clip: padding-box; }
::selection { background: rgba(var(--cl-accent), 0.28); color: #fff; }

html { scroll-behavior: smooth; }
body {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  letter-spacing: -0.006em;
  background-color: rgb(var(--cl-background));
}

/* Remove all decorative background — clean, flat, professional */
#particles-js { display: none !important; }
body::before, body::after { display: none !important; content: none !important; }

/* ---------- typography ---------- */
h1, h2, h3, h4 { letter-spacing: -0.02em; }

/* Section title underline → short, subtle accent line */
hr[class*="border-accent-500"] {
  height: 2px; border: 0 !important; border-radius: 2px; width: 40px !important;
  margin-top: 0.6rem; background: rgb(var(--cl-accent)); box-shadow: none;
}
hr[class*="border-accent-500"]::before { display: none; }

/* ---------- cards ---------- */
[class*="bg-card"] {
  border-radius: var(--ct-radius);
  background-color: rgba(var(--cl-card), 0.9) !important;
  border-color: rgba(var(--ct-border), 0.08) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  backdrop-filter: none;
  transition: border-color 0.2s var(--ct-ease), transform 0.2s var(--ct-ease), box-shadow 0.2s var(--ct-ease);
}
[class*="bg-card"] > * { border-radius: inherit; }

a.group[class*="bg-card"] { overflow: hidden; }
a.group[class*="bg-card"]::before, a.group[class*="bg-card"]::after { display: none !important; content: none !important; }
a.group[class*="bg-card"]:hover {
  transform: translateY(-2px);
  border-color: rgba(var(--cl-accent), 0.4) !important;
  box-shadow: 0 8px 24px -12px rgba(0, 0, 0, 0.5);
}
a.group[class*="bg-card"] img { transition: transform 0.4s var(--ct-ease); }
a.group[class*="bg-card"]:hover img { transform: scale(1.03); }

[class*="bg-card"]:not(nav *):not(a.group):hover {
  border-color: rgba(var(--ct-border), 0.16) !important;
  transform: none;
  box-shadow: 0 1px 2px rgba(0,0,0,0.25);
}

/* ---------- navbar ---------- */
nav.component { position: sticky; top: 0; z-index: 50; }
nav.component > [class*="bg-card"] {
  border-radius: 0; border-left: 0; border-right: 0; border-top: 0;
  background-color: rgba(var(--cl-background), 0.85) !important;
  border-color: rgba(var(--ct-border), 0.08) !important;
  box-shadow: none;
  backdrop-filter: blur(10px);
}

/* ---------- buttons ---------- */
a[class*="bg-accent-500"], button[class*="bg-accent-500"],
a[class*="border-accent-500"], button[class*="border-accent-500"] {
  border-radius: var(--ct-radius-sm);
  box-shadow: none !important;
  transition: background-color 0.15s var(--ct-ease), border-color 0.15s var(--ct-ease), color 0.15s var(--ct-ease);
}
a[class*="bg-accent-500"]:not(.announcement *)::before,
a[class*="border-accent-500"]::before,
button[class*="bg-accent-500"]::before,
button[class*="border-accent-500"]::before { display: none !important; content: none !important; }
a[class*="bg-accent-500"]:hover, button[class*="bg-accent-500"]:hover { background-color: color-mix(in srgb, rgb(var(--cl-accent)), black 12%) !important; transform: none !important; }
a[class*="border-accent-500"]:hover, button[class*="border-accent-500"]:hover { background-color: rgba(var(--cl-accent), 0.1) !important; transform: none !important; }

/* ---------- announcement: quiet bar ---------- */
.announcement [class*="bg-accent-500"] {
  border: 0 !important; border-radius: 0;
  background: rgba(var(--cl-card), 0.9) !important;
  color: rgb(var(--cl-t-primary)) !important;
  border-bottom: 1px solid rgba(var(--ct-border), 0.08) !important;
  box-shadow: none; animation: none !important; font-weight: 500;
}
.announcement [class*="bg-accent-500"] * { color: rgb(var(--cl-t-primary)) !important; }

/* ---------- inputs ---------- */
input, select, textarea { border-radius: var(--ct-radius-sm) !important; }
input:focus, select:focus, textarea:focus {
  outline: none !important;
  border-color: rgb(var(--cl-accent)) !important;
  box-shadow: 0 0 0 3px rgba(var(--cl-accent), 0.15) !important;
}

/* ---------- badges ---------- */
.badges > div { border-radius: 6px !important; font-weight: 500; letter-spacing: 0; box-shadow: none; }

/* ---------- hero ---------- */
.hero-fx .hero-title {
  font-weight: 700; letter-spacing: -0.03em; color: rgb(var(--cl-t-primary));
  font-size: clamp(2.4rem, 5vw, 3.4rem); line-height: 1.06;
  /* strip any galaxy gradient/animation */
  background: none !important; -webkit-text-fill-color: currentColor !important; animation: none !important; filter: none !important;
  font-family: inherit !important;
}
.hero-fx .hero-sub {
  color: rgba(var(--cl-t-primary), 0.66); font-weight: 400; letter-spacing: -0.01em;
  font-size: clamp(1.02rem, 1.4vw, 1.18rem); line-height: 1.6;
  animation: none !important; font-family: inherit !important;
}
.hero-anim { opacity: 1 !important; animation: none !important; }
.tw-caret { display: none !important; }

/* feature chips → quiet pills */
.hero-chip {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.35rem 0.75rem; font-size: 0.8rem; font-weight: 500;
  color: rgba(var(--cl-t-primary), 0.8); border-radius: 999px;
  background: rgba(var(--cl-card), 0.9);
  border: 1px solid rgba(var(--ct-border), 0.1);
  box-shadow: none !important;
}
.hero-chip i { color: rgb(var(--cl-accent)); }

/* hero layout (SellAuth's Tailwind build omits some width utils) */
@media (min-width: 1024px) {
  .hero-fx .hero-row { flex-direction: row; align-items: center; justify-content: space-between; gap: 3.5rem; }
  .hero-fx .hero-text { flex: 1 1 auto; max-width: none; }
  .hero-fx .hero-card { flex: 0 0 42%; width: 42%; max-width: 42%; }
}

/* hero showcase — clean bordered panel, no float/glow */
.hero-card .showcase {
  border-radius: var(--ct-radius); overflow: hidden;
  background-color: rgba(var(--cl-card), 0.9) !important;
  border: 1px solid rgba(var(--ct-border), 0.09) !important;
  box-shadow: 0 20px 50px -24px rgba(0, 0, 0, 0.6);
  animation: none !important; transform: none !important;
}
.hero-card .showcase img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; }
.hero-card .showcase-tag {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  padding: 0.25rem 0.6rem; font-size: 0.62rem; font-weight: 600; letter-spacing: 0.08em;
  color: rgb(var(--cl-accent)); border-radius: 6px;
  background: rgba(var(--cl-accent), 0.14); box-shadow: none;
}

/* ---------- product-page benefits ---------- */
.opt-benefits .opt-card {
  border-radius: var(--ct-radius);
  background-color: rgba(var(--cl-card), 0.9) !important;
  border: 1px solid rgba(var(--ct-border), 0.08);
  transition: border-color 0.2s var(--ct-ease);
}
.opt-benefits .opt-card:hover { border-color: rgba(var(--ct-border), 0.16); }
.opt-benefits .opt-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 10px;
  color: rgb(var(--cl-accent)); background: rgba(var(--cl-accent), 0.12);
  border: 1px solid rgba(var(--cl-accent), 0.2);
}

/* ---------- footer ---------- */
footer[class*="bg-card"] { border-radius: 0; border-left: 0; border-right: 0; border-bottom: 0; }
footer[class*="bg-card"]::before, footer[class*="bg-card"]::after { display: none !important; content: none !important; }
.footer-brand { font-weight: 600; letter-spacing: -0.01em; }
.footer-link { transition: color 0.15s var(--ct-ease); }
.footer-link::after { display: none !important; }

/* ---------- editor / legal ---------- */
.editor h2, .editor h3 { color: rgb(var(--cl-t-primary)); font-weight: 600; }
.editor p, .editor li { color: rgba(var(--cl-t-primary), 0.7); line-height: 1.7; }
.editor a { color: rgb(var(--cl-accent)); }

/* subtle load-in only */
@media (prefers-reduced-motion: no-preference) {
  .component { animation: ct-fade 0.4s var(--ct-ease) both; }
}
@keyframes ct-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; } }