:root {
  color-scheme: dark;
  --gizmo-bg: #090a0e;
  --gizmo-panel: #12131a;
  --gizmo-border: rgba(255, 255, 255, .09);
  --gizmo-text: #f5f5f7;
  --gizmo-muted: #9295a3;
  --gizmo-purple: #7624ce;
  --gizmo-purple-bright: #a94cff;
  --gizmo-green: #2fd279;
}

html { position: relative; min-height: 100%; font-size: 16px; }
body {
  min-height: 100vh;
  margin: 0;
  color: var(--gizmo-text);
  background: radial-gradient(circle at 50% -10%, rgba(111, 36, 198, .22), transparent 36rem), linear-gradient(145deg, #0c0d13 0%, var(--gizmo-bg) 55%, #0d0b12 100%);
  font-family: Inter, "Segoe UI", Arial, sans-serif;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .16;
  background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.02) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(to bottom, #000, transparent 82%);
}

a { color: #c58aff; }
a:hover { color: #dfbdff; }
.site-container { max-width: 1440px; padding-inline: clamp(1rem, 3vw, 3rem); }
.site-header { border-bottom: 1px solid var(--gizmo-border); background: rgba(9, 10, 14, .84); backdrop-filter: blur(18px); position: sticky; top: 0; z-index: 100; }
.navbar { min-height: 78px; }
.navbar-brand img { display: block; width: 142px; height: 56px; object-fit: contain; object-position: center; }
.navbar .nav-link { color: #b8bac4; border-radius: .55rem; padding: .55rem .8rem !important; }
.navbar .nav-link:hover, .navbar .nav-link:focus { color: #fff; background: rgba(118, 36, 206, .16); }
.site-main { min-height: calc(100vh - 154px); padding-block: clamp(2rem, 5vw, 4rem); }
.minimal-shell .site-main { min-height: 100vh; padding-block: clamp(1.5rem, 5vw, 4rem); }
.site-footer { color: #777b89; border-top: 1px solid var(--gizmo-border); padding: 1.4rem 0; font-size: .85rem; }

.btn { border-radius: .55rem; font-weight: 600; padding: .68rem 1.15rem; }
.btn-primary { color: #fff; border-color: #8834e3; background: linear-gradient(135deg, #6320ab, #8a2cde); box-shadow: 0 10px 30px rgba(111, 36, 198, .2); }
.btn-primary:hover, .btn-primary:focus { color: #fff; border-color: #a74eff; background: linear-gradient(135deg, #7624ce, #9c3eeb); }
.btn-ghost, .btn-outline-secondary { color: #d6d7dd; border: 1px solid var(--gizmo-border); background: rgba(255,255,255,.025); }
.btn-ghost:hover, .btn-outline-secondary:hover { color: #fff; border-color: rgba(169,76,255,.5); background: rgba(118,36,206,.12); }
.btn:focus-visible, .form-control:focus, .form-select:focus { box-shadow: 0 0 0 .2rem rgba(169,76,255,.22); border-color: var(--gizmo-purple-bright); }

.hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(320px, .95fr); align-items: center; gap: clamp(2rem, 5vw, 5rem); padding: clamp(1rem, 5vw, 5rem) 0; }
.hero-copy { max-width: 720px; }
.eyebrow { color: #c58aff; text-transform: uppercase; letter-spacing: .16em; font-size: .78rem; font-weight: 700; }
.hero h1 { margin: .8rem 0 1.2rem; font-size: clamp(2.7rem, 6vw, 5.5rem); line-height: .96; letter-spacing: -.055em; font-weight: 780; }
.hero h1 span { color: transparent; background: linear-gradient(120deg, #fff 15%, #af75e7 65%, #7926ce); background-clip: text; }
.hero .lead { max-width: 640px; color: #a7a9b4; font-size: clamp(1.05rem, 2vw, 1.25rem); line-height: 1.65; }
.hero-logo { position: relative; display: grid; place-items: center; min-height: 430px; }
.hero-logo::before { content:""; position:absolute; width: 72%; aspect-ratio: 1; border-radius:50%; background:rgba(118,36,206,.28); filter:blur(70px); }
.hero-logo img { position: relative; width: min(100%, 610px); filter: drop-shadow(0 35px 45px rgba(0,0,0,.7)); }
.hero-actions { display:flex; flex-wrap:wrap; gap:.8rem; margin-top: 2rem; }
.entry-screen { min-height: calc(100vh - 250px); display:grid; place-content:center; justify-items:center; gap:1.5rem; }
.entry-screen > img { width:min(680px, 92vw); filter:drop-shadow(0 35px 55px rgba(0,0,0,.72)); }
.entry-actions { display:flex; flex-wrap:wrap; justify-content:center; gap:.8rem; }
.entry-actions .btn { min-width:190px; }
.feature-strip { display:grid; grid-template-columns: repeat(4, 1fr); border:1px solid var(--gizmo-border); border-radius: .9rem; overflow:hidden; background:rgba(18,19,26,.74); }
.feature { padding: 1.35rem; border-right:1px solid var(--gizmo-border); }
.feature:last-child { border-right:0; }
.feature strong { display:block; margin-bottom:.25rem; }
.feature span { color:var(--gizmo-muted); font-size:.82rem; }
.feature-icon { color:#b461ff; font-size:1.35rem; margin-bottom:.55rem; }

.auth-wrap { display:grid; grid-template-columns:minmax(300px, 460px); justify-content:center; padding: clamp(1rem, 4vw, 3.5rem) 0; }
.auth-card, .content-card { border:1px solid var(--gizmo-border); border-radius:1rem; background:linear-gradient(145deg, rgba(24,25,34,.96), rgba(14,15,21,.96)); box-shadow:0 30px 80px rgba(0,0,0,.42); }
.auth-card { padding: clamp(1.35rem, 4vw, 2.3rem); }
.auth-logo { display:block; width:210px; height:125px; object-fit:contain; margin: -1rem auto .5rem; }
.auth-card h1 { font-size:1.55rem; text-align:center; margin-bottom:.6rem; }
.auth-subtitle { color:var(--gizmo-muted); text-align:center; font-size:.92rem; margin-bottom:1.6rem; }
.form-label { color:#c6c8d1; font-size:.85rem; }
.form-control, .form-select { color:#f3f3f6; border:1px solid #30323d; background:#0d0e13; border-radius:.5rem; min-height:46px; }
.form-control:focus, .form-select:focus { color:#fff; background:#0d0e13; }
.form-control::placeholder { color:#60636f; }
.text-muted { color: var(--gizmo-muted) !important; }
.text-danger { color:#ff6978 !important; }
.alert { border-radius:.65rem; border:1px solid transparent; }
.alert-success { color:#adf4ca; border-color:rgba(47,210,121,.25); background:rgba(47,210,121,.08); }
.alert-info { color:#d8bcf2; border-color:rgba(169,76,255,.25); background:rgba(118,36,206,.10); }

.page-heading { display:flex; justify-content:space-between; align-items:end; gap:1rem; margin-bottom:1.6rem; }
.page-heading h1 { margin:0; font-size:clamp(1.8rem,3vw,2.5rem); }
.page-heading p { margin:.45rem 0 0; color:var(--gizmo-muted); }
.content-card { padding:1.25rem; }
.table { --bs-table-color:#d9dae1; --bs-table-bg:transparent; --bs-table-border-color:var(--gizmo-border); margin:0; }
.table thead th { color:#858895; text-transform:uppercase; letter-spacing:.08em; font-size:.7rem; font-weight:700; }
.status-dot { display:inline-block; width:.48rem; height:.48rem; border-radius:50%; background:var(--gizmo-green); box-shadow:0 0 12px rgba(47,210,121,.8); margin-right:.45rem; }

@media (max-width: 991px) {
  .hero { grid-template-columns:1fr; text-align:center; }
  .hero-copy, .hero .lead { margin-inline:auto; }
  .hero-actions { justify-content:center; }
  .hero-logo { min-height:310px; order:-1; }
  .hero-logo img { max-width:480px; }
  .feature-strip { grid-template-columns:1fr 1fr; }
  .feature:nth-child(2) { border-right:0; }
  .feature:nth-child(-n+2) { border-bottom:1px solid var(--gizmo-border); }
  .navbar-nav { padding:1rem 0; }
}
@media (max-width: 575px) {
  .feature-strip { grid-template-columns:1fr; }
  .feature { border-right:0; border-bottom:1px solid var(--gizmo-border); }
  .feature:last-child { border-bottom:0; }
  .hero h1 { font-size:2.65rem; }
  .site-footer .site-container { display:block !important; }
}
