/* ApplyStack — design system (light + dark, LTR + RTL) */

:root {
  --bg: #f4f2ef;
  --bg-soft: #ede9e4;
  --surface: #ffffff;
  --surface-2: #ece8e2;
  --ink: #0b1020;
  --ink-2: #2a2f45;
  --muted: #5b6478;
  --line: #ddd9d2;
  --line-2: #e6e2db;
  --brand: #6366f1;
  --brand-2: #a855f7;
  --brand-3: #06b6d4;
  --accent: #10b981;
  --warn: #f59e0b;
  --danger: #ef4444;
  --shadow-sm: 0 1px 3px rgba(16, 24, 40, .08), 0 4px 12px -4px rgba(16, 24, 40, .10);
  --shadow:    0 8px 28px -8px rgba(31, 41, 55, .18), 0 2px 8px -2px rgba(16, 24, 40, .08);
  --shadow-lg: 0 30px 60px -20px rgba(31, 41, 55, .22), 0 8px 24px -8px rgba(16, 24, 40, .10);
  --card-ring: 0 0 0 1px rgba(16, 24, 40, .07);
}

[data-theme="dark"] {
  --bg: #07091a;
  --bg-soft: #0b1024;
  --surface: #0f1430;
  --surface-2: #141a3a;
  --ink: #f4f6ff;
  --ink-2: #c8cdec;
  --muted: #8a92b8;
  --line: #1a2042;
  --line-2: #232a55;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow:    0 10px 30px -12px rgba(0,0,0,.55);
  --shadow-lg: 0 30px 60px -20px rgba(0,0,0,.7);
  --card-ring: 0 0 0 0px transparent;
}

* { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; box-sizing: border-box; }
html, body { font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--ink); }
[dir="rtl"] html, [dir="rtl"] body {
  font-family: 'Cairo', 'Tajawal', ui-sans-serif, system-ui, sans-serif;
  line-height: 1.8;
  word-spacing: 0.04em;
}
body { background: var(--bg); transition: background .25s ease, color .25s ease; }

/* Arabic-specific overrides — tone down excessive spacing */
[dir="rtl"] .tracking-widest { letter-spacing: 0.04em; }
[dir="rtl"] .tracking-tight  { letter-spacing: -0.01em; }
[dir="rtl"] .eyebrow { letter-spacing: 0.06em; font-size: .75rem; }
[dir="rtl"] .chip    { letter-spacing: 0; }
/* Slightly larger base for Cairo which renders visually smaller */
[dir="rtl"] p, [dir="rtl"] li, [dir="rtl"] .text-sm  { font-size: 0.94rem; }
[dir="rtl"] .text-xs { font-size: 0.78rem; }

