:root{
      --bg:#0b0b12;
      --card:#121225;
      --text:#f5f5ff;
      --muted:#b9b9d6;
      --accent:#ff2d7a;
      --accent2:#a855f7;
      --border: rgba(255,255,255,.12);
      --shadow: 0 20px 60px rgba(0,0,0,.45);
    }

    *{box-sizing:border-box}
    body{
      margin:0;
      min-height:100vh;
      font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      background:
        radial-gradient(1200px 800px at 20% 20%, rgba(255,45,122,.22), transparent 55%),
        radial-gradient(900px 700px at 85% 25%, rgba(168,85,247,.20), transparent 55%),
        radial-gradient(800px 600px at 45% 85%, rgba(255,255,255,.06), transparent 55%),
        var(--bg);
      color:var(--text);
      display:flex;
      align-items:center;
      justify-content:center;
      padding:24px;
    }

    .wrap{
      width:min(980px, 100%);
      display:grid;
      gap:18px;
      grid-template-columns: 1.1fr .9fr;
      align-items:stretch;
    }

    @media (max-width: 900px){
      .wrap{grid-template-columns:1fr}
    }

    .card{
      background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
      border:1px solid var(--border);
      border-radius:22px;
      box-shadow: var(--shadow);
      padding:28px;
      position:relative;
      overflow:hidden;
    }

    .badge{
      display:inline-flex;
      align-items:center;
      gap:10px;
      padding:8px 12px;
      border-radius:999px;
      border:1px solid var(--border);
      color:var(--muted);
      font-size:14px;
      background: rgba(255,255,255,.04);
    }

    .dot{
      width:10px;height:10px;border-radius:50%;
      background: linear-gradient(90deg, var(--accent), var(--accent2));
      box-shadow: 0 0 18px rgba(255,45,122,.55);
    }

    h1{
      margin:14px 0 10px;
      font-size: clamp(34px, 4vw, 54px);
      line-height:1.05;
      letter-spacing:-0.02em;
    }

    p{
      margin:0 0 14px;
      color: var(--muted);
      font-size:16px;
      line-height:1.6;
    }

    .big404{
      font-size: clamp(66px, 9vw, 120px);
      font-weight:800;
      line-height:1;
      margin: 14px 0 8px;
      background: linear-gradient(90deg, var(--accent), var(--accent2));
      -webkit-background-clip:text;
      background-clip:text;
      color:transparent;
      text-shadow: 0 0 40px rgba(255,45,122,.20);
    }

    .actions{
      display:flex;
      flex-wrap:wrap;
      gap:12px;
      margin-top:18px;
    }

    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:10px;
      padding:12px 16px;
      border-radius:14px;
      border:1px solid var(--border);
      text-decoration:none;
      font-weight:600;
      transition: transform .08s ease, background .2s ease, border-color .2s ease;
      user-select:none;
    }

    .btn:active{ transform: translateY(1px); }

    .btn-primary{
      background: linear-gradient(90deg, rgba(255,45,122,.95), rgba(168,85,247,.95));
      color: white;
      border-color: rgba(255,255,255,.18);
    }
    .btn-primary:hover{ background: linear-gradient(90deg, rgba(255,45,122,1), rgba(168,85,247,1)); }

    .btn-ghost{
      background: rgba(255,255,255,.04);
      color: var(--text);
    }
    .btn-ghost:hover{ background: rgba(255,255,255,.07); }

    .list{
      margin: 14px 0 0;
      padding: 0;
      list-style:none;
      display:grid;
      gap:10px;
    }

    .linkrow{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      padding:12px 14px;
      border-radius:16px;
      border:1px solid var(--border);
      background: rgba(0,0,0,.12);
      text-decoration:none;
      color:var(--text);
      transition: background .2s ease, border-color .2s ease;
    }
    .linkrow:hover{
      background: rgba(255,255,255,.06);
      border-color: rgba(255,255,255,.20);
    }

    .small{
      color: var(--muted);
      font-size:13px;
    }

    .arrow{
      opacity:.9;
      font-weight:800;
      background: linear-gradient(90deg, var(--accent), var(--accent2));
      -webkit-background-clip:text;
      background-clip:text;
      color:transparent;
    }

    .search{
      display:flex;
      gap:10px;
      margin-top:14px;
    }

    input[type="search"]{
      flex:1;
      padding:12px 14px;
      border-radius:14px;
      border:1px solid var(--border);
      background: rgba(255,255,255,.04);
      color: var(--text);
      outline:none;
    }
    input[type="search"]::placeholder{ color: rgba(185,185,214,.75); }

    .hint{
      margin-top:10px;
      color: rgba(185,185,214,.85);
      font-size:13px;
    }

    .glow{
      position:absolute;
      inset:auto -80px -120px auto;
      width:280px;height:280px;
      background: radial-gradient(circle, rgba(255,45,122,.28), transparent 65%);
      filter: blur(2px);
      pointer-events:none;
    }