:root{
  --bg:#0b0e17;
  --panel:#111827cc;
  --stroke:rgba(255,255,255,.08);
  --text:#eff3ff;
  --muted:#9aa7c0;
  --shadow:0 18px 70px rgba(0,0,0,.35);
  --radius:24px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:
    radial-gradient(circle at 15% 20%, rgba(88,101,242,.18), transparent 24%),
    radial-gradient(circle at 80% 16%, rgba(124,58,237,.16), transparent 20%),
    radial-gradient(circle at 50% 80%, rgba(0,212,255,.10), transparent 28%),
    linear-gradient(180deg, #090b12, #0d1020 60%, #080a12);
  color:var(--text);
  overflow-x:hidden;
}

a{color:inherit;text-decoration:none}
button,input{font:inherit}
button{cursor:pointer}

.bg-orb{
  position:fixed;
  inset:auto;
  width:22rem;
  height:22rem;
  filter:blur(52px);
  opacity:.22;
  pointer-events:none;
  animation: drift 18s ease-in-out infinite alternate;
  will-change:transform;
}
.orb-a{top:-10rem;left:-8rem;background:rgba(88,101,242,.55)}
.orb-b{bottom:-10rem;right:-10rem;background:rgba(0,212,255,.26);animation-duration:22s}
.bg-grid{
  position:fixed;
  inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size:42px 42px;
  mask-image:linear-gradient(180deg, rgba(0,0,0,.65), rgba(0,0,0,.12));
  pointer-events:none;
}

.shell{
  position:relative;
  width:min(1180px, calc(100vw - 24px));
  min-height:calc(100vh - 24px);
  margin:12px auto;
  display:grid;
  grid-template-columns: 280px 1fr;
  gap:18px;
}

.glass{
  background:linear-gradient(180deg, rgba(17,24,39,.88), rgba(10,14,24,.78));
  border:1px solid var(--stroke);
  box-shadow:var(--shadow);
  backdrop-filter: blur(18px);
}

.sidebar{
  border-radius:var(--radius);
  padding:20px;
  display:flex;
  flex-direction:column;
  gap:18px;
  position:sticky;
  top:12px;
  height:fit-content;
}

.brand{
  display:flex;
  align-items:center;
  gap:14px;
  padding:6px 4px 14px;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.brand-icon{
  width:54px;
  height:54px;
  border-radius:18px;
  object-fit:cover;
  box-shadow:0 0 0 1px rgba(255,255,255,.1), 0 0 24px rgba(88,101,242,.20);
  animation: pop .45s ease both;
}
.brand h1{
  margin:0;
  font-size:1.02rem;
  line-height:1.15;
  letter-spacing:-.02em;
  opacity:0;
  transform:translateY(8px);
  transition:opacity .32s ease, transform .32s ease;
}
.brand p{
  margin:4px 0 0;
  color:var(--muted);
  font-size:.9rem;
}

.tabs{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.tab{
  border:1px solid transparent;
  color:var(--muted);
  background:rgba(255,255,255,.02);
  border-radius:16px;
  padding:14px 16px;
  text-align:left;
  transition:transform .18s ease, background .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease;
  will-change:transform;
}
.tab:hover{
  transform:translateY(-1px);
  color:var(--text);
  border-color:rgba(88,101,242,.32);
  box-shadow:0 0 0 1px rgba(88,101,242,.08), 0 8px 24px rgba(0,0,0,.18);
}
.tab.is-active{
  color:var(--text);
  background:linear-gradient(135deg, rgba(88,101,242,.22), rgba(0,212,255,.10));
  border-color:rgba(88,101,242,.42);
  box-shadow:0 0 0 1px rgba(88,101,242,.20), 0 16px 40px rgba(88,101,242,.10);
}

.content{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:18px;
}

.page{
  border-radius:var(--radius);
  padding:22px;
  min-height:calc(100vh - 24px);
  display:none;
  animation: pageIn .18s ease both;
  content-visibility:auto;
  contain-intrinsic-size: 800px;
}
.page.is-active{display:block}

.page-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin-bottom:20px;
}
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:#b7c1e0;
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.18em;
}
.page h2{
  margin:10px 0 0;
  font-size:clamp(1.45rem, 2vw, 2rem);
  line-height:1.1;
  letter-spacing:-.04em;
}

.ghost-button,
#upload-button{
  border:1px solid rgba(88,101,242,.34);
  color:var(--text);
  background:linear-gradient(135deg, rgba(88,101,242,.16), rgba(124,58,237,.12));
  border-radius:16px;
  padding:12px 16px;
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease, opacity .16s ease;
  box-shadow:0 0 0 1px rgba(88,101,242,.06), 0 8px 18px rgba(0,0,0,.16);
}
.ghost-button:hover,
#upload-button:hover{
  transform:translateY(-1px);
  border-color:rgba(0,212,255,.5);
  box-shadow:0 0 0 1px rgba(0,212,255,.1), 0 14px 30px rgba(0,0,0,.2);
}
.ghost-button:active,
#upload-button:active{transform:translateY(0)}
#upload-button:disabled{
  opacity:.55;
  cursor:not-allowed;
  transform:none;
}

.welcome{
  max-width:680px;
  font-size:1.02rem;
  line-height:1.75;
  color:#e6ecff;
  padding:20px;
  border-radius:20px;
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
  border:1px solid rgba(255,255,255,.06);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.02);
}

.markdown strong{
  color:#fff;
  text-shadow:0 0 18px rgba(88,101,242,.35);
}
.markdown a{
  color:#8fdcff;
  text-decoration:underline;
  text-underline-offset:3px;
}

.form-card{
  max-width:720px;
  display:grid;
  gap:12px;
  padding:20px;
  border-radius:20px;
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
  border:1px solid rgba(255,255,255,.06);
}
.form-card label{
  font-size:.88rem;
  color:#cbd5e1;
  letter-spacing:.02em;
}
.input-row{
  display:grid;
  grid-template-columns:1fr auto;
  gap:10px;
}
input{
  border:1px solid rgba(255,255,255,.08);
  background:rgba(8,12,22,.78);
  color:var(--text);
  border-radius:16px;
  padding:14px 16px;
  outline:none;
  transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
input:focus{
  border-color:rgba(88,101,242,.48);
  box-shadow:0 0 0 4px rgba(88,101,242,.12);
}
.hint{
  margin:0;
  color:var(--muted);
  font-size:.92rem;
}
.status{
  font-size:.95rem;
  min-height:1.35em;
}
.status.idle{color:var(--muted)}
.status.loading{color:#c4d2ff}
.status.success{color:#86efac}
.status.error{color:#fda4af}
.cooldown{
  color:#9fb0d4;
  font-size:.9rem;
}

@keyframes pageIn{
  from{opacity:0;transform:translateY(10px) scale(.99)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
@keyframes pop{
  from{opacity:0;transform:scale(.86)}
  to{opacity:1;transform:scale(1)}
}
@keyframes drift{
  from{transform:translate3d(0,0,0) scale(1)}
  to{transform:translate3d(28px,-18px,0) scale(1.05)}
}

@media (max-width: 980px){
  .shell{grid-template-columns:1fr}
  .sidebar{position:relative;top:0}
  .page{min-height:auto}
}
@media (max-width: 680px){
  .shell{width:min(100vw - 16px, 1180px); margin:8px auto}
  .sidebar,.page{padding:16px;border-radius:20px}
  .page-head{flex-direction:column;align-items:stretch}
  .input-row{grid-template-columns:1fr}
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation:none !important;
    transition:none !important;
    scroll-behavior:auto !important;
  }
}