/* ========== Brand mark ========== */
.brand-dot {
  width: 28px; height: 28px; border-radius: 8px;
  background: conic-gradient(from 210deg at 60% 40%, #6366f1, #a855f7, #06b6d4, #10b981, #6366f1);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.55), 0 6px 18px -4px rgba(99,102,241,.6);
  position: relative; flex-shrink: 0;
}
.brand-dot::after {
  content: ""; position: absolute; inset: 6px; border-radius: 4px;
  background: var(--bg);
}
[data-theme="dark"] .brand-dot::after { background: #07091a; }

.brand-glow {
  width: 56px; height: 56px; border-radius: 18px;
  background: conic-gradient(from 210deg, #6366f1, #a855f7, #06b6d4, #10b981, #6366f1);
  position: relative; box-shadow: 0 18px 40px -8px rgba(99,102,241,.55);
  animation: spin 18s linear infinite;
}
.brand-glow::after {
  content: ""; position: absolute; inset: 6px; border-radius: 12px;
  background: var(--surface);
  background-image: radial-gradient(circle at 60% 40%, rgba(99,102,241,.3), transparent 60%);
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ========== Gradient text ========== */
.gradient-text {
  background: linear-gradient(120deg, #6366f1 0%, #a855f7 45%, #06b6d4 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ========== Aurora / grid ========== */
.aurora {
  position: absolute; inset: -10% -10% auto -10%; height: 720px; z-index: 0; pointer-events: none;
  background:
    radial-gradient(60% 50% at 20% 20%, rgba(99,102,241,.30), transparent 60%),
    radial-gradient(50% 50% at 80% 10%, rgba(168,85,247,.28), transparent 60%),
    radial-gradient(40% 40% at 60% 60%, rgba(6,182,212,.22), transparent 60%),
    radial-gradient(40% 40% at 10% 70%, rgba(16,185,129,.18), transparent 60%);
  filter: blur(40px) saturate(120%);
}
.aurora-full {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(60% 50% at 20% 20%, rgba(99,102,241,.45), transparent 60%),
    radial-gradient(50% 50% at 85% 15%, rgba(168,85,247,.45), transparent 60%),
    radial-gradient(50% 50% at 70% 80%, rgba(6,182,212,.40), transparent 60%),
    radial-gradient(40% 40% at 15% 80%, rgba(16,185,129,.30), transparent 60%);
  filter: blur(60px) saturate(130%);
  animation: drift 18s ease-in-out infinite alternate;
}
[data-theme="dark"] .aurora-full {
  background:
    radial-gradient(60% 50% at 20% 20%, rgba(99,102,241,.55), transparent 60%),
    radial-gradient(50% 50% at 85% 15%, rgba(168,85,247,.55), transparent 60%),
    radial-gradient(50% 50% at 70% 80%, rgba(6,182,212,.50), transparent 60%),
    radial-gradient(40% 40% at 15% 80%, rgba(16,185,129,.35), transparent 60%);
}
@keyframes drift {
  0%   { transform: translate3d(0,0,0) scale(1); }
  100% { transform: translate3d(-3%,-2%,0) scale(1.05); }
}

.grid-bg {
  background-image:
    linear-gradient(to right, rgba(15,23,42,.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(15,23,42,.06) 1px, transparent 1px);
  background-size: 36px 36px;
  -webkit-mask-image: radial-gradient(ellipse at center, black 50%, transparent 80%);
          mask-image: radial-gradient(ellipse at center, black 50%, transparent 80%);
}
[data-theme="dark"] .grid-bg {
  background-image:
    linear-gradient(to right, rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.06) 1px, transparent 1px);
}

/* Floating constellation dots */
.dots-bg {
  position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(99,102,241,.25) 1.2px, transparent 1.2px);
  background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(ellipse 60% 60% at center, black 30%, transparent 80%);
          mask-image: radial-gradient(ellipse 60% 60% at center, black 30%, transparent 80%);
}

/* ========== Glass cards ========== */
.glass {
  background: color-mix(in oklab, var(--surface) 75%, transparent);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border: 1px solid color-mix(in oklab, var(--ink) 8%, transparent);
  box-shadow: var(--shadow-lg);
}
.glass-strong {
  background: color-mix(in oklab, var(--surface) 88%, transparent);
  backdrop-filter: saturate(180%) blur(22px);
  -webkit-backdrop-filter: saturate(180%) blur(22px);
  border: 1px solid color-mix(in oklab, var(--ink) 10%, transparent);
  box-shadow: var(--shadow-lg);
}
.glass-dark {
  background: rgba(11,16,32,.65);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border: 1px solid rgba(255,255,255,.08);
}

/* Gradient border (used for hero auth card / featured pricing) */
.gradient-border {
  position: relative; border-radius: 1.5rem; padding: 1px;
  background: linear-gradient(135deg, #6366f1 0%, #a855f7 35%, #06b6d4 70%, #10b981 100%);
  background-size: 200% 200%; animation: borderShift 8s ease-in-out infinite;
}
.gradient-border > .gradient-border-inner {
  background: var(--surface); border-radius: calc(1.5rem - 1px); height: 100%; width: 100%;
}
@keyframes borderShift {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

/* ========== Buttons ========== */
.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .7rem 1.1rem; border-radius: .75rem;
  font-weight: 600; font-size: .92rem;
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
  cursor: pointer; border: 1px solid transparent;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn-primary {
  background: linear-gradient(120deg, #6366f1, #a855f7);
  color: white;
  box-shadow: 0 12px 24px -10px rgba(168,85,247,.55), inset 0 1px 0 rgba(255,255,255,.25);
}
.btn-primary:hover { box-shadow: 0 18px 30px -10px rgba(168,85,247,.7); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { background: var(--surface-2); }
.btn-dark { background: #0b1020; color: white; }
.btn-dark:hover { background: #161c33; }
.btn-tile {
  display: flex; flex-direction: column; align-items: center; gap: .35rem;
  padding: .9rem; border-radius: 1rem;
  background: var(--surface); border: 1px solid var(--line);
  font-size: .8rem; font-weight: 600; color: var(--ink-2);
  transition: all .2s ease;
}
.btn-tile:hover { border-color: var(--brand); transform: translateY(-2px); box-shadow: var(--shadow); }

/* ========== Chips ========== */
.chip {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .25rem .6rem; border-radius: 999px;
  font-size: .72rem; font-weight: 600; letter-spacing: .02em;
  background: rgba(99,102,241,.10); color: #6366f1;
  border: 1px solid rgba(99,102,241,.18);
}
.chip-emerald { background: rgba(16,185,129,.12); color: #059669; border-color: rgba(16,185,129,.22); }
[data-theme="dark"] .chip-emerald { color: #6ee7b7; }
.chip-amber   { background: rgba(245,158,11,.12); color: #b45309; border-color: rgba(245,158,11,.22); }
[data-theme="dark"] .chip-amber { color: #fcd34d; }
.chip-slate   { background: var(--surface-2); color: var(--ink-2); border-color: var(--line); }

/* ========== Sections ========== */
.section { padding: 6rem 0; position: relative; }
.eyebrow { color: var(--brand); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; font-size: .72rem; }

/* ========== Floating mockup ========== */
.float-card { animation: floaty 6s ease-in-out infinite; }
.float-card.delay { animation-delay: -3s; }
@keyframes floaty {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}

/* ========== Marquee ========== */
.marquee { display: flex; overflow: hidden; gap: 3rem; mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent); }
.marquee-track { display: flex; gap: 3rem; animation: scroll 30s linear infinite; min-width: max-content; }
@keyframes scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ========== Pricing pop ========== */
.price-pop { position: relative; }
.price-pop::before {
  content: ""; position: absolute; inset: -2px; border-radius: 1.25rem; z-index: -1;
  background: linear-gradient(135deg, #6366f1, #a855f7, #06b6d4);
  filter: blur(14px); opacity: .55;
}

/* ========== Inputs (floating label) ========== */
.field {
  position: relative; margin-top: .25rem;
}
.field input, .field select, .field textarea {
  width: 100%; padding: 1.15rem 1rem .55rem; border-radius: .8rem;
  border: 1px solid var(--line); background: var(--surface);
  color: var(--ink); font-size: .95rem;
  transition: border .15s ease, box-shadow .15s ease;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--brand);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--brand) 18%, transparent);
}
/* Clean select — remove browser chrome, add custom chevron */
.field select {
  appearance: none; -webkit-appearance: none;
  padding-inline-end: 2.5rem; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238b949e' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .85rem center;
}
[dir="rtl"] .field select {
  background-position: left .85rem center;
}
.field label {
  position: absolute; top: 50%; transform: translateY(-50%);
  inset-inline-start: 1rem;
  color: var(--muted); font-size: .9rem; font-weight: 500;
  pointer-events: none; transition: all .15s ease;
  background: transparent; padding: 0 .25rem;
}
.field input:focus + label,
.field input:not(:placeholder-shown) + label,
.field select:focus + label,
.field select:not([data-empty]) + label,
.field textarea:focus + label,
.field textarea:not(:placeholder-shown) + label {
  top: .4rem; transform: none; font-size: .68rem;
  color: var(--brand); font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}
/* Hide placeholder text until the field is focused — prevents it overlapping the floating label */
.field input::placeholder,
.field textarea::placeholder { color: transparent; transition: color .15s ease; }
.field input:focus::placeholder,
.field textarea:focus::placeholder { color: var(--muted); }

.input {
  width: 100%; padding: .8rem 1rem; border-radius: .75rem;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink); font-size: .95rem;
  transition: border .15s ease, box-shadow .15s ease;
}
.input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px color-mix(in oklab, var(--brand) 18%, transparent); }
.input-icon { position: relative; }
.input-icon .input { padding-inline-start: 2.6rem; }
.input-icon .icon-left { position: absolute; inset-inline-start: .9rem; top: 50%; transform: translateY(-50%); color: var(--muted); }

/* ========== Reveal ========== */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in { opacity: 1; transform: none; }

/* ========== Dashboard layout (creative bento) ========== */
.app-shell {
  display: grid; grid-template-columns: 92px 1fr; min-height: 100vh;
  background: var(--bg-soft); color: var(--ink);
}
.app-side {
  background: var(--surface); border-inline-end: 1px solid var(--line);
  padding: 1.25rem .35rem; position: sticky; top: 0; height: 100vh;
  overflow-y: auto; overflow-x: hidden;
  display: flex; flex-direction: column; align-items: stretch; gap: .25rem;
  box-shadow: 2px 0 12px -4px rgba(16, 24, 40, .08);
}
[data-theme="dark"] .app-side { box-shadow: none; }
/* Logo + dividers centred within wider sidebar */
.app-side > a.brand-glow { align-self: center; margin-bottom: .5rem; flex-shrink: 0; }
.app-side .side-divider { height: 1px; background: var(--line); margin: .4rem 0; flex-shrink: 0; }
.app-main { display: flex; flex-direction: column; min-width: 0; }
.app-top {
  position: sticky; top: 0; z-index: 30;
  background: color-mix(in oklab, var(--bg-soft) 80%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  padding: .9rem 1.5rem; display: flex; align-items: center; gap: 1rem;
}
.app-content { padding: 1.75rem; max-width: 1500px; width: 100%; margin: 0 auto; }

.side-icon {
  width: 100%; border-radius: .9rem; padding: .55rem .25rem;
  display: flex; flex-direction: column; align-items: center; gap: .25rem;
  color: var(--ink-2); cursor: pointer; transition: all .15s ease;
  text-decoration: none;
}
.side-icon:hover { background: var(--surface-2); color: var(--ink); }
.side-icon.active {
  background: linear-gradient(135deg, #6366f1, #a855f7); color: white;
  box-shadow: 0 8px 18px -6px rgba(99,102,241,.55);
}
/* .tip is a small label below the icon */
.side-icon .tip {
  font-size: .68rem; font-weight: 600; white-space: nowrap;
  position: static; opacity: 1; background: none; padding: 0;
  border-radius: 0; transform: none; pointer-events: none; box-shadow: none;
  transition: none; color: inherit; letter-spacing: .01em;
}
.side-icon .tip::before { display: none; }

/* ========== Generic card (used everywhere outside bento) ========== */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 1.25rem;
  padding: 1.4rem;
  box-shadow: var(--shadow-sm), var(--card-ring);
  position: relative;
  overflow: hidden;
}

/* Bento cards */
.bento { display: grid; gap: 1rem; grid-template-columns: repeat(12, 1fr); grid-auto-rows: minmax(120px, auto); }
.bento > .card { border-radius: 1.25rem; padding: 1.4rem; }
.bento > .card.feat { background: linear-gradient(135deg, #6366f1 0%, #7c3aed 50%, #06b6d4 100%); color: white; border: none; box-shadow: var(--shadow); }
.bento > .card.feat::after { content:""; position:absolute; inset:0; background-image: radial-gradient(rgba(255,255,255,.18) 1px, transparent 1px); background-size: 18px 18px; mask-image: radial-gradient(ellipse at center, black, transparent 70%); pointer-events:none; }

.spark { width: 100%; height: 38px; }

/* Pipeline track (horizontal) */
.track {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem;
  position: relative;
}
.track-stage {
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 1.1rem;
  padding: 1rem; min-height: 240px; display: flex; flex-direction: column; gap: .65rem;
  transition: background .2s ease, border .2s ease;
}
.track-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: .8rem;
  padding: .75rem .85rem; box-shadow: var(--shadow-sm), var(--card-ring);
  transition: transform .15s ease, box-shadow .2s ease;
  cursor: grab;
}
.track-card:hover { transform: translateY(-2px); box-shadow: var(--shadow), var(--card-ring); }
.track-card:active { cursor: grabbing; }
/* Per-stage left border colour */
.track-card--saved     { border-left: 3px solid #94a3b8; }
.track-card--applied   { border-left: 3px solid #3b82f6; }
.track-card--interview { border-left: 3px solid #a855f7; }
.track-card--offer     { border-left: 3px solid #10b981; }
.track-card--rejected  { border-left: 3px solid #f43f5e; }

/* Extra chip colours for status */
.chip-blue  { background: rgba(59,130,246,.12); color: #3b82f6; border: 1px solid rgba(59,130,246,.25); }
.chip-rose  { background: rgba(244,63,94,.12);  color: #f43f5e; border: 1px solid rgba(244,63,94,.25); }

/* ATS ring */
.ats-ring {
  --p: 78; --size: 140px; --thick: 12px;
  width: var(--size); height: var(--size); border-radius: 50%;
  background: conic-gradient(#10b981 calc(var(--p) * 1%), color-mix(in oklab, var(--ink) 12%, transparent) 0);
  display: grid; place-items: center; position: relative;
}
.ats-ring::before {
  content: ""; position: absolute; inset: var(--thick);
  background: var(--surface); border-radius: 50%;
}
.ats-ring > span { position: relative; font-weight: 800; font-size: 1.6rem; color: var(--ink); }

/* Heatmap */
.heatmap { display: grid; grid-template-columns: repeat(14, 1fr); gap: 4px; }
.heatmap > i { width: 100%; aspect-ratio: 1; border-radius: 4px; background: color-mix(in oklab, var(--ink) 8%, transparent); }
.heatmap > i.h1 { background: rgba(99,102,241,.25); }
.heatmap > i.h2 { background: rgba(99,102,241,.55); }
.heatmap > i.h3 { background: rgba(99,102,241,.85); }
.heatmap > i.h4 { background: linear-gradient(135deg, #6366f1, #a855f7); }

/* Dividers */
.divider-soft { height: 1px; background: linear-gradient(to right, transparent, var(--line), transparent); }

/* Modal overlay */
.modal-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(0,0,0,.5); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center; padding: 1.25rem;
}
.modal-overlay.hidden { display: none; }
.modal-box {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 1.5rem; padding: 1.75rem;
  width: 100%; max-width: 530px; box-shadow: var(--shadow-lg);
  max-height: 90vh; overflow-y: auto;
  animation: modal-in .18s ease;
}
@keyframes modal-in { from { opacity:0; transform: scale(.96) translateY(6px); } to { opacity:1; transform: none; } }

/* Toast / success alert */
.toast {
  position: fixed; bottom: 1.5rem; inset-inline-end: 1.5rem; z-index: 9000;
  display: flex; align-items: center; gap: .75rem;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 1rem; padding: .8rem 1.1rem;
  box-shadow: var(--shadow-lg);
  animation: toast-in .2s ease;
  max-width: 340px;
}
.toast.toast-success { border-inline-start: 4px solid #10b981; }
.toast.toast-error   { border-inline-start: 4px solid #ef4444; }
.toast.toast-out     { animation: toast-out .2s ease forwards; }
@keyframes toast-in  { from { opacity:0; transform: translateY(12px); } to { opacity:1; transform: none; } }
@keyframes toast-out { from { opacity:1; transform: none; } to { opacity:0; transform: translateY(8px); } }

/* Pipeline list view */
.pipeline-table { width: 100%; border-collapse: collapse; }
.pipeline-table th {
  text-align: start; padding: .7rem 1rem;
  font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  border-bottom: 2px solid var(--line); color: var(--muted);
}
.pipeline-table td { padding: .7rem 1rem; border-bottom: 1px solid var(--line); font-size: .84rem; vertical-align: middle; }
.pipeline-table tbody tr:last-child td { border-bottom: none; }
.pipeline-table tbody tr:hover td { background: var(--surface-2); }

/* Pipeline timeline */
.timeline-row { display: flex; align-items: center; gap: 1rem; min-height: 2.75rem; }
.timeline-bar {
  position: relative; flex: 1; height: 2rem; border-radius: .7rem;
  background: var(--surface-2);
}
.timeline-fill {
  position: absolute; top: 0; bottom: 0; border-radius: .7rem;
  display: flex; align-items: center; padding: 0 .75rem;
}
.timeline-fill span { font-size: .72rem; font-weight: 700; color: white; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Theme toggle button */
.theme-btn {
  width: 36px; height: 36px; border-radius: .6rem;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  display: grid; place-items: center; cursor: pointer; transition: all .2s ease;
}
.theme-btn:hover { background: var(--surface-2); }
.theme-btn .sun, .theme-btn .moon { width: 16px; height: 16px; }
[data-theme="light"] .theme-btn .moon, html:not([data-theme="dark"]) .theme-btn .moon { display: block; }
[data-theme="light"] .theme-btn .sun,  html:not([data-theme="dark"]) .theme-btn .sun  { display: none; }
[data-theme="dark"] .theme-btn .moon { display: none; }
[data-theme="dark"] .theme-btn .sun  { display: block; }

/* Lang switch */
.lang-switch {
  display: inline-flex; padding: 3px; gap: 2px; border-radius: .55rem;
  background: var(--surface-2); border: 1px solid var(--line);
  font-size: .72rem; font-weight: 700;
}
.lang-switch a {
  padding: .25rem .55rem; border-radius: .4rem; color: var(--muted);
}
.lang-switch a.active { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }

/* RTL flips for icon margins */
[dir="rtl"] .icon-flip { transform: scaleX(-1); }

/* Card responsive helpers */
@media (max-width: 1280px) {
  .app-side > a.brand-glow { margin-bottom: .25rem; }
}
@media (max-width: 1024px) {
  .app-shell { grid-template-columns: 1fr; }
  .app-side { display: none; }
  .track { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .track { grid-template-columns: 1fr; }
}

/* Span helpers for bento */
.col-3  { grid-column: span 3; }
.col-4  { grid-column: span 4; }
.col-5  { grid-column: span 5; }
.col-6  { grid-column: span 6; }
.col-7  { grid-column: span 7; }
.col-8  { grid-column: span 8; }
.col-9  { grid-column: span 9; }
.col-12 { grid-column: span 12; }
.row-2  { grid-row: span 2; }
@media (max-width: 1024px) { [class*="col-"] { grid-column: span 12 !important; } }

/* Auth shell */
.auth-bg {
  position: relative; min-height: 100vh; display: grid; place-items: center;
  padding: 2rem 1rem; overflow: hidden; background: var(--bg);
}
.auth-card {
  position: relative; width: 100%; max-width: 460px;
  border-radius: 1.6rem; padding: 1px;
  background: linear-gradient(135deg, #6366f1, #a855f7 30%, #06b6d4 65%, #10b981);
  background-size: 250% 250%; animation: borderShift 9s ease-in-out infinite;
  box-shadow: 0 30px 80px -20px rgba(99,102,241,.45);
}
.auth-card-inner {
  background: var(--surface); border-radius: calc(1.6rem - 1px);
  padding: 2.5rem 2rem 2rem; box-shadow: var(--card-ring);
}

/* Social proof ticker (replacement for trust strip) */
.ticker {
  display: flex; gap: 2rem; align-items: center;
  padding: .75rem 1.25rem; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--line);
  box-shadow: var(--shadow-sm); font-size: .85rem; color: var(--ink-2);
}
.ticker .dot { width: 8px; height: 8px; border-radius: 50%; background: #10b981; box-shadow: 0 0 0 4px rgba(16,185,129,.18); animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.2); } }

/* Steps list (auth multi-state) */
.steps { display: flex; align-items: center; gap: .5rem; }
.steps .step {
  flex: 1; height: 4px; border-radius: 999px; background: var(--line);
  transition: background .25s ease;
}
.steps .step.done { background: linear-gradient(90deg, #6366f1, #a855f7); }

/* Tab pills */
.tabs { display: inline-flex; padding: 4px; border-radius: .75rem; background: var(--surface-2); border: 1px solid var(--line); }
.tabs button { padding: .45rem .9rem; border-radius: .55rem; font-size: .82rem; font-weight: 600; color: var(--muted); transition: all .15s ease; }
.tabs button.active { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }

/* ========== Settings sub-tab nav ========== */
[data-settings-tabs] button {
  transition: background .15s ease, color .15s ease, box-shadow .15s ease;
  color: var(--muted); font-weight: 500;
}
[data-settings-tabs] button.active {
  background: linear-gradient(135deg, rgba(99,102,241,.12), rgba(168,85,247,.08));
  color: var(--ink); font-weight: 700;
  box-shadow: inset 3px 0 0 var(--brand);
}
[dir="rtl"] [data-settings-tabs] button.active {
  box-shadow: inset -3px 0 0 var(--brand);
}
[data-settings-tabs] button:not(.active):hover {
  background: var(--surface-2); color: var(--ink);
}

/* ========== CV upload drop zone ========== */
.cv-drop {
  border: 2px dashed var(--line); border-radius: 1rem;
  padding: 1.5rem; text-align: center; cursor: pointer;
  background: var(--surface-2);
  transition: border-color .2s ease, background .2s ease;
}
.cv-drop:hover { border-color: var(--brand); background: color-mix(in oklab, var(--brand) 5%, var(--surface)); }
.cv-drop.drag-over { border-color: var(--brand); background: color-mix(in oklab, var(--brand) 8%, var(--surface)); }

/* ========== CV scan overlay (signup auto-fill) ========== */
.cv-scan-overlay {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in oklab, var(--bg) 92%, transparent);
  backdrop-filter: blur(8px);
  animation: cvScanFadeIn .25s ease;
}
.cv-scan-overlay[hidden] { display: none !important; }

.cv-scan-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 1.5rem;
  padding: 2.5rem 2.25rem;
  width: min(420px, 92vw);
  text-align: center;
  box-shadow: 0 25px 50px -12px rgb(0 0 0 / .25);
}

.cv-scan-icon {
  width: 88px; height: 88px; margin: 0 auto 1.25rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, color-mix(in oklab, var(--brand) 12%, transparent), color-mix(in oklab, var(--brand-2) 12%, transparent));
}
.cv-scan-svg { width: 56px; height: 56px; }
.cv-scan-track { fill: none; stroke: var(--line); stroke-width: 6; }
.cv-scan-progress {
  fill: none; stroke: var(--brand); stroke-width: 6;
  stroke-linecap: round;
  stroke-dasharray: 276; stroke-dashoffset: 276;
  transform: rotate(-90deg); transform-origin: center;
  animation: cvScanRing 1.6s ease-in-out infinite;
}
.cv-scan-check {
  fill: none; stroke: #10b981; stroke-width: 7;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 80; stroke-dashoffset: 80;
  transition: stroke-dashoffset .4s ease;
}
.cv-scan-overlay.cv-scan-success .cv-scan-progress { animation: none; stroke-dashoffset: 0; stroke: #10b981; }
.cv-scan-overlay.cv-scan-success .cv-scan-check { stroke-dashoffset: 0; }

.cv-scan-title { font-size: 1.25rem; font-weight: 800; color: var(--ink); margin-bottom: .35rem; }
.cv-scan-sub { font-size: .85rem; color: var(--muted); margin-bottom: 1.5rem; min-height: 1.2em; }

.cv-scan-steps {
  display: flex; flex-direction: column; gap: .5rem;
  text-align: start; padding: 0 .5rem;
}
.cv-scan-step {
  display: flex; align-items: center; gap: .65rem;
  padding: .55rem .75rem; border-radius: .65rem;
  font-size: .85rem; font-weight: 600;
  color: var(--muted);
  background: var(--surface-2);
  transition: all .25s ease;
}
.cv-scan-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--line); flex-shrink: 0;
  transition: all .25s ease;
}
.cv-scan-step.active { color: var(--ink); background: color-mix(in oklab, var(--brand) 8%, var(--surface)); }
.cv-scan-step.active .cv-scan-dot {
  background: var(--brand);
  box-shadow: 0 0 0 0 color-mix(in oklab, var(--brand) 50%, transparent);
  animation: cvScanPulse 1.2s ease-in-out infinite;
}
.cv-scan-step.done { color: var(--ink); }
.cv-scan-step.done .cv-scan-dot {
  background: #10b981;
  box-shadow: 0 0 0 3px color-mix(in oklab, #10b981 25%, transparent);
}
.cv-scan-step.error .cv-scan-dot { background: #ef4444; }

@keyframes cvScanRing {
  0%   { stroke-dashoffset: 276; }
  50%  { stroke-dashoffset: 80; }
  100% { stroke-dashoffset: 276; transform: rotate(270deg); }
}
@keyframes cvScanPulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--brand) 50%, transparent); }
  50%      { box-shadow: 0 0 0 6px color-mix(in oklab, var(--brand) 0%, transparent); }
}
@keyframes cvScanFadeIn {
  from { opacity: 0; } to { opacity: 1; }
}

/* ========== Calendar view (Pipeline) ========== */
.calendar-wrap { background: var(--surface); border: 1px solid var(--line); border-radius: 1rem; padding: 1.25rem; }
.calendar-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.calendar-month { font-weight: 800; font-size: 1.1rem; color: var(--ink); }
.calendar-nav { display: inline-flex; gap: .5rem; }
.calendar-nav button {
  width: 32px; height: 32px; border-radius: .5rem;
  display: grid; place-items: center;
  background: var(--surface-2); border: 1px solid var(--line);
  color: var(--ink); transition: all .15s ease;
}
.calendar-nav button:hover { background: color-mix(in oklab, var(--brand) 10%, var(--surface)); border-color: var(--brand); color: var(--brand); }

.calendar-grid {
  display: grid; grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.calendar-dow {
  text-align: center; font-size: .7rem; font-weight: 800;
  color: var(--muted); text-transform: uppercase; letter-spacing: .05em;
  padding: .5rem 0;
}
.calendar-cell {
  aspect-ratio: 1 / 1.05;
  background: var(--surface-2);
  border: 1px solid transparent;
  border-radius: .55rem;
  padding: .35rem;
  display: flex; flex-direction: column; gap: .25rem;
  position: relative;
  transition: border-color .15s ease;
  min-width: 0;
}
/* Cell hides overflow normally but lifts above siblings on hover so the popup can escape */
.calendar-cell { overflow: hidden; }
.calendar-cell:hover, .calendar-cell:focus-within { overflow: visible; z-index: 4; }
.calendar-cell.other-month { opacity: .35; }
.calendar-cell.today { border-color: var(--brand); background: color-mix(in oklab, var(--brand) 6%, var(--surface)); }
.calendar-cell.today .calendar-day-num { color: var(--brand); font-weight: 800; }
.calendar-day-num { font-size: .72rem; font-weight: 700; color: var(--muted); }

.calendar-app {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: .35rem;
  padding: .25rem .4rem;
  font-size: .68rem; font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  border-left: 3px solid var(--brand);
  transition: all .15s ease;
  position: relative;
  /* overflow:visible so the hover popup can escape; child handles ellipsis */
  overflow: visible;
}
.calendar-app .calendar-app-title {
  display: block;
  white-space: nowrap; text-overflow: ellipsis; overflow: hidden;
}
.calendar-app[data-status="applied"]   { border-left-color: #6366f1; }
.calendar-app[data-status="interview"] { border-left-color: #a855f7; }
.calendar-app[data-status="offer"]     { border-left-color: #10b981; }
.calendar-app[data-status="rejected"]  { border-left-color: #94a3b8; opacity: .65; }
.calendar-app[data-status="saved"]     { border-left-color: #94a3b8; }
.calendar-app:hover {
  background: color-mix(in oklab, var(--brand) 8%, var(--surface));
  border-color: var(--brand);
  z-index: 5;
}

.calendar-app-pop {
  position: absolute;
  bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%);
  background: var(--ink); color: white;
  font-size: .72rem; font-weight: 500;
  padding: .55rem .75rem; border-radius: .5rem;
  white-space: normal;
  width: max-content; max-width: 240px;
  box-shadow: 0 12px 24px -8px rgb(0 0 0 / .35);
  pointer-events: none;
  opacity: 0; transition: opacity .15s ease;
  z-index: 10;
}
.calendar-app-pop::after {
  content: ''; position: absolute; top: 100%; left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent; border-top-color: var(--ink);
}
.calendar-app:hover .calendar-app-pop { opacity: 1; }
.calendar-app-pop strong { display:block; font-size:.78rem; margin-bottom:.2rem; }
.calendar-app-pop em     { font-style: normal; opacity: .85; display:block; line-height: 1.35; margin-top: .1rem; }
.calendar-app-pop .pop-row { display:flex; justify-content: space-between; gap: .5rem; opacity: .8; font-size: .7rem; }
.calendar-app-pop .pop-badge { display:inline-block; padding: 1px 6px; border-radius: 999px; font-size: .65rem; font-weight: 700; text-transform: capitalize; }

.calendar-empty {
  padding: 2rem 1rem; text-align: center;
  font-size: .85rem; color: var(--muted);
}

/* ========== Notifications inbox ========== */
.notif-row {
  display: flex; align-items: center; gap: .75rem;
  padding: .85rem 1rem; cursor: pointer;
  border-bottom: 1px solid var(--line);
  transition: background .15s ease;
}
.notif-row:hover { background: var(--surface-2); }
.notif-row:last-child { border-bottom: none; }
.notif-row.notif-read { opacity: .65; }
.notif-row.notif-read .font-semibold { font-weight: 500; }
.notif-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: linear-gradient(135deg,#6366f1,#a855f7);
  flex-shrink: 0;
}

/* ========== Empty states ========== */
.empty-state {
  text-align: center;
  padding: 2.5rem 1.5rem;
  color: var(--muted);
}
.empty-state-icon {
  width: 36px; height: 36px;
  margin: 0 auto 0.75rem;
  color: color-mix(in oklab, var(--muted) 60%, transparent);
}
.empty-state p { font-size: 0.875rem; max-width: 36ch; margin: 0 auto; }

.track-empty {
  text-align: center; padding: 1.25rem 0.5rem;
  font-size: .75rem; color: var(--muted);
  border: 1px dashed var(--line); border-radius: .5rem;
}