:root { --bg:#0e1325; --surface:#0f172a; --surface-2:#1b2435; --muted:#94a3b8; --fg:#e5e7eb; --brand:#f59e0b; --brand-2:#facc15; --accent:#38bdf8; --border:rgba(255,255,255,.12); --divider:rgba(255,255,255,.1); }
body { background: radial-gradient(1200px 600px at 20% -10%, rgba(56,189,248,.06), transparent), radial-gradient(900px 500px at 100% 0%, rgba(250,204,21,.05), transparent), var(--bg); color: var(--fg); }
body.contrast { --border: rgba(255,255,255,.22); --divider: rgba(255,255,255,.22); }
body.contrast .panel { box-shadow: 0 10px 28px rgba(0,0,0,.36) }
h1 { font-family: Arial, Helvetica, sans-serif; letter-spacing: .2px }
.prose { font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial; line-height:1.6 }
.prose h1,.prose h2,.prose h3 { font-weight:800 }
.prose p { margin: .5rem 0 }
.nav { display:flex; align-items:center; justify-content:space-between; padding:12px 0 }
.brand { display:flex; align-items:center; gap:10px; font-weight:800; font-size:22px; color:var(--fg) }
.brand .dot { width:10px; height:10px; border-radius:9999px; background:var(--brand) }
.nav .meta { color:var(--muted); font-size:12px }
.panel { background: linear-gradient(180deg, var(--surface), var(--surface-2)); border:1px solid var(--border); border-radius:14px; box-shadow: 0 6px 20px rgba(0,0,0,.28) }
.panel .hint { color:#94a3b8; font-size:12px }
.btn { border-radius:10px; padding:8px 12px; font-weight:600; font-size:13px; border:1px solid rgba(255,255,255,.08); transition: transform .12s ease, box-shadow .12s ease }
.btn:hover { transform: translateY(-1px); box-shadow:0 8px 24px rgba(0,0,0,.18) }
.btn-primary { background: linear-gradient(90deg, var(--brand), var(--brand-2)); color:#111 }
.btn-secondary { background:#111827; color:var(--fg) }

.badge { display:inline-flex; align-items:center; gap:6px; padding:2px 8px; border-radius:9999px; font-size:12px; font-weight:600 }
.badge-long { background:#e8f7ee; color:#10703f; }
.badge-short { background:#fde8e8; color:#b42318; }
.badge-neutral { background:#eef2ff; color:#3730a3; }
.badge-sev-high { background:#fee2e2; color:#991b1b; }
.badge-sev-mid { background:#ffedd5; color:#c2410c; }
.badge-sev-low { background:#ecfdf5; color:#065f46; }
.badge-premium { background:linear-gradient(90deg,var(--brand),var(--brand-2)); color:#111; }
.score { font-weight:700 }
.card { transition: box-shadow .15s ease, transform .15s ease }
.card:hover { box-shadow:0 8px 24px rgba(0,0,0,.12); transform: translateY(-2px) }
/* Forms / Inputs */
input[type="text"], input[type="number"], input[type="date"], input[type="email"], input[type="password"], textarea, select {
  background:#ffffff !important; color:#111827 !important; border:1px solid #d1d5db !important; border-radius:10px; padding:8px 10px;
}
input::placeholder, textarea::placeholder { color:#6b7280; }
input:focus, textarea:focus, select:focus {
  outline: none; border-color:#2563eb !important; box-shadow:0 0 0 3px rgba(37,99,235,.2) !important;
}
label { color:#e5e7eb }

/* Section helpers */
.section-title { font-weight:800; font-size:16px; color:#e5e7eb }
.section-subtle { color:#9ca3af; font-size:12px }

/* content cards */
.panel.card { transition: box-shadow .15s ease, transform .15s ease; position:relative }
.panel.card:hover { box-shadow:0 10px 28px rgba(0,0,0,.22); transform: translateY(-3px) }
.panel.card::after { content:''; position:absolute; inset:0; pointer-events:none; border:1px solid rgba(250, 204, 21, .08); border-radius:12px }
.warn { color:#f59e0b }
.ok { color:#22c55e }
.tooltip { position:relative; cursor:help }
.tooltip .tip { display:none; position:absolute; z-index:50; top:100%; left:0; background:#111; color:#fff; padding:8px 10px; border-radius:6px; font-size:12px; width:240px; box-shadow:0 6px 16px rgba(0,0,0,.2); }
.tooltip:hover .tip { display:block }
.hr { height:1px; background:var(--divider); margin:14px 0 }

/* Lock overlay for gated features */
.lock-wrap { position:relative }
.lock-mask { position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.6)); backdrop-filter: blur(2.5px); display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; border-radius:12px; animation:fadeIn .18s ease-out }
.lock-mask .animate-pulse { animation: pulse 1.8s ease-in-out infinite }
@keyframes pulse { 0%,100% { opacity: .85; transform: scale(1) } 50% { opacity: 1; transform: scale(1.02) } }
@keyframes fadeIn { from { opacity:0; transform: translateY(4px) } to { opacity:1; transform: translateY(0) } }

/* Toast */
.toast { position:fixed; right:16px; bottom:16px; background:#111827; color:#fff; padding:10px 12px; border:1px solid rgba(255,255,255,.08); border-radius:10px; font-size:13px; box-shadow:0 6px 18px rgba(0,0,0,.25); opacity:.98 }

/* Inline micro hints for inputs */
.micro-hint { display:block; font-size:11px; color:#94a3b8; margin-top:4px }
.micro-hint.ok { color:#22c55e }
.micro-hint.warn { color:#f59e0b }
.micro-hint.err { color:#ef4444 }

/* Input validation borders */
.input-ok { border-color: rgba(34,197,94,.9) !important; box-shadow: 0 0 0 2px rgba(34,197,94,.15) }
.input-warn { border-color: rgba(245,158,11,.9) !important; box-shadow: 0 0 0 2px rgba(245,158,11,.12) }
.input-err { border-color: rgba(239,68,68,.9) !important; box-shadow: 0 0 0 2px rgba(239,68,68,.12) }

/* Skeleton loading */
.skeleton { position:relative; overflow:hidden; background: #0f172a; border:1px solid rgba(255,255,255,.06); border-radius:12px }
.skeleton .sk-bar { height: 12px; background: #1f2937; border-radius:6px }
.skeleton .sk-box { background: #111827; border-radius:8px }
.skeleton::after { content:''; position:absolute; inset:0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255,255,255,.04), transparent); animation: shimmer 1.2s infinite }
@keyframes shimmer { 100% { transform: translateX(100%) } }