:root {
  --fa-bg: #0a0f1c;
  --fa-card: rgba(255, 255, 255, 0.06);
  --fa-border: rgba(255, 255, 255, 0.12);
  --fa-text: #e5ecff;
  --fa-accent: linear-gradient(120deg, #5ad8ff, #7c4dff);
  --fa-radius: 14px;
  --fa-blur: blur(14px);
  --fa-shadow: 0 20px 70px rgba(0,0,0,0.45);
}

body {
  background: radial-gradient(circle at 20% 20%, rgba(90,216,255,0.1), transparent 25%),
              radial-gradient(circle at 80% 0%, rgba(124,77,255,0.15), transparent 25%),
              var(--fa-bg);
  color: var(--fa-text);
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  margin: 0;
}

.fa-shell { display:flex; min-height: 100vh; }
.fa-sidebar { width: 240px; padding: 24px; background: rgba(255,255,255,0.04); backdrop-filter: var(--fa-blur); border-right:1px solid var(--fa-border); position:sticky; top:0; height:100vh; }
.fa-sidebar h2 { margin-top:0; }
.fa-sidebar ul { list-style:none; padding:0; }
.fa-sidebar a { color: var(--fa-text); text-decoration:none; display:block; padding:8px 0; }
.fa-main { flex:1; padding: 24px; }
.fa-topbar { display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; }
.fa-topbar h1 { margin:0; }
.fa-section { margin-bottom:32px; }
.fa-section-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
.fa-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); gap:16px; }
.fa-grid-2 { display:grid; grid-template-columns: repeat(2,1fr); gap:12px; }
.fa-grid-3 { display:grid; grid-template-columns: repeat(3,1fr); gap:12px; }
.fa-col-span-2 { grid-column: span 2; }
.fa-col-span-3 { grid-column: span 3; }

.fa-card { background: var(--fa-card); border:1px solid var(--fa-border); border-radius: var(--fa-radius); padding:16px; backdrop-filter: var(--fa-blur); box-shadow: var(--fa-shadow); }
.fa-card h3, .fa-card h4 { margin-top:0; }
.fa-btn { background-image: var(--fa-accent); color:#fff; border:none; padding:10px 16px; border-radius: 10px; cursor:pointer; box-shadow: var(--fa-shadow); }
.fa-btn:hover { transform: translateY(-1px); }
.fa-inline { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.fa-pill { padding:6px 10px; border-radius:999px; background: rgba(255,255,255,0.08); border:1px solid var(--fa-border); font-size:12px; }
.fa-code { background: #050814; padding:10px; border-radius: var(--fa-radius); font-family: "SFMono-Regular", monospace; }

input, select, textarea { width:100%; padding:10px; border-radius:10px; border:1px solid var(--fa-border); background: rgba(255,255,255,0.03); color: var(--fa-text); }
label { font-size:14px; display:flex; flex-direction:column; gap:6px; }

@media (max-width: 900px) {
  .fa-shell { flex-direction: column; }
  .fa-sidebar { width: 100%; position: relative; height:auto; display:flex; gap:12px; }
  .fa-main { padding: 16px; }
  .fa-grid-3, .fa-grid-2 { grid-template-columns: repeat(auto-fit,minmax(140px,1fr)); }
}