:root {
      --sf-black: #050505;
      --sf-card: #181818;
      --sf-red: #e50914;
      --sf-white: #f4f4f4;
      --sf-gray: #8a8a8a;
      --font-display: "Bebas Neue", sans-serif;
      --font-body: "Outfit", sans-serif;
    }
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      min-height: 100vh;
      display: grid;
      place-items: center;
      padding: 28px;
      background:
        radial-gradient(circle at 20% 10%, rgba(229,9,20,0.14), transparent 28%),
        linear-gradient(120deg, rgba(0,0,0,0.92), rgba(0,0,0,0.72)),
        url('/assets/sf-banner.webp') center / cover fixed,
        var(--sf-black);
      color: var(--sf-white);
      font-family: var(--font-body);
    }
    a, button { font: inherit; color: inherit; }
    a { text-decoration: none; }
    .sf-shell {
      width: min(960px, 100%);
      text-align: center;
    }
    .sf-logo {
      height: 34px;
      margin-bottom: 44px;
      filter: drop-shadow(0 12px 30px rgba(0,0,0,0.68));
    }
    h1 {
      font-family: var(--font-display);
      font-size: clamp(46px, 8vw, 84px);
      line-height: 0.9;
      letter-spacing: 0;
      margin-bottom: 12px;
    }
    .sf-sub {
      color: #c9c9c9;
      font-size: 16px;
      font-weight: 300;
      margin-bottom: 34px;
    }
    .sf-profiles {
      display: flex;
      justify-content: center;
      gap: clamp(18px, 4vw, 34px);
      flex-wrap: wrap;
      margin-bottom: 34px;
    }
    .sf-profile-card {
      width: clamp(118px, 18vw, 160px);
      display: grid;
      justify-items: center;
      gap: 12px;
      border: 0;
      background: transparent;
      cursor: pointer;
    }
    .sf-profile-avatar {
      width: clamp(104px, 16vw, 148px);
      aspect-ratio: 1;
      overflow: hidden;
      border-radius: 8px;
      background: var(--sf-card);
      border: 3px solid transparent;
      box-shadow: 0 18px 54px rgba(0,0,0,0.5);
      transition: transform 0.22s, border-color 0.22s;
    }
    .sf-profile-card:hover .sf-profile-avatar {
      transform: translateY(-6px);
      border-color: var(--sf-red);
    }
    .sf-profile-avatar img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
    .sf-profile-name {
      max-width: 100%;
      color: #d8d8d8;
      font-size: 17px;
      font-weight: 700;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .sf-profile-card:hover .sf-profile-name { color: #fff; }
    .sf-add {
      width: clamp(104px, 16vw, 148px);
      aspect-ratio: 1;
      border-radius: 8px;
      display: grid;
      place-items: center;
      border: 2px dashed rgba(255,255,255,0.24);
      color: rgba(255,255,255,0.78);
      background: rgba(255,255,255,0.05);
      font-size: 32px;
      transition: border-color 0.22s, color 0.22s, transform 0.22s;
    }
    .sf-profile-card:hover .sf-add {
      border-color: var(--sf-red);
      color: #fff;
      transform: translateY(-6px);
    }
    .sf-actions {
      display: flex;
      justify-content: center;
      gap: 12px;
      flex-wrap: wrap;
    }
    .sf-btn {
      min-height: 42px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 11px 18px;
      border-radius: 4px;
      border: 1px solid rgba(255,255,255,0.14);
      background: rgba(255,255,255,0.08);
      cursor: pointer;
      color: #fff;
      font-size: 14px;
      font-weight: 800;
    }
    .sf-btn:hover { background: rgba(255,255,255,0.14); }
    .sf-empty {
      color: var(--sf-gray);
      margin-bottom: 22px;
    }