:root{
  --bg: #0f1724;
  --card: #0b1220;
  --muted: #9aa7bf;
  --accent: #6ee7b7;
  --text: #e6eef8;
  --glass: rgba(255,255,255,0.04);
  --shadow: 0 6px 18px rgba(2,6,23,0.6);
  --radius: 12px;
  transition: 0.3s ease;
}
:root.light{
  --bg: #f6f8fb;
  --card: #ffffff;
  --muted: #6b7280;
  --accent: #0077cc;
  --text: #0b1220;
  --glass: rgba(2,6,23,0.03);
  --shadow: 0 8px 24px rgba(10,10,20,0.06);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background:linear-gradient(180deg,var(--bg), rgba(0,0,0,0.05));
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  transition: background 0.35s, color 0.35s;
  padding-top:72px;
}

/* container */
.container{max-width:1100px;margin:0 auto;padding:28px}

/* header */
.site-header{
  width:100%;
  position:fixed;top:0;left:0;z-index:50;
  backdrop-filter: blur(6px);
  border-bottom:1px solid rgba(255,255,255,0.03);
  background:linear-gradient(180deg, rgba(0,0,0,0.25), transparent);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 0}
.logo{font-weight:700;font-size:1.1rem;color:var(--text);text-decoration:none}
.logo span{color:var(--accent)}
.nav{display:flex;gap:12px}
.nav a{color:var(--muted);text-decoration:none;padding:8px;border-radius:8px;transition:all .18s}
.nav a:hover{color:var(--text);background:var(--glass)}
.header-actions{display:flex;gap:8px;align-items:center}
#theme-toggle{background:transparent;border:1px solid transparent;padding:8px;border-radius:8px;cursor:pointer}
.mobile-menu{display:none}

/* hero */
.hero{padding:64px 0}
.hero-grid{display:grid;grid-template-columns:1fr 360px;gap:24px;align-items:center}
.hero-content h1{font-size:2rem;margin:0 0 12px}
.hero-ctas .btn{margin-right:8px}
.hero-visual .card{background:var(--card);padding:16px;border-radius:14px;box-shadow:var(--shadow)}
.section-title{font-size:1.4rem;margin-bottom:12px}

/* tools */
.tools-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.tool-card{background:var(--card);padding:16px;border-radius:14px;box-shadow:var(--shadow);transition:transform .18s}
.tool-card:hover{transform:translateY(-6px)}
.tool-card h3{margin:0 0 8px}
.muted{color:var(--muted);font-size:0.95rem;margin-bottom:10px}

/* uploader */
.uploader{border-radius:10px;padding:12px;background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent);border:1px solid rgba(255,255,255,0.03)}
.dropzone{padding:18px;border:2px dashed rgba(255,255,255,0.03);text-align:center;border-radius:10px;margin-bottom:10px}
.previews{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.preview-card{width:100px;height:80px;border-radius:8px;background:var(--glass);overflow:hidden;display:flex;align-items:center;justify-content:center;position:relative}
.preview-card img{max-width:100%;max-height:100%}
.preview-meta{font-size:11px;color:var(--muted);margin-top:6px}

/* controls */
.controls{display:flex;gap:8px;align-items:center;margin-top:10px;flex-wrap:wrap}
.controls label{font-size:13px;color:var(--muted)}
.btn{padding:8px 12px;border-radius:10px;background:linear-gradient(90deg,var(--accent), #34d399);color:#052628;border:none;cursor:pointer;box-shadow:var(--shadow);transition:transform .12s,opacity .12s}
.btn:hover{transform:translateY(-3px)}
.btn.secondary{background:transparent;border:1px solid rgba(255,255,255,0.06);color:var(--text)}

/* previews & results */
.results .file-row{display:flex;align-items:center;gap:12px;padding:8px;border-radius:8px;background:var(--glass);margin-top:8px}
.file-row .name{flex:1;font-size:0.95rem}

/* age and percent */
.age-controls{margin-top:10px;display:flex;gap:8px}
.age-result .result-button{margin-top:10px;padding:10px;border-radius:10px;background:linear-gradient(90deg,var(--glass),transparent);border:1px solid rgba(255,255,255,0.03);cursor:text;min-height:48px}
.result-button:focus{outline:2px dashed rgba(100,150,200,0.3)}
.percent-grid{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.percent-grid .cell{flex:1;min-width:150px}
.percent-grid input{width:100%;padding:8px;border-radius:8px;border:1px solid rgba(255,255,255,0.04);background:transparent;color:var(--text)}

/* footer */
.site-footer{background:linear-gradient(180deg, rgba(0,0,0,0.05), transparent);padding:28px 0;margin-top:28px}
.footer-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.footer-grid h4{margin-bottom:8px}
.footer-bottom{padding:12px 0;border-top:1px solid rgba(255,255,255,0.02);margin-top:16px;color:var(--muted)}
.socials a{margin-right:8px;color:var(--muted)}

/* responsive */
@media (max-width:980px){
  .tools-grid{grid-template-columns:1fr}
  .hero-grid{grid-template-columns:1fr}
}
@media (max-width:700px){
  .nav{display:none}
  .mobile-menu{display:block}
  body{padding-top:68px}
}