/* ==========================================================================
   PlagAI Checks theme — the look of the old plagaichecks.com (Next.js/shadcn):
   Sora font, indigo #6366f1 primary, green #22c55e, amber stars, white cards
   with hairline borders and 8px radius, neutral greys, dark mode on #0a0a0a.
   Loaded only when the site theme is "plagai"; it re-maps the base variables
   and restyles the shared components, so every page picks it up.
   ========================================================================== */

@font-face { font-family: "Sora"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/static/plagai/fonts/sora-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Sora"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("/static/plagai/fonts/sora-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Sora"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("/static/plagai/fonts/sora-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Sora"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("/static/plagai/fonts/sora-latin-700-normal.woff2") format("woff2"); }

/* ---------- palette ---------- */
:root, [data-theme="light"] {
  --bg: #ffffff;
  --panel: #ffffff;
  --panel-2: #f4f4f5;
  --text: #0a0a0a;
  --muted: #737373;
  --brand: #6366f1;
  --brand-2: #4f46e5;
  --ok: #16a34a;
  --err: #ef4444;
  --warn: #f59e0b;
  --border: #e5e5e5;
  --ring: rgba(99, 102, 241, .35);
  --radius: 8px;
  --radius-sm: 6px;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .05);
  --shadow: 0 1px 3px rgba(0, 0, 0, .08), 0 1px 2px rgba(0, 0, 0, .04);
}
[data-theme="dark"] {
  --bg: #0a0a0a;
  --panel: #0a0a0a;
  --panel-2: #171717;
  --text: #fafafa;
  --muted: #a3a3a3;
  --brand: #6366f1;
  --brand-2: #818cf8;
  --ok: #22c55e;
  --err: #ef4444;
  --warn: #fbbf24;
  --border: #262626;
  --ring: rgba(129, 140, 248, .4);
  --shadow-sm: none;
  --shadow: none;
}

