:root {
  --bg:#0b1220;
  --card:#121a2b;
  --txt:#e8eefc;
  --acc:#4ea3ff;
  --ghost:#1a2336;
  --border:#1f2b45;
  --muted:#8fa3c4;
}
:root.light {
  --bg:#f6f8fc;
  --card:#fff;
  --txt:#0b1220;
  --acc:#2563eb;
  --ghost:#eef2ff;
  --border:#e5e7eb;
  --muted:#334155;
}
* { box-sizing: border-box; }
body {
  margin:0; font-family: system-ui, Arial;
  background:var(--bg); color:var(--txt);
  transition: background .3s, color .3s;
}

.topbar {
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 14px; background:var(--card);
  border-bottom:1px solid var(--border);
  position:sticky; top:0; z-index:10;
}
.brand { font-weight:700; opacity:.93; }
.ghost-btn {
  padding:8px 12px;
  background:var(--ghost);
  color:var(--txt);
  border:1px solid var(--border);
  border-radius:10px;
  cursor:pointer;
}
#backBtn {
  margin-left:14px;
  background:var(--acc); color:#fff;
  border-radius:10px; border:0; padding:10px 17px;
  font-weight:700; cursor:pointer;
}
.container {
  max-width: 720px; margin: 32px auto 30px;
  background:var(--card); padding:30px 22px 28px 22px;
  border-radius:15px; box-shadow: 0 8px 32px rgba(0,0,0,.13);
  border:1.4px solid var(--border);
}

h2 { margin-top:0; color:var(--acc); font-weight:700; }
label { display:block; margin:12px 0 6px; color:var(--muted);}
input[type=file] { width:100%; padding:10px; background:var(--ghost); color:var(--txt); border:1px solid var(--border); border-radius:8px;}
button { margin-top:14px; padding:12px 16px; border:0; background:var(--acc); color:#fff; font-weight:700; border-radius:10px; cursor:pointer;}
#refreshBtn { background:var(--ghost); color:var(--txt); margin-left:9px; border:1px solid var(--border);}
#result, #progress { margin-top:12px; font-size:15px; opacity:.95;}

#infosection {
  max-width: 900px;
  margin: 14px auto 44px;
  padding: 0 24px;
  background: none !important;
  border-radius: 0 !important;
  border: none !important;
  box-shadow: none !important;
}

.meta-block {
  background: #4ea3ff;
  color: #fff;
  font-weight: 600;
  border-radius: 13px;
  padding: 22px 25px 15px 25px;
  font-size: 1.13em;
  margin-bottom: 22px;
}

.description-block {
  font-size: 1.13em;
  color: var(--txt);
  margin-bottom: 18px;
  background: none;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}
ul { font-size:1.08em; color:var(--txt);}
.key-features li { margin-bottom:6px;}
h3  { font-size:1.16em; font-weight:700; margin-bottom:9px; color:#4ea3ff; margin-top:32px;}
/* Light Theme Fix */
body.light, :root.light, .light body { background:var(--bg)!important; color:var(--txt)!important;}
:root.light, .light { --bg:#f6f8fc; --card:#fff; --txt:#0b1220; --acc:#2563eb; --ghost:#eef2ff; --border:#e5e7eb; --muted:#334155;}
.light .topbar { background:var(--card)!important; color:var(--txt)!important;}
.light #infosection, .light h2, .light h3, .light ul, .light label, .light .description-block, .light p {
  color:var(--txt)!important; background:none!important;
}
.light .meta-block { background:var(--acc)!important; color:#fff!important;}