/* PURSHO Resume App - tailwind-like utility helpers and brand styles */
:root {
    --pursho-bg: #0b1020;
    --pursho-card: #111729;
    --pursho-text: #e5e7eb;
    --pursho-muted: #94a3b8;
    --pursho-accent: #f59e0b;
    --pursho-primary: #6366f1;
}

*,*::before,*::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; font-family: 'Plus Jakarta Sans', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background: var(--pursho-bg); color: var(--pursho-text); }
a { color: var(--pursho-accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.container { max-width: 1100px; margin: 0 auto; padding: 0 1.25rem; }

/* Navbar */
.nav { display:flex; justify-content:space-between; align-items:center; padding:1.25rem 0; border-bottom: 1px solid rgba(255,255,255,.06); }
.nav .brand { font-weight: 800; letter-spacing:.02em; font-size:1.15rem; }
.nav .brand .accent { color: var(--pursho-accent); }
.nav a { color:#cbd5e1; margin-left:1.25rem; }

/* Hero */
.hero { padding: 4rem 0 2rem; }
.hero h1 { font-size: clamp(2rem, 5vw, 3.5rem); line-height: 1.05; margin: 0 0 1rem; }
.hero p.lead { color: var(--pursho-muted); font-size: 1.1rem; max-width: 720px; }
.hero .pill { display:inline-block; padding:.35rem .85rem; border-radius:999px; background: rgba(245,158,11,.12); color: var(--pursho-accent); font-size:.8rem; letter-spacing:.08em; text-transform:uppercase; margin-bottom:1rem; }

/* Cards */
.tools { display:grid; grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); gap: 1.25rem; padding: 2rem 0 4rem; }
.card { background: var(--pursho-card); border:1px solid rgba(255,255,255,.06); border-radius: 18px; padding: 1.5rem; transition: transform .2s, border-color .2s, box-shadow .2s; }
.card:hover { transform: translateY(-4px); border-color: rgba(245,158,11,.4); box-shadow: 0 18px 50px rgba(0,0,0,.35); }
.card h3 { margin: .5rem 0; font-size: 1.25rem; }
.card p { color: var(--pursho-muted); }
.card .icon { width: 48px; height: 48px; border-radius: 12px; background: rgba(99,102,241,.15); display:flex; align-items:center; justify-content:center; font-size: 1.4rem; }

/* Buttons */
.btn { display:inline-block; padding:.85rem 1.4rem; border-radius: 12px; font-weight: 600; cursor:pointer; border:0; transition: transform .12s, background .2s; }
.btn-primary { background: var(--pursho-accent); color: #0b0f1c; }
.btn-primary:hover { transform: translateY(-1px); }
.btn-ghost { background: transparent; border:1px solid rgba(255,255,255,.12); color:#e5e7eb; }
.btn-link { background: transparent; color: var(--pursho-accent); }

/* Forms */
.form-card { background: var(--pursho-card); border-radius: 18px; padding: 2rem; border:1px solid rgba(255,255,255,.06); }
.form-grid { display:grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap: 1rem; }
label { display:block; margin: 0 0 .35rem; font-size:.9rem; color:#cbd5e1; }
input[type=text], input[type=email], input[type=tel], input[type=url], textarea, select {
    width:100%; padding: .75rem .9rem; background: #0a0f1f; border:1px solid rgba(255,255,255,.1);
    color:#e5e7eb; border-radius: 10px; font: inherit;
}
input:focus, textarea:focus, select:focus { outline: 2px solid var(--pursho-accent); border-color: transparent; }
textarea { min-height: 110px; resize: vertical; }
.field { margin-bottom: 1rem; }
.help { color: #94a3b8; font-size:.82rem; margin-top: .25rem; }

/* Steps */
.steps { display:flex; gap:.5rem; margin: 1rem 0 2rem; flex-wrap:wrap; }
.step-pill { padding:.35rem .8rem; border-radius:999px; border:1px solid rgba(255,255,255,.1); font-size:.85rem; color:#94a3b8; cursor:pointer; }
.step-pill.active { background: var(--pursho-accent); color:#0b0f1c; border-color:transparent; font-weight:600; }
.step-section { display:none; }
.step-section.active { display:block; }

/* Repeater */
.repeater-row { background:#0a0f1f; padding:1rem; border-radius: 12px; margin-bottom:.75rem; border:1px solid rgba(255,255,255,.06); }
.repeater-row .row-actions { display:flex; justify-content:flex-end; gap:.5rem; }

/* Theme + style picker */
.style-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:.6rem; }
.style-tile { padding:.75rem; border-radius:10px; border:2px solid rgba(255,255,255,.08); background:#0a0f1f; cursor:pointer; text-align:center; font-size:.9rem; }
.style-tile.active { border-color: var(--pursho-accent); background: rgba(245,158,11,.08); }

.theme-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(110px,1fr)); gap:.5rem; }
.theme-tile { padding:.6rem .5rem; border-radius:10px; border:2px solid rgba(255,255,255,.08); cursor:pointer; text-align:center; font-size:.8rem; }
.theme-tile .swatch { width: 100%; height: 36px; border-radius: 8px; margin-bottom:.4rem; }
.theme-tile.active { border-color: var(--pursho-accent); }

/* Alerts */
.alert { padding: .9rem 1.1rem; border-radius:10px; margin-bottom:1rem; }
.alert-error { background: rgba(239,68,68,.12); color:#fecaca; border:1px solid rgba(239,68,68,.3); }
.alert-warn  { background: rgba(245,158,11,.12); color:#fde68a; border:1px solid rgba(245,158,11,.3); }
.alert-success { background: rgba(34,197,94,.12); color:#bbf7d0; border:1px solid rgba(34,197,94,.3); }

/* Footer */
footer.site-footer { padding:2rem 0; border-top:1px solid rgba(255,255,255,.06); color: var(--pursho-muted); text-align:center; }

/* Resume preview wrapper */
.resume-frame { background: white; color:#111; border-radius:12px; padding:0; overflow:hidden; box-shadow: 0 20px 60px rgba(0,0,0,.45); }