body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;background:#0b1021;color:#e5e7eb;margin:0}
html, body{overflow-x:hidden}
.navbar{display:flex;justify-content:space-between;align-items:center;background:linear-gradient(90deg,#0B1021,#111827);padding:12px 18px;border-bottom:1px solid #1f2937;position:sticky;top:0;z-index:10}
.navbar .brand{font-weight:700}
.navbar .links a{color:#cbd5e1;text-decoration:none;margin-left:12px}
.navbar .links a.active{color:#ffffff;border-bottom:2px solid #60a5fa;padding-bottom:2px}
.container{max-width:1400px;margin:24px auto;padding:0 24px}
.stats{display:flex;gap:12px;flex-wrap:wrap;margin-top:12px;width:100%}
.stats .card{flex:1 1 0}
.card{background:#111827;border:1px solid #1f2937;border-radius:10px;padding:12px 16px;min-width:180px;box-sizing:border-box}
.card .value{font-size:1.4rem;font-weight:600}
.card .label{font-size:.85rem;color:#9ca3af}
.btn{background:#374151;color:#e5e7eb;border:1px solid #4b5563;padding:8px 12px;border-radius:8px;text-decoration:none;cursor:pointer}
.btn.active{background:#4b5563;border-color:#6b7280}
.form-row{margin:12px 0}
.result{background:#0f172a;border:1px solid #1f2937;color:#cbd5e1;padding:12px;border-radius:8px;white-space:pre-wrap;word-break:break-word}
input[type="text"], textarea, select, input[type="number"]{background:#0f172a;border:1px solid #374151;color:#e5e7eb;border-radius:8px;padding:8px}

/* Drag & drop upload */
.dropzone{border:2px dashed #374151;border-radius:10px;padding:18px;text-align:center;color:#9ca3af;background:#0f172a;cursor:pointer}
.dropzone.dragover{background:#0e1a33;border-color:#60a5fa;color:#cfe3ff}

/* Progress bar */
.progress{width:100%;height:10px;background:#111827;border:1px solid #1f2937;border-radius:6px;overflow:hidden}
.progress .progress-bar{height:100%;width:0;background:linear-gradient(90deg,#60a5fa,#34d399)}

/* Toasts */
.toast-container{position:fixed;right:16px;bottom:16px;display:flex;flex-direction:column;gap:8px;z-index:1000}
.toast{background:#111827;border:1px solid #1f2937;color:#e5e7eb;padding:10px 12px;border-radius:8px;min-width:220px;box-shadow:0 6px 16px rgba(0,0,0,0.35)}
.toast.success{border-color:#10b981}
.toast.error{border-color:#ef4444}
.toast.info{border-color:#60a5fa}

/* Spinner */
.spinner{display:inline-block;width:12px;height:12px;border:2px solid #cbd5e1;border-top-color:transparent;border-radius:50%;animation:spin 1s linear infinite;margin-right:6px;vertical-align:middle}
@keyframes spin{to{transform:rotate(360deg)}}

/* Badges and highlights */
.badge{display:inline-block;padding:2px 6px;border-radius:999px;font-size:.75rem;border:1px solid #374151;color:#cbd5e1;background:#0f172a;margin-right:6px}
mark{background:#3b82f6; color:#ffffff; padding:0 2px; border-radius:3px}
body.light .badge{border-color:#cbd5e1;color:#111827;background:#f3f4f6}
body.light mark{background:#60a5fa;color:#0c4a6e}

/* Light theme overrides */
body.light{background:#f8fafc;color:#0f172a}
body.light .navbar{background:linear-gradient(90deg,#f8fafc,#e5e7eb);border-bottom-color:#d1d5db}
body.light .navbar .links a{color:#111827}
body.light .card{background:#ffffff;border-color:#e5e7eb}
body.light .card .label{color:#6b7280}
body.light .btn{background:#e5e7eb;color:#111827;border-color:#cbd5e1}
body.light .btn.active{background:#d1d5db;border-color:#9ca3af}
body.light .result{background:#ffffff;border-color:#e5e7eb;color:#111827}
body.light input[type="text"], body.light textarea, body.light select, body.light input[type="number"]{background:#ffffff;border-color:#cbd5e1;color:#111827}
body.light .dropzone{background:#ffffff;border-color:#cbd5e1;color:#6b7280}
body.light .dropzone.dragover{background:#e0f2fe;border-color:#60a5fa;color:#0c4a6e}
body.light .progress{background:#f3f4f6;border-color:#e5e7eb}
body.light .toast{background:#ffffff;border-color:#e5e7eb;color:#0f172a}

/* Landing hero */
.hero{display:grid;grid-template-columns:1.2fr 1fr;gap:24px;align-items:center;margin-top:12px}
.hero-content{display:flex;flex-direction:column;gap:12px}
.hero-title{font-size:2.2rem;margin:0}
.hero-subtitle{color:#9ca3af;margin:0}
.hero-actions{margin-top:6px}
.hero-btn{font-size:1rem;padding:10px 16px}
.hero-img-wrap{border-radius:12px;overflow:hidden;border:1px solid #1f2937}
.hero-img{width:100%;height:100%;object-fit:cover;display:block}
@media (max-width: 900px){
  .hero{grid-template-columns:1fr}
  .hero-img-wrap{order:-1}
}

/* Landing page v2 */
.landing .banner-wrap{position:relative;left:50%;transform:translateX(-50%);width:100vw;border-radius:0;overflow:hidden;border:none}
.landing .hero-banner{display:block;width:100%;height:360px;object-fit:cover;object-position:center 62%}
.landing .landing-content{margin-top:16px;text-align:center}
.landing .features{display:flex;gap:12px;flex-wrap:wrap;margin-top:16px}
.landing .features .card{flex:1 1 0}
.landing .hero-actions{margin-top:14px;display:flex;justify-content:center}
.landing .hero-btn{padding:12px 20px;font-size:1.08rem}
@media (max-width: 700px){
  .landing .hero-banner{height:240px;object-position:center 60%}
}