/* ---------- base ---------- */
html { scroll-behavior: smooth; }
body, [data-theme="light"] body, [data-theme="dark"] body {
  font-family: "Sora", Arial, Helvetica, sans-serif;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { letter-spacing: -0.01em; font-weight: 600; }
a { color: var(--brand); }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #475569; }

/* ---------- top navigation (white bar, 80px, shadow) ---------- */
.nav {
  position: sticky; top: 0; z-index: 40;
  min-height: 80px; padding: 0 32px;
  background: var(--panel); border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}
[data-theme="dark"] .nav { background: rgba(10, 10, 10, .92); backdrop-filter: blur(8px); }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 18px; }
.brand-logo { height: 52px; width: auto; display: block; }
.brand-logo.dark-only { display: none; }
[data-theme="dark"] .brand-logo.light-only { display: none; }
[data-theme="dark"] .brand-logo.dark-only { display: block; }
.nav nav a { color: rgba(10, 10, 10, .75); font-weight: 500; font-size: 15px; margin-left: 26px; }
.nav nav a:hover { color: var(--brand); }
[data-theme="dark"] .nav nav a { color: rgba(250, 250, 250, .8); }
.navdrop { margin-left: 26px; }
.navdrop > summary { color: rgba(10, 10, 10, .75); font-weight: 500; font-size: 15px; }
[data-theme="dark"] .navdrop > summary { color: rgba(250, 250, 250, .8); }
.navdrop > summary:hover, .navdrop[open] > summary { color: var(--brand); }
.nav nav .navdrop-list a, [data-theme="dark"] .nav nav .navdrop-list a { color: var(--text); }
.nav nav a.btn, .nav nav a.btn:hover { color: #fff; }
.theme-toggle { border-radius: 999px; padding: 6px 10px; }
.nav-toggle { border-radius: var(--radius-sm); }

/* ---------- buttons (shadcn "default") ---------- */
.btn {
  background: var(--brand); color: #fff; border-radius: var(--radius-sm);
  padding: 10px 18px; font-weight: 500; font-size: 14px; line-height: 1.25;
  box-shadow: var(--shadow-sm); transition: background .15s ease, transform .1s ease;
}
.btn:hover { background: var(--brand-2); }
.btn:active { transform: translateY(1px); }
.btn.big { padding: 13px 24px; font-size: 15px; border-radius: var(--radius-sm); }
.btn.small { padding: 7px 12px; font-size: 13px; }
.btn.ghost { background: var(--panel); color: var(--text); border: 1px solid var(--border); box-shadow: none; }
.btn.ghost:hover { background: var(--panel-2); }
.btn.danger { background: transparent; color: var(--err); border: 1px solid rgba(239, 68, 68, .5); box-shadow: none; }
.btn.danger:hover { background: var(--err); color: #fff; }
.btn:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible {
  outline: none; box-shadow: 0 0 0 3px var(--ring);
}
.google-btn { background: #3b82f6 !important; color: #fff !important; border: none !important; justify-content: center; }
.google-btn:hover { background: #2563eb !important; }
.google-btn svg path { fill: #fff; }

/* ---------- cards, panels, tables ---------- */
.card, .how, .statcard, .badge, .methods, .pkg-row {
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
[data-theme="light"] .card, [data-theme="light"] .statcard { box-shadow: var(--shadow-sm); }
.card h3 { font-size: 16px; font-weight: 600; }
.card p, .how ol { color: var(--muted); font-size: 14px; }
.orders th {
  color: var(--muted); font-weight: 500; font-size: 13px; text-transform: none;
  border-bottom: 1px solid var(--border); background: transparent;
}
.orders td { font-size: 14px; }
.orders tbody tr:hover { background: var(--panel-2); }
.status { font-weight: 500; border-radius: 999px; padding: 3px 10px; border: 1px solid transparent; }
.status.processing { color: #b45309; background: rgba(245, 158, 11, .14); }
.status.completed { color: #15803d; background: rgba(34, 197, 94, .14); }
.status.failed, .status.cancelled { color: #b91c1c; background: rgba(239, 68, 68, .12); }
[data-theme="dark"] .status.processing { color: #fcd34d; }
[data-theme="dark"] .status.completed { color: #4ade80; }
[data-theme="dark"] .status.failed, [data-theme="dark"] .status.cancelled { color: #f87171; }
.flash { background: rgba(34, 197, 94, .12); color: #15803d; border: 1px solid rgba(34, 197, 94, .35); border-radius: var(--radius-sm); }
[data-theme="dark"] .flash { color: #4ade80; }
.notice { border-radius: var(--radius); }
.big-number { font-size: 30px; font-weight: 700; }
.statnum { font-weight: 700; }
.eyebrow { color: var(--muted); font-weight: 500; letter-spacing: .15em; font-size: 12px; text-transform: uppercase; }

/* ---------- forms ---------- */
.auth input, .dash form input, .dash form select, .dash form textarea,
.searchbar input[type="search"], .pkg-form input, .pkg-form select, .rowform select, .rowform input,
.inline-form input, .inline-form select, textarea, input[type="text"], input[type="email"],
input[type="password"], input[type="number"], input[type="search"], select {
  background: var(--panel); color: var(--text); border: 1px solid var(--border);
  border-radius: var(--radius-sm); font-family: inherit; font-size: 14px;
}
.auth label, .dash form label { font-weight: 500; font-size: 14px; }
.auth { border-radius: var(--radius); box-shadow: var(--shadow); }
.auth h1 { font-size: 26px; text-align: center; margin-bottom: 4px; }
.auth .auth-sub { text-align: center; color: var(--muted); font-size: 14px; margin: 0 0 18px; }

/* ---------- split login / register (indigo panel + card) ---------- */
.auth-split { display: grid; grid-template-columns: 1fr 1fr; min-height: calc(100vh - 80px); }
.auth-side {
  position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: center;
  padding: 48px 56px; color: #fff;
  background: #4f46e5 url("/static/plagai/hero-bg.jpg") center/cover no-repeat;
}
.auth-side::before { content: ""; position: absolute; inset: 0; background: rgba(79, 70, 229, .82); }
.auth-side > * { position: relative; }
.auth-side .side-logo { width: 64px; height: 64px; border-radius: 10px; background: #fff; padding: 6px; object-fit: contain; margin-bottom: 26px; }
.auth-side h2 { font-size: 32px; margin: 0 0 10px; color: #fff; }
.auth-side p { font-size: 17px; line-height: 1.6; color: rgba(255, 255, 255, .9); max-width: 420px; margin: 0; }
.auth-main { display: flex; align-items: center; justify-content: center; padding: 40px 24px; }
.auth-main .auth { margin: 0; width: 100%; max-width: 448px; }
@media (max-width: 860px) { .auth-split { grid-template-columns: 1fr; } .auth-side { display: none; } }

/* ---------- homepage ---------- */
.p-hero {
  position: relative; min-height: 560px; display: flex; align-items: center; justify-content: center;
  text-align: center; color: #fff; overflow: hidden;
  background: #0f172a url("/static/plagai/hero-bg.jpg") center/cover no-repeat;
}
.p-hero::before { content: ""; position: absolute; inset: 0; background: rgba(15, 23, 42, .72); }
.p-hero .inner { position: relative; max-width: 760px; padding: 72px 24px; }
.p-hero .hero-logo { width: 64px; height: 64px; border-radius: 10px; background: #fff; padding: 6px; object-fit: contain; margin: 0 auto 22px; display: block; }
.p-hero .eyebrow { color: rgba(255, 255, 255, .7); margin-bottom: 14px; }
.p-hero h1 { font-size: 48px; line-height: 1.1; margin: 0 0 16px; color: #fff; }
.p-hero .lead { color: rgba(255, 255, 255, .82); font-size: 16px; line-height: 1.7; max-width: 580px; margin: 0 auto 30px; }
.p-hero .cta { align-items: center; }
.p-hero .btn.white { background: #fff; color: #0f172a; box-shadow: none; }
.p-hero .btn.white:hover { background: rgba(255, 255, 255, .9); }
.p-hero .link-light { color: rgba(255, 255, 255, .9); font-weight: 500; text-decoration: none; }
.p-hero .link-light:hover { color: #fff; }
.p-section { max-width: 900px; margin: 0 auto; padding: 72px 24px; }
.p-section.wide { max-width: 1080px; }
.p-section .eyebrow { text-align: center; margin: 0 0 8px; }
.p-section h2 { text-align: center; font-size: 30px; margin: 0 0 44px; }
.p-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.p-step { text-align: center; }
.p-step .num {
  display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
  border-radius: 999px; border: 1px solid var(--border); background: var(--panel); font-size: 14px; font-weight: 500; margin-bottom: 16px;
}
.p-step .ico { display: block; width: 24px; height: 24px; margin: 0 auto 12px; color: var(--muted); }
.p-step h3 { font-size: 16px; margin: 0 0 8px; }
.p-step p { color: var(--muted); font-size: 14px; line-height: 1.6; margin: 0; }
.p-testimonials { border-top: 1px solid var(--border); background: var(--panel-2); }
[data-theme="dark"] .p-testimonials { background: #111; }
.p-testimonials h2 { font-size: 24px; margin-bottom: 6px; }
.p-testimonials .sub { text-align: center; color: var(--muted); font-size: 14px; margin: 0 0 40px; }
.p-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.p-quote { display: flex; flex-direction: column; padding: 20px; }
.p-quote .stars { color: #f59e0b; font-size: 13px; letter-spacing: 2px; margin-bottom: 12px; }
.p-quote p { flex: 1; color: var(--muted); font-size: 14px; line-height: 1.65; margin: 0 0 16px; }
.p-quote .who { font-size: 12px; font-weight: 500; border-top: 1px solid var(--border); padding-top: 12px; }
.p-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; }
.p-cards .card { padding: 24px; }
.p-cards .card .emoji { font-size: 26px; margin-bottom: 10px; }
.features { gap: 24px; }
.hero h1 { font-size: 40px; }
@media (max-width: 900px) { .p-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) {
  .p-steps, .p-grid { grid-template-columns: 1fr; }
  .p-hero h1 { font-size: 34px; }
  .p-hero { min-height: 440px; }
}

/* ---------- footer (4 columns) ---------- */
.p-footer { background: var(--panel); border-top: 1px solid var(--border); margin-top: 40px; }
.p-footer .cols { max-width: 1200px; margin: 0 auto; padding: 48px 32px 32px; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; }
.p-footer h3 { font-size: 17px; margin: 0 0 14px; }
.p-footer p, .p-footer a { color: var(--muted); font-size: 14px; text-decoration: none; line-height: 1.6; }
.p-footer a:hover { color: var(--brand); }
.p-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.p-footer .social { display: flex; gap: 16px; margin-top: 16px; }
.p-footer .social a { display: inline-flex; }
.p-footer .social svg { width: 20px; height: 20px; fill: currentColor; }
.p-footer .bottom { max-width: 1200px; margin: 0 auto; padding: 24px 32px; border-top: 1px solid var(--border); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.p-footer .bottom a { margin-left: 24px; }
@media (max-width: 900px) { .p-footer .cols { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .p-footer .cols { grid-template-columns: 1fr; } }

/* ---------- floating WhatsApp (round green button, like the old site) ---------- */
.whatsapp {
  width: 56px; height: 56px; border-radius: 999px; padding: 0; justify-content: center;
  background: #22c55e; box-shadow: 0 10px 25px rgba(0, 0, 0, .18); transition: transform .2s ease, background .2s ease;
}
.whatsapp:hover { background: #16a34a; transform: scale(1.08); }
.whatsapp .wa-label { display: none; }

/* ---------- admin / editor shells ---------- */
.sidebar { background: var(--panel-2); border-right: 1px solid var(--border); }
[data-theme="dark"] .sidebar { background: #111; }
.sidebar a { border-radius: var(--radius-sm); font-size: 14px; font-weight: 500; color: var(--muted); }
.sidebar a:hover { background: rgba(99, 102, 241, .08); color: var(--text); }
.sidebar a.on { background: rgba(99, 102, 241, .12); color: var(--brand-2); }
.statcard.blue .statnum { color: #6366f1; } .statcard.blue { border-top-color: #6366f1; }
.statcard.green .statnum { color: #16a34a; } .statcard.green { border-top-color: #22c55e; }
.statcard.amber .statnum { color: #d97706; } .statcard.amber { border-top-color: #f59e0b; }
.statcard.red .statnum { color: #dc2626; } .statcard.red { border-top-color: #ef4444; }
.statcard.purple .statnum { color: #7c3aed; } .statcard.purple { border-top-color: #8b5cf6; }
.statcard.teal .statnum { color: #0d9488; } .statcard.teal { border-top-color: #14b8a6; }
.score.low { color: #16a34a; } .score.mid { color: #d97706; } .score.high { color: #dc2626; }
.band-low .badge-score { color: #16a34a; } .band-mid .badge-score { color: #d97706; } .band-high .badge-score { color: #dc2626; }
.badge.band-low { border-color: rgba(34, 197, 94, .45); } .badge.band-mid { border-color: rgba(245, 158, 11, .45); } .badge.band-high { border-color: rgba(239, 68, 68, .45); }
.footer { background: var(--panel); }

/* login/register pages: the split layout spans the full width */
.container.auth-container { max-width: none; padding: 0; }
.container.auth-container .auth-split { min-height: calc(100vh - 81px); }

/* Text brand in the login/register side panel (sites without logo images) */
.auth-side .side-brand { font-size: 30px; font-weight: 700; letter-spacing: -0.5px; color: #fff; margin-bottom: 18px; }