.tool-widget:has(.bc-app) {
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.bc-app {
    --bc-accent: #38bdf8;
    --bc-accent-strong: #0ea5e9;
    --bc-border: rgba(148, 163, 184, .18);
    --bc-card: rgba(15, 23, 42, .82);
    --bc-muted: #94a3b8;
    width: 100%;
}

.bc-app [hidden] { display: none !important; }

.bc-shell {
    padding: 1.2rem;
    border: 1px solid var(--bc-border);
    border-radius: 20px;
    background:
        radial-gradient(circle at 0 0, rgba(14, 165, 233, .17), transparent 33%),
        radial-gradient(circle at 100% 10%, rgba(139, 92, 246, .1), transparent 30%),
        linear-gradient(155deg, #111827, #080f1d);
    box-shadow: 0 20px 55px rgba(0, 0, 0, .28);
}

.bc-hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
    padding: .4rem .25rem;
}

.bc-kicker {
    margin: 0 0 .35rem;
    color: #7dd3fc;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.bc-hero h2 {
    margin: 0;
    color: #f8fafc;
    font-size: clamp(1.35rem, 3vw, 2rem);
    letter-spacing: -.035em;
}

.bc-hero p:not(.bc-kicker) {
    max-width: 650px;
    margin: .45rem 0 0;
    color: var(--bc-muted);
    font-size: .9rem;
    line-height: 1.55;
}

.bc-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .4rem;
}

.bc-badges span {
    padding: .35rem .65rem;
    border: 1px solid var(--bc-border);
    border-radius: 999px;
    background: rgba(2, 8, 20, .45);
    color: #cbd5e1;
    font-size: .7rem;
    font-weight: 750;
    white-space: nowrap;
}

.bc-workspace {
    display: grid;
    grid-template-columns: minmax(280px, .82fr) minmax(0, 1.18fr);
    gap: 1rem;
    align-items: start;
}

.bc-card {
    padding: 1rem;
    border: 1px solid var(--bc-border);
    border-radius: 16px;
    background: var(--bc-card);
}

.bc-card-head,
.bc-card-head > div {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.bc-card-head {
    justify-content: space-between;
    margin-bottom: .85rem;
}

.bc-card-head h3 {
    margin: 0;
    color: #e2e8f0;
    font-size: .95rem;
}

.bc-step {
    display: grid;
    width: 1.45rem;
    height: 1.45rem;
    place-items: center;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--bc-accent), var(--bc-accent-strong));
    color: #062033;
    font-size: .72rem;
    font-weight: 900;
}

.bc-text-btn {
    border: 0;
    background: transparent;
    color: #7dd3fc;
    font: inherit;
    font-size: .78rem;
    font-weight: 800;
    cursor: pointer;
}

.bc-text-btn:disabled { opacity: .4; cursor: not-allowed; }

.bc-label,
.bc-result > label {
    display: block;
    margin: .55rem 0 .35rem;
    color: #cbd5e1;
    font-size: .78rem;
    font-weight: 750;
}

.bc-input,
.bc-select,
.bc-output {
    box-sizing: border-box;
    width: 100%;
    border: 1px solid var(--bc-border);
    border-radius: 10px;
    outline: 0;
    background: rgba(2, 8, 20, .52);
    color: #f1f5f9;
    font: inherit;
}

.bc-input,
.bc-select { min-height: 43px; padding: .65rem .75rem; }
.bc-mono { font-family: "JetBrains Mono", ui-monospace, Consolas, monospace; }

.bc-input:focus,
.bc-select:focus,
.bc-output:focus,
.bc-text-btn:focus-visible,
.bc-result button:focus-visible {
    border-color: rgba(56, 189, 248, .62);
    box-shadow: 0 0 0 3px rgba(14, 165, 233, .15);
}

.bc-hint {
    margin: .45rem 0 .8rem;
    color: var(--bc-muted);
    font-size: .75rem;
    line-height: 1.5;
}

.bc-hint code { color: #7dd3fc; }
.bc-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: .65rem; }

.bc-options {
    display: grid;
    gap: .55rem;
    margin: .9rem 0;
}

.bc-options label {
    display: flex;
    align-items: center;
    gap: .5rem;
    color: #cbd5e1;
    font-size: .8rem;
    cursor: pointer;
}

.bc-options input { accent-color: var(--bc-accent-strong); }
.bc-actions { display: grid; grid-template-columns: 1fr auto; gap: .55rem; }

.bc-status {
    margin-top: .7rem;
    padding: .6rem .7rem;
    border-radius: 9px;
    background: rgba(56, 189, 248, .08);
    color: #bae6fd;
    font-size: .78rem;
}

.bc-status.is-success { background: rgba(52, 211, 153, .09); color: #a7f3d0; }
.bc-status.is-error { background: rgba(248, 113, 113, .1); color: #fecaca; }
.bc-results { display: grid; grid-template-columns: 1fr 1fr; gap: .65rem; }

.bc-result {
    min-width: 0;
    padding: .65rem;
    border: 1px solid var(--bc-border);
    border-radius: 12px;
    background: rgba(2, 8, 20, .28);
}

.bc-result > label { margin-top: 0; }
.bc-result > label span { float: right; color: var(--bc-muted); font-weight: 600; }
.bc-result > div { display: grid; grid-template-columns: 1fr auto; gap: .4rem; }

.bc-output {
    min-height: 54px;
    padding: .55rem .65rem;
    resize: vertical;
    line-height: 1.45;
    word-break: break-all;
}

.bc-result button {
    align-self: stretch;
    padding: .4rem .55rem;
    border: 1px solid var(--bc-border);
    border-radius: 8px;
    background: rgba(56, 189, 248, .08);
    color: #7dd3fc;
    font: inherit;
    font-size: .7rem;
    font-weight: 800;
    cursor: pointer;
}

.bc-custom-result {
    display: grid;
    grid-template-columns: minmax(120px, .35fr) 1fr;
    gap: .65rem;
    align-items: end;
    margin-top: .65rem;
}

.bc-info {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .6rem;
    margin-top: 1rem;
}

.bc-info div {
    padding: .7rem .8rem;
    border: 1px solid var(--bc-border);
    border-radius: 12px;
    background: rgba(2, 8, 20, .38);
}

.bc-info span,
.bc-info strong { display: block; }
.bc-info span { color: var(--bc-muted); font-size: .7rem; }
.bc-info strong { margin-top: .2rem; color: #e2e8f0; font-size: .9rem; }

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

@media (max-width: 600px) {
    .bc-shell { padding: .75rem; border-radius: 14px; }
    .bc-hero { flex-direction: column; }
    .bc-badges { justify-content: flex-start; }
    .bc-card { padding: .8rem; border-radius: 13px; }
    .bc-grid-2,
    .bc-results,
    .bc-custom-result { grid-template-columns: 1fr; }
    .bc-info { grid-template-columns: 1fr 1fr; }
    .bc-actions { grid-template-columns: 1fr; }
}