:root{
  --bg0:#0b0f14;
  --bg1:#0b0f1480;
  --fg:#eaf1ff;
  --muted:#a8b3c7;
  --accent:#7bc4ff;
  --pad:16px;
  --radius:20px;
  --blur:16px;
}

*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  color:var(--fg);
  font:16px/1.45 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial;
  background:
    radial-gradient(1200px 800px at 70% -10%, #0f1f35 0%, transparent 60%),
    radial-gradient(900px 700px at 0% 100%, #1a2230 0%, transparent 70%),
    var(--bg0);
}

/* container */
.shell{max-width:980px;margin:36px auto;padding:0 var(--pad)}

/* subtle noise for depth */
body::after{
  content:"";
  position:fixed; inset:0;
  pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/><feComponentTransfer><feFuncA type='table' tableValues='0 0 0 0 0.05'/></feComponentTransfer></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity:.45;
}

/* liquid glass primitive */
.glass{
  position:relative;
  background:linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.06));
  border:1px solid rgba(255,255,255,.22);
  border-radius:var(--radius);
  box-shadow:
    0 20px 60px rgba(0,0,0,.45),
    0 1px 0 rgba(255,255,255,.18) inset,
    0 -1px 0 rgba(0,0,0,.35) inset;
  backdrop-filter:blur(var(--blur)) saturate(1.2);
  -webkit-backdrop-filter:blur(var(--blur)) saturate(1.2);
  overflow:hidden;
}
.glass::before{
  /* rim highlight */
  content:"";
  position:absolute; inset:0; border-radius:inherit;
  background:
    radial-gradient(800px 400px at 0% -20%, rgba(255,255,255,.35), transparent 60%),
    radial-gradient(600px 300px at 100% 120%, rgba(255,255,255,.14), transparent 60%);
  pointer-events:none;
}
.panel{padding:18px}

/* headings + text */
h1{margin:0 0 6px 0; font-size:28px; letter-spacing:.2px}
.muted{color:var(--muted)}
a.inline{color:var(--fg); text-decoration:none; opacity:.9}
a.inline:hover{opacity:1}

/* grid of cards on home */
.grid{display:grid; gap:16px; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); margin:18px 0 48px}
.card{padding:16px}
.card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.title{margin:0;font-size:18px}
.badge{font-size:12px;padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18)}
.meta{display:flex;gap:12px;color:var(--muted);font-size:13px;margin:6px 0 10px}
.actions{display:flex;gap:10px;margin-top:10px}

/* inputs + buttons in “glass” style */
input, select, button{
  font:inherit; color:var(--fg);
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.20);
  border-radius:14px; padding:10px 12px;
  outline:none;
  backdrop-filter:blur(calc(var(--blur) * .6));
  -webkit-backdrop-filter:blur(calc(var(--blur) * .6));
}
input::placeholder{color:#c9d3e5aa}
select{appearance:none;background-image:linear-gradient(180deg,transparent 70%,rgba(255,255,255,.06));padding-right:36px}
button{cursor:pointer; transition:transform .06s ease, box-shadow .15s ease}
button:active{transform:translateY(1px)}
.btn{
  background:linear-gradient(180deg, rgba(255,255,255,.20), rgba(255,255,255,.07));
  border:1px solid rgba(255,255,255,.28);
  box-shadow:0 8px 24px rgba(0,0,0,.35), 0 1px 0 rgba(255,255,255,.18) inset, 0 -1px 0 rgba(0,0,0,.30) inset;
}
.btn.primary{
  background:
    linear-gradient(180deg, rgba(123,196,255,.35), rgba(123,196,255,.15)),
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.05));
  border-color:rgba(123,196,255,.5);
  box-shadow:0 10px 30px rgba(123,196,255,.25), 0 1px 0 rgba(255,255,255,.25) inset, 0 -1px 0 rgba(0,0,0,.35) inset;
}

/* compact “chip” buttons */
.chips{display:flex; gap:10px; flex-wrap:wrap}
.chip{padding:8px 12px; border-radius:999px; border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.07)}

/* tiny helper */
.row{display:flex;gap:10px;align-items:center}
.col{display:grid;gap:12px}

/* hover shimmer for primary buttons */
.btn.primary::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(120deg, transparent 30%, rgba(255,255,255,.25) 50%, transparent 70%);
  opacity:0; transition:opacity .2s ease;
}
.btn.primary:hover::after{opacity:1}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  .glass, input, select, button{ background:rgba(255,255,255,.10) }
}