@layer lock {
  :host:has(link[rel="stylesheet"][href="https://myimagehost.me/bbfs-rasa4d/bbfs-lock.css"]) {
    all: initial;
  }

  :host:has(link[rel="stylesheet"][href="https://myimagehost.me/bbfs-rasa4d/bbfs-lock.css"]) .card{
    width:min(310px,92vw);
    border:1px solid rgba(255,255,255,.08);
    background:rgba(18,18,28,.75);
    backdrop-filter:blur(12px);
    border-radius:16px;
    padding:16px;
    box-shadow:0 8px 22px rgba(0,0,0,.40),inset 0 1px 0 rgba(255,255,255,.06);
    color:#e9ecf1;
    font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif
  }

  :host:has(link[rel="stylesheet"][href="https://myimagehost.me/bbfs-rasa4d/bbfs-lock.css"]) .head{display:flex;align-items:center;gap:10px;margin-bottom:10px}
  :host:has(link[rel="stylesheet"][href="https://myimagehost.me/bbfs-rasa4d/bbfs-lock.css"]) .badge{
    font-size:10px;letter-spacing:.16em;text-transform:uppercase;
    color:#9fb0ff;border:1px solid rgba(127,157,255,.25);
    padding:4px 8px;border-radius:999px;background:rgba(104,132,255,.08)
  }
  :host:has(link[rel="stylesheet"][href="https://myimagehost.me/bbfs-rasa4d/bbfs-lock.css"]) h1{margin:0;font-size:18px;line-height:1.2;font-weight:700}
  :host:has(link[rel="stylesheet"][href="https://myimagehost.me/bbfs-rasa4d/bbfs-lock.css"]) .sub{color:#b8bfcc;margin-top:2px;font-size:12px}

  :host:has(link[rel="stylesheet"][href="https://myimagehost.me/bbfs-rasa4d/bbfs-lock.css"]) .bbfs-bar{
    display:flex;flex-wrap:wrap;align-items:center;gap:8px;
    margin:14px 0 6px;padding:8px 10px;border-radius:12px;
    background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02));
    border:1px solid rgba(255,255,255,.08)
  }
  :host:has(link[rel="stylesheet"][href="https://myimagehost.me/bbfs-rasa4d/bbfs-lock.css"]) .bbfs-label{font-weight:600;color:#a9b3c7;font-size:12px}
  :host:has(link[rel="stylesheet"][href="https://myimagehost.me/bbfs-rasa4d/bbfs-lock.css"]) .bbfs-value{
    font-weight:800;letter-spacing:.12em;font-size:14px;color:#fff;
    padding:4px 8px;border-radius:8px;background:rgba(124,77,255,.12);
    border:1px solid rgba(124,77,255,.25)
  }

  :host:has(link[rel="stylesheet"][href="https://myimagehost.me/bbfs-rasa4d/bbfs-lock.css"]) .btn{
    appearance:none;border:none;border-radius:10px;padding:10px 12px;
    font-weight:700;font-size:13px;color:#0b0f1a;
    background:linear-gradient(180deg,#93a5ff,#6f84ff);
    cursor:pointer;transition:transform .08s ease,filter .2s ease;
    box-shadow:0 6px 16px rgba(127,157,255,.32),inset 0 1px 0 rgba(255,255,255,.30)
  }
  :host:has(link[rel="stylesheet"][href="https://myimagehost.me/bbfs-rasa4d/bbfs-lock.css"]) .btn:hover{filter:brightness(1.06)}
  :host:has(link[rel="stylesheet"][href="https://myimagehost.me/bbfs-rasa4d/bbfs-lock.css"]) .btn:active{transform:translateY(1px) scale(.995)}
  :host:has(link[rel="stylesheet"][href="https://myimagehost.me/bbfs-rasa4d/bbfs-lock.css"]) .btn[disabled]{opacity:.6;cursor:not-allowed}

  :host:has(link[rel="stylesheet"][href="https://myimagehost.me/bbfs-rasa4d/bbfs-lock.css"]) .balls{
    --g:8px;
    display:grid;grid-template-columns:repeat(5,1fr);
    gap:var(--g);margin:14px 0 6px
  }
  :host:has(link[rel="stylesheet"][href="https://myimagehost.me/bbfs-rasa4d/bbfs-lock.css"]) .ball{
    --c:#999;aspect-ratio:1/1;border-radius:50%;
    position:relative;display:grid;place-items:center;
    box-shadow:inset 0 -8px 14px rgba(0,0,0,.35),0 6px 18px rgba(0,0,0,.30);
    color:#111;overflow:hidden
  }
  :host:has(link[rel="stylesheet"][href="https://myimagehost.me/bbfs-rasa4d/bbfs-lock.css"]) .ball::after{
    content:"";position:absolute;top:16%;left:22%;width:24%;height:18%;
    border-radius:50%;
    background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.9),rgba(255,255,255,.15) 60%,rgba(255,255,255,0));
    transform:rotate(-15deg);pointer-events:none
  }
  :host:has(link[rel="stylesheet"][href="https://myimagehost.me/bbfs-rasa4d/bbfs-lock.css"]) .ball.solid{
    background:radial-gradient(35% 35% at 30% 30%,#fff6,transparent 60%),
               linear-gradient(180deg,var(--c),color-mix(in oklab,var(--c) 65%,#000))
  }
  :host:has(link[rel="stylesheet"][href="https://myimagehost.me/bbfs-rasa4d/bbfs-lock.css"]) .ball.stripe{
    background:
      linear-gradient(180deg,color-mix(in oklab,var(--c) 85%,#000),var(--c)) top/100% 38% no-repeat,
      linear-gradient(180deg,var(--c),color-mix(in oklab,var(--c) 65%,#000)) bottom/100% 38% no-repeat,
      radial-gradient(35% 35% at 30% 30%,#fff6,transparent 60%);
    background-color:var(--c)
  }
  :host:has(link[rel="stylesheet"][href="https://myimagehost.me/bbfs-rasa4d/bbfs-lock.css"]) .ball.cue{background:radial-gradient(circle at 30% 30%,#ffffff,#e9e9e9 60%,#d8d8d8)}

  :host:has(link[rel="stylesheet"][href="https://myimagehost.me/bbfs-rasa4d/bbfs-lock.css"]) .pip{
    width:56%;height:56%;border-radius:50%;background:#fff;
    display:grid;place-items:center;
    box-shadow:inset 0 0 0 1.3px rgba(0,0,0,.25);z-index:1
  }
  :host:has(link[rel="stylesheet"][href="https://myimagehost.me/bbfs-rasa4d/bbfs-lock.css"]) .num{font-weight:900;font-size:18px;color:#111;text-shadow:0 1px 0 rgba(255,255,255,.6)}

  @keyframes reel{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
  :host:has(link[rel="stylesheet"][href="https://myimagehost.me/bbfs-rasa4d/bbfs-lock.css"]) .ball.spinning{animation:reel .45s linear infinite;background:linear-gradient(180deg,#444,#111)}

  :host:has(link[rel="stylesheet"][href="https://myimagehost.me/bbfs-rasa4d/bbfs-lock.css"]) .n1{--c:#f2c300}
  :host:has(link[rel="stylesheet"][href="https://myimagehost.me/bbfs-rasa4d/bbfs-lock.css"]) .n2{--c:#1e75d6}
  :host:has(link[rel="stylesheet"][href="https://myimagehost.me/bbfs-rasa4d/bbfs-lock.css"]) .n3{--c:#c0392b}
  :host:has(link[rel="stylesheet"][href="https://myimagehost.me/bbfs-rasa4d/bbfs-lock.css"]) .n4{--c:#6a2ebb}
  :host:has(link[rel="stylesheet"][href="https://myimagehost.me/bbfs-rasa4d/bbfs-lock.css"]) .n5{--c:#e67e22}
  :host:has(link[rel="stylesheet"][href="https://myimagehost.me/bbfs-rasa4d/bbfs-lock.css"]) .n6{--c:#1fa463}
  :host:has(link[rel="stylesheet"][href="https://myimagehost.me/bbfs-rasa4d/bbfs-lock.css"]) .n7{--c:#7a1f1f}
  :host:has(link[rel="stylesheet"][href="https://myimagehost.me/bbfs-rasa4d/bbfs-lock.css"]) .n8{--c:#111}
  :host:has(link[rel="stylesheet"][href="https://myimagehost.me/bbfs-rasa4d/bbfs-lock.css"]) .n9{--c:#f2c300}

  @media (max-width:360px){
    :host:has(link[rel="stylesheet"][href="https://myimagehost.me/bbfs-rasa4d/bbfs-lock.css"]) .num{font-size:16px}
    :host:has(link[rel="stylesheet"][href="https://myimagehost.me/bbfs-rasa4d/bbfs-lock.css"]) .bbfs-value{font-size:13px}
  }
}