/* Prince Bot Library: bot cards */
.tsbx { --gold: #ffc83d; --gold2: #b8860b; padding: 18px 14px 28px; max-width: 1280px; margin: 0 auto; box-sizing: border-box; }
.tsbx__intro { text-align: center; margin: 4px auto 22px; max-width: 560px; }
.tsbx__eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; font-size: 10px; font-weight: 800; letter-spacing: .24em; text-transform: uppercase; color: #8a5a00; background: linear-gradient(135deg, #fff3c9, #ffe08a); border: 1px solid rgba(184,134,11,.5); }
.tsbx__eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #1fb56b; box-shadow: 0 0 0 3px rgba(31,181,107,.25); }
.tsbx__title { margin: 12px 0 6px; font-size: 24px; line-height: 1.15; font-weight: 900; letter-spacing: -.01em; color: #0a1d46; text-wrap: balance; }
.tsbx__sub { margin: 0; font-size: 13.5px; line-height: 1.5; color: #53638a; }
body.theme--dark .tsbx__title { color: #fff; } body.theme--dark .tsbx__sub { color: #9fb0d4; }
.tsbx__grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 760px) { .tsbx__grid { grid-template-columns: repeat(2, 1fr); gap: 18px; } .tsbx__title { font-size: 30px; } }
@media (min-width: 1180px) { .tsbx__grid { grid-template-columns: repeat(3, 1fr); } }

.tsbx-card { --a: #3d8bff; --a2: #1258e0; --edge: linear-gradient(135deg, #7ab4ff, #1258e0 55%, #7ab4ff);
    position: relative; display: flex; flex-direction: column; gap: 12px; padding: 18px 16px 16px; border-radius: 20px; color: #e8f0ff; overflow: hidden; isolation: isolate;
    border: 1.5px solid transparent;
    background: radial-gradient(120% 70% at 100% -10%, color-mix(in srgb, var(--a) 28%, transparent), transparent 60%) padding-box, linear-gradient(160deg, #10285c 0%, #0a1b42 55%, #071331 100%) padding-box, var(--edge) border-box;
    box-shadow: 0 18px 34px -22px rgba(6,22,70,.8), 0 0 0 1px rgba(255,255,255,.03) inset; animation: tsbxIn .5s both cubic-bezier(.2,.8,.2,1); transition: transform .25s, box-shadow .25s; }
.tsbx-card:hover { transform: translateY(-3px); box-shadow: 0 26px 44px -20px rgba(6,22,70,.9), 0 0 24px -6px color-mix(in srgb, var(--a) 60%, transparent); }
.tsbx-card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(115deg, transparent 38%, rgba(255,255,255,.07) 48%, transparent 58%); background-size: 250% 100%; background-position: 120% 0; transition: background-position .9s; pointer-events: none; }
.tsbx-card:hover::after { background-position: -40% 0; }
.tsbx-card--premium { --a: #ffc83d; --a2: #b8860b; --edge: linear-gradient(130deg, #fff3c0, #ffc83d 25%, #b8860b 50%, #ffe08a 75%, #fff3c0); }
.tsbx-card--free { --a: #22c97a; --a2: #0f8f52; --edge: linear-gradient(135deg, #8bf0bf, #22c97a 55%, #8bf0bf); }
.tsbx-card.is-pinned { box-shadow: 0 0 0 2px rgba(255,255,255,.25), 0 18px 34px -22px rgba(6,22,70,.8); }

.tsbx-card__top { display: flex; align-items: center; gap: 12px; }
.tsbx-card__emblem { flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; color: #07163a;
    background: linear-gradient(145deg, color-mix(in srgb, var(--a) 70%, #fff), var(--a) 55%, var(--a2)); box-shadow: 0 10px 20px -8px var(--a), inset 0 2px 0 rgba(255,255,255,.55); }
.tsbx-card--quick .tsbx-card__emblem { color: #fff; }
.tsbx-card__id { flex: 1; min-width: 0; }
.tsbx-card__kind { display: block; font-size: 9.5px; font-weight: 800; letter-spacing: .26em; text-transform: uppercase; color: var(--a); margin-bottom: 3px; }
.tsbx-card__name { margin: 0; font-size: 19px; line-height: 1.15; font-weight: 900; letter-spacing: -.01em; color: #fff; overflow-wrap: anywhere; }
.tsbx-card__stars { color: #ffc83d; font-size: 13px; letter-spacing: 1px; vertical-align: 2px; }
.tsbx-card__pin { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; cursor: pointer; color: #b8c8ee; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16); transition: all .2s; }
.tsbx-card__pin:hover { color: #fff; background: rgba(255,255,255,.14); }
.tsbx-card__pin[aria-pressed="true"] { color: #07163a; background: linear-gradient(135deg, #ffe08a, #ffc83d); border-color: transparent; transform: rotate(-12deg); }

.tsbx-card__chips { display: flex; flex-wrap: wrap; gap: 7px; }
.tsbx-chip { font-size: 10.5px; font-weight: 800; letter-spacing: .06em; padding: 5px 10px; border-radius: 999px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); color: #d4e0fa; }
.tsbx-chip--t { color: #fff; background: color-mix(in srgb, var(--a) 22%, transparent); border-color: color-mix(in srgb, var(--a) 55%, transparent); }
.tsbx-chip--b { margin-left: auto; text-transform: uppercase; letter-spacing: .14em; font-size: 9.5px; color: #07163a; border: 0; background: linear-gradient(135deg, color-mix(in srgb, var(--a) 60%, #fff), var(--a)); }

.tsbx-card__desc { margin: 0; font-size: 13.5px; line-height: 1.55; color: #b4c4e8; }
.tsbx-card__feats { list-style: none; margin: 0; padding: 12px 0 0; display: grid; gap: 8px; border-top: 1px dashed rgba(255,255,255,.18); }
.tsbx-card__feats li { display: flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 700; color: #eaf1ff; }
.tsbx-card__feats i { flex: none; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; color: #07163a; background: var(--a); }

.tsbx-card__btn { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; box-sizing: border-box; height: 50px; padding: 0 8px 0 18px; border: 0; border-radius: 14px; cursor: pointer; color: #07163a;
    font-family: inherit; font-size: 13.5px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; background: linear-gradient(135deg, color-mix(in srgb, var(--a) 55%, #fff), var(--a) 60%, var(--a2));
    box-shadow: 0 12px 22px -12px var(--a), inset 0 1px 0 rgba(255,255,255,.6); transition: transform .15s, filter .2s; -webkit-tap-highlight-color: transparent; }
.tsbx-card--quick .tsbx-card__btn { color: #fff; }
.tsbx-card__btn:hover:not(:disabled) { filter: brightness(1.07); } .tsbx-card__btn:active:not(:disabled) { transform: scale(.985); }
.tsbx-card__btn:disabled { opacity: .75; cursor: progress; }
.tsbx-card__btn-i { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; background: rgba(7,22,58,.22); transition: transform .2s; }
.tsbx-card--quick .tsbx-card__btn-i { background: rgba(255,255,255,.2); }
.tsbx-card__btn:hover:not(:disabled) .tsbx-card__btn-i { transform: translateX(3px); }
.tsbx-card :focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@keyframes tsbxIn { from { opacity: 0; transform: translateY(14px); } }
@media (prefers-reduced-motion: reduce) { .tsbx-card, .tsbx-card::after { animation: none; transition: none; } }
.tsbx-chip { line-height: 1.25; display: inline-flex; align-items: center; }
.tsbx-card__stars { display: inline-block; white-space: nowrap; font-size: 11px; letter-spacing: 0; }