:root{
  --bg0:#050814; --bg1:#070b18;
  --text:#eaf0ff; --muted:rgba(234,240,255,.70);
  --a:#64ffda; --b:#8b5cf6; --c:#60a5fa;
  --glass: rgba(255,255,255,.06); --glass2: rgba(255,255,255,.03);
  --stroke: rgba(255,255,255,.12);
  --r:22px;
  --shadow: 0 30px 90px rgba(0,0,0,.60);
}
*{box-sizing:border-box}
body{
  margin:0; min-height:100vh; color:var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans";
  background:
    radial-gradient(1400px 800px at 15% 10%, rgba(100,255,218,.12), transparent 55%),
    radial-gradient(900px 650px at 85% 20%, rgba(139,92,246,.16), transparent 55%),
    radial-gradient(900px 700px at 50% 110%, rgba(96,165,250,.12), transparent 55%),
    linear-gradient(135deg, var(--bg0), var(--bg1));
  overflow-x:hidden;
}
.stars,.stars:before,.stars:after{
  position:fixed; inset:0; content:""; pointer-events:none;
  background-repeat:repeat; background-size: 900px 900px;
  opacity:.55; mix-blend-mode:screen; animation: drift 55s linear infinite;
  filter: drop-shadow(0 0 6px rgba(255,255,255,.18));
}
.stars{
  background-image:
    radial-gradient(2px 2px at 20px 30px, rgba(255,255,255,.60), transparent 50%),
    radial-gradient(1px 1px at 120px 90px, rgba(255,255,255,.50), transparent 50%),
    radial-gradient(1px 1px at 240px 180px, rgba(255,255,255,.45), transparent 50%),
    radial-gradient(1px 1px at 420px 260px, rgba(255,255,255,.55), transparent 50%),
    radial-gradient(2px 2px at 560px 420px, rgba(255,255,255,.40), transparent 50%),
    radial-gradient(1px 1px at 760px 520px, rgba(255,255,255,.48), transparent 50%),
    radial-gradient(1px 1px at 860px 120px, rgba(255,255,255,.35), transparent 50%);
}
.stars:before{
  background-image:
    radial-gradient(1px 1px at 60px 80px, rgba(100,255,218,.35), transparent 50%),
    radial-gradient(2px 2px at 300px 420px, rgba(139,92,246,.30), transparent 55%),
    radial-gradient(1px 1px at 650px 210px, rgba(96,165,250,.35), transparent 55%),
    radial-gradient(1px 1px at 820px 620px, rgba(255,255,255,.30), transparent 55%);
  opacity:.45; animation-duration: 75s; filter: blur(.2px);
}
.stars:after{
  background-image:
    radial-gradient(120px 120px at 20% 30%, rgba(100,255,218,.08), transparent 60%),
    radial-gradient(180px 180px at 80% 20%, rgba(139,92,246,.10), transparent 60%),
    radial-gradient(160px 160px at 55% 80%, rgba(96,165,250,.08), transparent 60%);
  opacity:.75; animation-duration: 95s; filter: blur(12px);
}
@keyframes drift{ from{transform:translate3d(0,0,0)} to{transform:translate3d(-140px,140px,0)} }
.container{ width:min(1050px, 92vw); margin: 0 auto; padding: 28px 0 52px; position:relative; z-index:2; }
.header{
  display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap;
  padding: 18px 18px; border-radius: 18px;
  background: linear-gradient(180deg, var(--glass), var(--glass2));
  border: 1px solid var(--stroke);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 14px 60px rgba(0,0,0,.30);
}
.brand{ display:flex; align-items:center; gap:12px; }
.logo{
  width:40px; height:40px; border-radius: 14px;
  background: conic-gradient(from 180deg, rgba(100,255,218,.9), rgba(139,92,246,.8), rgba(96,165,250,.85), rgba(100,255,218,.9));
  box-shadow: 0 0 40px rgba(100,255,218,.18);
}
h1{ margin:0; font-size:1.15rem; letter-spacing:.2px; }
.sub{ color:var(--muted); font-size:.92rem; margin-top:2px; }
.search{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.input, select, textarea{
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  color: rgba(234,240,255,.92);
  outline:none;
}
textarea{ width:100%; min-height: 160px; resize: vertical; }
.input::placeholder{ color: rgba(234,240,255,.45); }
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding: 10px 14px; border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  color: rgba(234,240,255,.92);
  text-decoration:none;
  cursor:pointer;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.06); border-color: rgba(100,255,218,.35); }
.btn.primary{ background: linear-gradient(90deg, rgba(100,255,218,.18), rgba(139,92,246,.18), rgba(96,165,250,.18)); }
.btn.danger{ border-color: rgba(255,120,120,.25); }
.btn.danger:hover{ border-color: rgba(255,120,120,.55); }
.grid{ margin-top: 18px; display:grid; grid-template-columns: repeat(12, 1fr); gap: 16px; }
.card{
  grid-column: span 4;
  border-radius: 20px;
  background: linear-gradient(180deg, var(--glass), var(--glass2));
  border: 1px solid var(--stroke);
  box-shadow: 0 20px 70px rgba(0,0,0,.38);
  overflow:hidden;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  text-decoration:none;
  color:inherit;
}
.thumb{ height: 180px; background: rgba(255,255,255,.04); border-bottom: 1px solid rgba(255,255,255,.08); }
.thumb img{ width:100%; height:100%; object-fit:cover; display:block; filter:saturate(1.1) contrast(1.05); }
.body{ padding: 14px 14px 16px; }
.title{
  margin:0;
  font-size: 1.05rem;
  line-height:1.2;
  background: linear-gradient(90deg, rgba(234,240,255,.95), rgba(100,255,218,.92), rgba(139,92,246,.92));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.desc{ color:rgba(234,240,255,.82); margin:8px 0 0; font-size:.95rem; line-height:1.55; }
.meta{ margin-top:10px; display:flex; gap:10px; flex-wrap:wrap; color:var(--muted); font-size:.86rem; }
.pill{ padding:6px 10px; border-radius: 999px; border:1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04); }
.panel{
  margin-top:18px;
  border-radius: 20px;
  background: linear-gradient(180deg, var(--glass), var(--glass2));
  border: 1px solid var(--stroke);
  box-shadow: 0 20px 70px rgba(0,0,0,.38);
  padding: 16px;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.row{ display:grid; grid-template-columns: repeat(12, 1fr); gap: 12px; }
.col6{ grid-column: span 6; } .col4{ grid-column: span 4; } .col12{ grid-column: span 12; }
label{ display:block; margin: 10px 0 6px; color: var(--muted); font-size:.9rem; }
pre{
  margin:0; white-space:pre-wrap;
  color: rgba(234,240,255,.86);
  line-height:1.7;
  background: rgba(255,255,255,.03);
  padding:12px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.10);
}
.small{ color: var(--muted); font-size:.92rem; line-height:1.6; }
@media (max-width: 980px){ .card{ grid-column: span 6; } }
@media (max-width: 640px){ .card{ grid-column: span 12; } }