:root{
  --bg:#0b1220; --fg:#eaf0ff; --muted:#aeb7d4; --card:#0f172a; --stroke:#1f2a44;
  --primary:#2563eb; --accent:#00d4ff; --danger:#ef4444; --ok:#22c55e; --warn:#f59e0b;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:ui-sans-serif,system-ui,-apple-system; color:var(--fg);
  background:
    radial-gradient(1200px 700px at 20% -10%, #19315f66, transparent),
    radial-gradient(900px 600px at 120% 0%, #113b7b66, transparent),
    linear-gradient(180deg, #0a0f1e, #0b1220 40%, #0b1220);
  overflow-y:auto;
}
a{color:inherit;text-decoration:none}

.wrap{max-width:1200px; margin:0 auto; padding:20px}

.hero{border:1px solid var(--stroke); background:linear-gradient(180deg, #0e1528cc, #0e1528ee); border-radius:22px; padding:28px; backdrop-filter:blur(6px)}
.hero-head{display:flex; align-items:center; gap:14px; margin-top:12px}
.logo-frame{width:86px;height:86px;border-radius:22px;background:#091122; border:1px solid var(--stroke); display:grid;place-items:center}
.logo-frame.small{width:44px;height:44px;border-radius:10px}
.logo-img{width:70%;height:70%;object-fit:contain;filter:drop-shadow(0 2px 8px #0008)}

.badges{display:flex; gap:8px; flex-wrap:wrap}
.badge{font-size:12px; padding:6px 10px; border-radius:999px; border:1px solid var(--stroke); background:#0e1528}

.card{background:linear-gradient(180deg, #0f172a, #0b1220); border:1px solid var(--stroke); border-radius:18px; padding:16px}
.card.glass{background:linear-gradient(180deg, #0e172dcc, #0a1120cc); backdrop-filter: blur(6px)}
.lift{transition:transform .2s ease, box-shadow .2s ease}
.lift:hover{transform:translateY(-2px); box-shadow:0 12px 26px #0006}

.grid{display:grid; gap:16px}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:900px){ .grid-2{grid-template-columns:1fr} }

.gallery{display:grid; grid-template-columns:repeat(6,1fr); gap:8px}
.ph{aspect-ratio:1/1; background:#111827; border:1px solid var(--stroke); border-radius:14px; position:relative; overflow:hidden}
.shimmer::after{
  content:""; position:absolute; inset:0; background:linear-gradient(110deg, transparent 0%, rgba(255,255,255,.08) 40%, transparent 80%);
  transform:translateX(-100%); animation: shimmer 2.2s infinite;
}
@keyframes shimmer{ 100%{ transform: translateX(100%); } }

.table{width:100%; border-collapse:collapse}
th,td{border-bottom:1px solid var(--stroke); padding:10px; text-align:left}
.small{font-size:12px}
.muted{color:var(--muted)}
.mt12{margin-top:12px}
.scroll{max-height:420px; overflow:auto; border:1px solid var(--stroke); border-radius:12px}

.badge, .btn, .card, .table, .logo-frame{animation: fadeIn .6s ease both}
@keyframes fadeIn{ from{opacity:0; transform:translateY(4px)} to{opacity:1; transform:none} }
@keyframes fadeUp{ from{opacity:.0; transform:translateY(12px)} to{opacity:1; transform:none} }

.btn{padding:10px 12px; border-radius:12px; border:1px solid var(--stroke); background:#111827; color:#e5e7eb; cursor:pointer; text-decoration:none; text-align:center; transition:transform .15s ease, box-shadow .15s ease, background .15s ease}
.btn:hover{transform:translateY(-1px); box-shadow:0 10px 18px #0006}
.btn.primary{background:linear-gradient(180deg,#1f48c7,#2563eb); border-color:#1d4ed8; color:#fff}
.btn.outline{background:transparent}
.btn.danger{background:#1a0f12; border-color:#7f1d1d}
.btn.neon{position:relative}
.btn.neon::after{content:""; position:absolute; inset:-2px; border-radius:14px; box-shadow:0 0 18px rgba(37,99,235,.6), 0 0 4px rgba(0,212,255,.9) inset; pointer-events:none}

.tag{font-size:12px; padding:4px 8px; border-radius:999px; border:1px solid var(--stroke); background:#111827}

.nav{display:flex; gap:8px; margin:14px 0; flex-wrap:wrap}
.tab-btn{padding:10px 12px; border-radius:999px; border:1px solid var(--stroke); background:#0d1323; color:#e5e7eb; cursor:pointer}
.tab-btn.active{background:#2563eb; border-color:#1d4ed8}

.tab{display:none; opacity:0; transform:translateY(6px)}
.tab.in{display:block; animation:fadeUp .3s ease both}

.hdr{align-items:center}
.hdr-left{gap:10px}
.hdr-title{font-weight:700}

.site-footer{margin-top:24px; text-align:center; color:var(--muted); font-size:14px; padding:18px 0; border-top:1px solid var(--stroke)}
.site-footer img{width:64px; height:64px; border-radius:50%; border:1px solid var(--stroke); box-shadow:0 0 10px #0004; margin-bottom:8px}

.toast{position:fixed; right:16px; bottom:16px; background:#0f172a; border:1px solid var(--stroke); color:#eaf0ff; padding:12px 14px; border-radius:12px; box-shadow:0 10px 18px #0008; display:none; z-index:9999}
.toast.show{display:block; animation:fadeIn .25s ease both}
.toast.success{border-color:#14532d}
.toast.danger{border-color:#7f1d1d}
.toast.info{border-color:#1d4ed8}
.toast.warning{border-color:#7c5800}