/* styles.css — Unified premium theme (home colors + sidebar for pages)
   Uses body.dark class for dark mode (app.js uses body.classList.toggle('dark'))
*/

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700;800&display=swap');

:root{
  --bg-0: #0f0f17;
  --accent-1: #7b00ff;
  --accent-2: #009dff;
  --glass: rgba(255,255,255,0.06);
  --glass-2: rgba(255,255,255,0.10);
  --muted: rgba(255,255,255,0.78);
  --card-shadow: 0 14px 40px rgba(0,0,0,0.48);
}

/* Light variant (if needed) */
body {
  margin:0;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  color: #fff;
  background:
    radial-gradient(circle at 12% 10%, rgba(123,0,255,0.28), transparent 12%),
    radial-gradient(circle at 92% 78%, rgba(0,205,255,0.18), transparent 14%),
    linear-gradient(180deg,#0b0b11 0%, #102038 100%);
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Dark mode class toggle (app.js sets body.dark) */
body.dark {
  background:
    radial-gradient(circle at 12% 10%, rgba(123,0,255,0.22), transparent 12%),
    radial-gradient(circle at 92% 78%, rgba(0,205,255,0.12), transparent 14%),
    linear-gradient(180deg,#06060a 0%, #0e1420 100%);
}

/* ---------- NAVBAR (Home only) ---------- */
.navbar{
  width:100%;
  padding:20px 36px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  position:fixed;
  top:0;
  left:0;
  z-index:50;
  backdrop-filter: blur(12px);
  background: rgba(6,6,10,0.45);
  border-bottom:1px solid rgba(255,255,255,0.04);
}
.logo{font-weight:800;font-size:22px;color:#fff}
.nav-links{display:flex;gap:18px;align-items:center}
.nav-links a{color:var(--muted);text-decoration:none;font-weight:600}
.btn-small{padding:8px 14px;border-radius:10px;background:linear-gradient(90deg,var(--accent-1),var(--accent-2));border:none;color:white;font-weight:700;cursor:pointer}

/* ---------- GLOW ORBS (home & pages background) ---------- */
.glow{position:fixed;pointer-events:none;z-index:-1;filter:blur(120px);width:620px;height:620px;border-radius:50%}
.glow1{left:-180px;top:-220px;background:linear-gradient(90deg,#7b00ff,#ff3cac)}
.glow2{right:-160px;bottom:-220px;background:linear-gradient(90deg,#00cfff,#5b00ff)}
.glow3{left:24%;top:36%;background:linear-gradient(90deg,#ff0060,#00cfff);opacity:0.85}

/* ---------- PAGE LAYOUT ---------- */
.container{max-width:1200px;margin:0 auto;padding:0 20px}
.page-wrapper{max-width:1100px;margin:140px auto;padding:0 20px}

/* ---------- SIDEBAR (for all pages except home) ---------- */
.sidebar {
  position:fixed;
  left:0; top:0;
  width:240px;
  height:100vh;
  padding:28px 14px;
  display:flex;
  flex-direction:column;
  gap:8px;
  background: linear-gradient(180deg, rgba(123,0,255,0.13), rgba(0,141,255,0.06));
  border-right: 1px solid rgba(255,255,255,0.04);
  z-index:45;
  transition: transform .3s ease;
}
.sidebar .brand{font-weight:800;font-size:20px;color:#fff;margin-bottom:8px}
.sidebar a {
  display:block;padding:12px 14px;border-radius:10px;color:var(--muted);text-decoration:none;font-weight:600;
}
.sidebar a:hover{background:rgba(255,255,255,0.03);color:#fff;transform:translateX(6px)}
.sidebar .spacer{flex:1}

/* class for mobile hide */
.sidebar.collapsed{ transform: translateX(-300px); }

/* content with sidebar space */
.content-with-sidebar{ margin-left: 260px; padding: 40px; min-height: calc(100vh - 80px); }

/* ---------- GLASS CARDS & BUTTONS (all pages) ---------- */
.card {
  background: var(--glass);
  border-radius:16px;
  padding:22px;
  border:1px solid rgba(255,255,255,0.06);
  box-shadow: var(--card-shadow);
  backdrop-filter: blur(10px);
  color: #fff;
}
.upload-card{background:rgba(255,255,255,0.04);padding:26px;border-radius:14px;border:1px solid rgba(255,255,255,0.06)}
.input-file{width:100%;padding:14px;border-radius:12px;border:1px solid rgba(255,255,255,0.06);background:transparent;color:var(--muted)}
.btn-primary{display:inline-block;padding:12px 22px;border-radius:12px;border:none;background:linear-gradient(90deg,var(--accent-1),var(--accent-2));color:#fff;font-weight:700;cursor:pointer}

/* result card */
.result-card{margin-top:28px;background:rgba(255,255,255,0.04);padding:22px;border-radius:12px;border:1px solid rgba(255,255,255,0.06);color:var(--muted);line-height:1.7}

/* headings inside cards */
.h-gradient { background: linear-gradient(90deg,#fff,#d3e1ff); -webkit-background-clip:text; color:transparent; -webkit-text-fill-color: transparent; font-weight:800}

/* small helpers */
.center { text-align:center; }
.mt-18{ margin-top:18px }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 900px) {
  .sidebar{ transform: translateX(-300px); position:fixed; }
  .sidebar.open { transform: translateX(0); }
  .content-with-sidebar{ margin-left: 0; padding: 20px; }
  .navbar{ padding:14px 18px }
}

/* ---------- Loader ---------- */
.loader { width:36px;height:36px;border-radius:50%;border:4px solid rgba(255,255,255,0.12);border-top-color:var(--accent-2); animation:spin 1s linear infinite; display:inline-block }
@keyframes spin{ to { transform:rotate(360deg); } }

/* small text colors for light-ish inside cards */
.card p, .result-card p, .upload-card p { color: rgba(255,255,255,0.9) }

/* small utility */
.hidden { display:none !important }