/* LeadForge brand layer, following the APPRI Academy UI: Inter, ink sidebar, gradient stripe, pastel title cards, pastel tags, white hairline cards.
   Accent comes from the LeadForge logo blue; the gradient (blue > teal > green > amber) is the signature. */
html, body { font-size: 14px; }
h1, h2, h3 { font-weight: 600; letter-spacing: -.02em; color: var(--ink); }
::selection { background: color-mix(in srgb, var(--acc) 28%, transparent); }

/* ---- shell ---- */
.side { border-right: 0; }
.brand { padding: 4px 6px 18px; } .brand img { width: 100%; max-width: 188px; height: auto; display: block; }
.nav a { border-radius: 8px; } .nav a:hover { background: rgba(255,255,255,.07); }
.nav a.on { background: rgba(10,155,200,.2); color: #fff; }
.nav a.on::before { background: linear-gradient(180deg, #0a9bc8, #7dbb26); width: 4px; }
.nav a.on svg { color: #6fd6f2; }
.top { border-bottom: 0; box-shadow: 0 1px 0 var(--line); padding: 14px 32px; position: sticky; }
.top::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--grad); }
.top h1 { font-size: 17px; }
.searchbtn { border: 0; background: var(--card2); border-radius: 8px; padding: 10px 14px; color: var(--mut); }
.searchbtn:hover { background: color-mix(in srgb, var(--card2) 70%, var(--line)); }
.iconbtn { border: 0; background: transparent; border-radius: 8px; color: var(--ink2); } .iconbtn:hover { background: var(--card2); color: var(--ink); border: 0; }
.userchip { border: 0; border-left: 1px solid var(--line); border-radius: 0; padding: 2px 4px 2px 14px; background: transparent; }
.avatar { background: linear-gradient(135deg, #0a9bc8, #7dbb26); }
.avatar.sm { background: var(--acc-soft); color: var(--acc); }
#view { padding: 24px 32px 64px; }

/* ---- title card (every view's first heading row) ---- */
.pagehead { position: relative; overflow: hidden; isolation: isolate; border-radius: 20px; padding: 24px 28px; margin-bottom: 20px; background: linear-gradient(120deg, #eaf7fc 0%, #f0f8ea 55%, #fff5e4 100%); border: 1px solid var(--line); align-items: center; }
.pagehead::before { content: ""; position: absolute; right: -60px; top: -80px; width: 300px; height: 300px; border-radius: 50%; background: radial-gradient(closest-side, rgba(10,155,200,.2), rgba(10,155,200,0)); z-index: -1; }
.pagehead::after { content: ""; position: absolute; right: 140px; bottom: -110px; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(closest-side, rgba(255,154,10,.2), rgba(255,154,10,0)); z-index: -1; }
.pagehead h2 { font-size: 30px; font-weight: 600; letter-spacing: -.025em; background: linear-gradient(100deg, #0f2230 0%, #0f2230 55%, #0a86b0 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pagehead p { color: var(--ink2); }
:root[data-theme="dark"] .pagehead { background: linear-gradient(120deg, #0f2a38 0%, #12301f 55%, #33260c 100%); }
:root[data-theme="dark"] .pagehead h2 { background: linear-gradient(100deg, #e6eef4 0%, #e6eef4 55%, #5cc8ec 100%); -webkit-background-clip: text; background-clip: text; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .pagehead { background: linear-gradient(120deg, #0f2a38 0%, #12301f 55%, #33260c 100%); }
  :root:not([data-theme="light"]) .pagehead h2 { background: linear-gradient(100deg, #e6eef4 0%, #e6eef4 55%, #5cc8ec 100%); -webkit-background-clip: text; background-clip: text; }
}

/* ---- primitives ---- */
.btn { border-radius: 8px; font-weight: 600; }
.btn.primary { background: var(--grad-btn); border-color: transparent; color: #fff; } .btn.primary:hover:not(:disabled) { background: linear-gradient(115deg, #076c8f, #0e8f82); border-color: transparent; }
.btn.ghost:hover:not(:disabled) { background: var(--card2); }
.in, select.in, textarea.in, .af input:not([type=checkbox]) { border-radius: 8px; border-color: var(--line2); }
.in:focus, .af input:focus { border-color: var(--acc); outline: 3px solid color-mix(in srgb, var(--acc) 18%, transparent); }
.seg { border-radius: 8px; } .seg button.on { background: var(--acc); color: #fff; }
.chip { border-radius: 6px; } .chip.on { background: var(--acc); border-color: var(--acc); color: #fff; }
.tag { border-radius: 4px; border: 0; background: var(--card2); }
.tag.ok { background: var(--good-soft); color: var(--good); } .tag.bad { background: var(--bad-soft); color: var(--bad); } .tag.warn { background: var(--warn-soft); color: var(--warn); } .tag.info { background: var(--acc-soft); color: var(--acc); }
.stagechip { border-radius: 4px; border: 0; background: var(--card2); }
.tabs button.on { color: var(--acc); border-bottom-color: var(--acc); }
.tbl th { background: var(--card2); }
.card .cardh { font-weight: 600; }
.cb, .chkrow input, input[type=checkbox], input[type=radio] { accent-color: var(--acc); }

/* ---- dashboard hero in brand gradient ---- */
.hero { background: linear-gradient(120deg, #0a6e94 0%, #0a9bc8 48%, #12a99a 100%); border: 0; color: #fff; position: relative; overflow: hidden; isolation: isolate; }
.hero::after { content: ""; position: absolute; right: -80px; top: -90px; width: 300px; height: 300px; border-radius: 50%; background: radial-gradient(closest-side, rgba(255,154,10,.35), rgba(255,154,10,0)); z-index: -1; }
.hero .lbl { color: rgba(255,255,255,.85); } .hero .big { color: #fff; } .hero .subs b { color: #fff; } .hero .subs span { color: rgba(255,255,255,.78); }
.kpi { border-radius: 16px; } .kpi .val { font-weight: 700; }

/* ---- pipeline ---- */
.bcol { background: var(--card2); border-radius: 16px; } .bcol.over { background: var(--acc-soft); outline-color: var(--acc); }
.bhead .cnt { background: var(--line); color: var(--ink2); border-radius: 99px; padding: 0 8px; font-size: 12px; }
.bcard { border-radius: 12px; border-color: var(--line); box-shadow: none; } .bcard:hover { border-color: var(--acc); box-shadow: var(--shadow); }
.pipe button.cur { background: var(--acc); color: #fff; } .pipe button.done { background: color-mix(in srgb, var(--acc) 38%, var(--line)); color: var(--ink); }
.next.today { background: var(--warn-soft); color: var(--warn); }
.bulkbar { background: var(--ink); } .bulkbar .btn.primary { background: var(--grad-btn); }
.drawer .sheet { background: var(--card2); } .sh-head { background: var(--card); } .sec { border-radius: 14px; }
.tabs button { font-weight: 600; }

/* ---- auth: split layout (dark art panel + form), like APPRI ---- */
.authroot { padding: 0; background: var(--card); display: block; }
.authgrid { min-height: 100vh; display: grid; grid-template-columns: 1.05fr 1fr; }
.authart { position: relative; overflow: hidden; isolation: isolate; background: #0f2230; color: #fff; padding: 52px 56px; display: flex; flex-direction: column; justify-content: space-between; }
.authart::before { content: ""; position: absolute; inset: 0; z-index: -2; background: radial-gradient(900px 520px at 85% -8%, rgba(10,155,200,.55), transparent 60%), radial-gradient(700px 480px at -10% 110%, rgba(125,187,38,.28), transparent 60%), #0f2230; }
.authart::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: var(--grad); }
.authart .kick { display: inline-block; font-size: 12px; font-weight: 600; letter-spacing: .06em; color: #fff; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.22); border-radius: 99px; padding: 5px 13px; }
.authart h1 { color: #fff; font-size: 44px; line-height: 1.1; letter-spacing: -.03em; margin: 18px 0 14px; max-width: 520px; }
.authart p { color: rgba(255,255,255,.82); font-size: 16px; max-width: 460px; margin: 0; }
.authart .pts { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 10px; max-width: 460px; }
.authart .pts li { display: flex; gap: 12px; align-items: center; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.16); border-radius: 12px; padding: 11px 14px; font-size: 14px; backdrop-filter: blur(8px); }
.authart .pts li svg { width: 20px; height: 20px; flex: none; color: #6fd6f2; }
.authart .art { position: absolute; right: -10px; bottom: 20px; width: 62%; opacity: .95; z-index: -1; }
.authart .foot { font-size: 12.5px; color: rgba(255,255,255,.6); }
.authform { display: grid; place-items: center; padding: 32px; background: var(--card); }
.authform .box { width: 100%; max-width: 410px; display: grid; gap: 14px; }
.authlogo { width: 230px; max-width: 100%; height: auto; margin-bottom: 8px; } .authlogo.d { display: none; }
:root[data-theme="dark"] .authlogo.l { display: none; } :root[data-theme="dark"] .authlogo.d { display: block; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .authlogo.l { display: none; } :root:not([data-theme="light"]) .authlogo.d { display: block; } }
.authform h1 { font-size: 26px; } .authform form { display: grid; gap: 12px; }
.authcard { all: unset; }
@media (max-width: 900px) { .authgrid { grid-template-columns: 1fr; } .authart { display: none; } .authform { padding: 24px 20px; min-height: 100vh; align-content: center; } }

/* ---- mobile ---- */
@media (max-width: 860px) { .top { padding: 10px 14px; } #view { padding: 14px 14px 96px; } .pagehead { padding: 18px 18px; } .pagehead h2 { font-size: 24px; } }
.abtn { background: var(--grad-btn); border-radius: 8px; } .abtn:hover:not(:disabled) { background: linear-gradient(115deg, #076c8f, #0e8f82); }
.af input:not([type=checkbox]) { border-radius: 8px; }