| 1 |
.bkbg-nbc-app{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;box-sizing:border-box} |
| 2 |
.bkbg-nbc-app *{box-sizing:inherit} |
| 3 |
.bkbg-nbc-wrap{background:#fff;border-radius:16px;padding:36px 32px;max-width:560px;margin:0 auto;box-shadow:0 4px 24px rgba(0,0,0,.09)} |
| 4 |
.bkbg-nbc-header{margin-bottom:22px} |
| 5 |
.bkbg-nbc-title{ |
| 6 |
font-family:var(--bkbg-nbc-tt-font-family,inherit); |
| 7 |
font-size:var(--bkbg-nbc-tt-font-size-d,28px); |
| 8 |
font-weight:var(--bkbg-nbc-tt-font-weight,700); |
| 9 |
font-style:var(--bkbg-nbc-tt-font-style,normal); |
| 10 |
text-decoration:var(--bkbg-nbc-tt-text-decoration,none); |
| 11 |
text-transform:var(--bkbg-nbc-tt-text-transform,none); |
| 12 |
line-height:var(--bkbg-nbc-tt-line-height-d,1.2); |
| 13 |
letter-spacing:var(--bkbg-nbc-tt-letter-spacing-d,normal); |
| 14 |
word-spacing:var(--bkbg-nbc-tt-word-spacing-d,normal); |
| 15 |
color:#111827;margin:0 0 6px |
| 16 |
} |
| 17 |
.bkbg-nbc-subtitle{ |
| 18 |
font-family:var(--bkbg-nbc-st-font-family,inherit); |
| 19 |
font-size:var(--bkbg-nbc-st-font-size-d,15px); |
| 20 |
font-weight:var(--bkbg-nbc-st-font-weight,400); |
| 21 |
font-style:var(--bkbg-nbc-st-font-style,normal); |
| 22 |
text-decoration:var(--bkbg-nbc-st-text-decoration,none); |
| 23 |
text-transform:var(--bkbg-nbc-st-text-transform,none); |
| 24 |
line-height:var(--bkbg-nbc-st-line-height-d,1.5); |
| 25 |
letter-spacing:var(--bkbg-nbc-st-letter-spacing-d,normal); |
| 26 |
word-spacing:var(--bkbg-nbc-st-word-spacing-d,normal); |
| 27 |
color:#6b7280;margin:0 |
| 28 |
} |
| 29 |
.bkbg-nbc-row{display:flex;align-items:center;border-radius:8px;overflow:hidden;border:1.5px solid #e5e7eb;background:#f3f4f6;margin-bottom:8px;transition:box-shadow .15s} |
| 30 |
.bkbg-nbc-row:focus-within{box-shadow:0 0 0 3px rgba(108,63,181,.15)} |
| 31 |
.bkbg-nbc-badge{display:flex;align-items:center;justify-content:center;flex-direction:column;min-width:82px;height:52px;flex-shrink:0} |
| 32 |
.bkbg-nbc-badge-hint{font-size:10px;font-weight:700;opacity:.85;text-transform:uppercase;letter-spacing:.06em} |
| 33 |
.bkbg-nbc-badge-name{font-size:13px;font-weight:800} |
| 34 |
.bkbg-nbc-input{flex:1;border:none;border-left:1.5px solid rgba(255,255,255,.25);background:#fff;padding:0 12px;font-family:monospace;font-size:18px;height:52px;outline:none;width:1px;min-width:0;color:#111827} |
| 35 |
.bkbg-nbc-copy{border:none;padding:0 12px;cursor:pointer;font-size:12px;font-weight:700;height:52px;flex-shrink:0;background:transparent;transition:opacity .15s} |
| 36 |
.bkbg-nbc-copy:hover{opacity:.75} |
| 37 |
.bkbg-nbc-copy:active{opacity:.5} |
| 38 |
.bkbg-nbc-bits{margin-top:16px;background:#f3f4f6;border:1px solid #e5e7eb;border-radius:10px;padding:14px 16px} |
| 39 |
.bkbg-nbc-bits-title{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:#374151;margin-bottom:10px} |
| 40 |
.bkbg-nbc-bit-row{display:flex;align-items:flex-start;gap:10px;margin-bottom:5px;font-family:monospace;font-size:13px} |
| 41 |
.bkbg-nbc-bit-lbl{font-weight:700;color:#374151;min-width:42px;flex-shrink:0} |
| 42 |
.bkbg-nbc-bit-val{color:#111827;word-break:break-all;line-height:1.5} |
| 43 |
.bkbg-nbc-toast{position:fixed;bottom:24px;right:24px;background:#111827;color:#fff;padding:8px 16px;border-radius:8px;font-size:13px;font-weight:600;opacity:0;transition:opacity .2s;pointer-events:none;z-index:9999} |
| 44 |
.bkbg-nbc-toast.show{opacity:1} |
| 45 |
|
| 46 |
@media(max-width:1024px){ |
| 47 |
.bkbg-nbc-title{font-size:var(--bkbg-nbc-tt-font-size-t,var(--bkbg-nbc-tt-font-size-d,28px));line-height:var(--bkbg-nbc-tt-line-height-t,var(--bkbg-nbc-tt-line-height-d,1.2));letter-spacing:var(--bkbg-nbc-tt-letter-spacing-t,var(--bkbg-nbc-tt-letter-spacing-d,normal));word-spacing:var(--bkbg-nbc-tt-word-spacing-t,var(--bkbg-nbc-tt-word-spacing-d,normal))} |
| 48 |
.bkbg-nbc-subtitle{font-size:var(--bkbg-nbc-st-font-size-t,var(--bkbg-nbc-st-font-size-d,15px));line-height:var(--bkbg-nbc-st-line-height-t,var(--bkbg-nbc-st-line-height-d,1.5));letter-spacing:var(--bkbg-nbc-st-letter-spacing-t,var(--bkbg-nbc-st-letter-spacing-d,normal));word-spacing:var(--bkbg-nbc-st-word-spacing-t,var(--bkbg-nbc-st-word-spacing-d,normal))} |
| 49 |
} |
| 50 |
@media(max-width:767px){ |
| 51 |
.bkbg-nbc-title{font-size:var(--bkbg-nbc-tt-font-size-m,var(--bkbg-nbc-tt-font-size-d,24px));line-height:var(--bkbg-nbc-tt-line-height-m,var(--bkbg-nbc-tt-line-height-d,1.2));letter-spacing:var(--bkbg-nbc-tt-letter-spacing-m,var(--bkbg-nbc-tt-letter-spacing-d,normal));word-spacing:var(--bkbg-nbc-tt-word-spacing-m,var(--bkbg-nbc-tt-word-spacing-d,normal))} |
| 52 |
.bkbg-nbc-subtitle{font-size:var(--bkbg-nbc-st-font-size-m,var(--bkbg-nbc-st-font-size-d,14px));line-height:var(--bkbg-nbc-st-line-height-m,var(--bkbg-nbc-st-line-height-d,1.5));letter-spacing:var(--bkbg-nbc-st-letter-spacing-m,var(--bkbg-nbc-st-letter-spacing-d,normal));word-spacing:var(--bkbg-nbc-st-word-spacing-m,var(--bkbg-nbc-st-word-spacing-d,normal))} |
| 53 |
} |
| 54 |
@media(max-width:480px){ |
| 55 |
.bkbg-nbc-wrap{padding:22px 14px} |
| 56 |
.bkbg-nbc-badge{min-width:60px} |
| 57 |
.bkbg-nbc-input{font-size:15px} |
| 58 |
} |
| 59 |
|
