.fbc-app,
.fbc-app * {
    box-sizing: border-box;
}

.fbc-app {
    --fbc-bg: #050710;
    --fbc-panel: rgba(12, 18, 38, .92);
    --fbc-text: #f7fbff;
    --fbc-muted: #a9b6cf;
    --fbc-primary: #8bff3d;
    --fbc-secondary: #34efff;
    --fbc-accent: #ff48d3;
    --fbc-violet: #936bff;
    --fbc-danger: #ff657e;
    --fbc-border: rgba(139,255,61,.24);

    position: relative;
    isolation: isolate;
    overflow: hidden;
    width: 100%;
    max-width: 1180px;
    margin: 24px auto;
    padding: 24px;
    color: var(--fbc-text);
    background:
        radial-gradient(circle at 8% 8%, rgba(139,255,61,.17), transparent 31%),
        radial-gradient(circle at 92% 10%, rgba(52,239,255,.15), transparent 30%),
        radial-gradient(circle at 82% 92%, rgba(255,72,211,.12), transparent 34%),
        linear-gradient(145deg, #050710, #0a1022);
    border: 1px solid var(--fbc-border);
    border-radius: 28px;
    box-shadow: 0 25px 75px rgba(0,0,0,.46), inset 0 0 46px rgba(139,255,61,.025);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.fbc-app[data-theme="cyan"] {
    --fbc-primary: #35ecff;
    --fbc-secondary: #876cff;
    --fbc-accent: #60ff9c;
    --fbc-violet: #ff48cf;
    --fbc-border: rgba(53,236,255,.25);
}

.fbc-app[data-theme="pink"] {
    --fbc-primary: #ff46d2;
    --fbc-secondary: #8f68ff;
    --fbc-accent: #52ffb0;
    --fbc-violet: #35eaff;
    --fbc-border: rgba(255,70,210,.25);
}

.fbc-dna-bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
    opacity: .34;
}

.fbc-dna-bg span {
    position: absolute;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--fbc-primary);
    box-shadow:
        0 0 14px var(--fbc-primary),
        24px 18px 0 var(--fbc-secondary),
        48px 0 0 var(--fbc-primary),
        72px 18px 0 var(--fbc-secondary),
        96px 0 0 var(--fbc-primary);
    animation: fbcDrift 13s linear infinite;
}

.fbc-dna-bg span::after {
    content: "";
    position: absolute;
    left: 3px;
    top: 4px;
    width: 94px;
    height: 17px;
    border-top: 1px solid var(--fbc-secondary);
    border-bottom: 1px solid var(--fbc-primary);
    transform: skewY(10deg);
    opacity: .7;
}

.fbc-dna-bg span:nth-child(1){left:5%;top:18%;animation-delay:0s}
.fbc-dna-bg span:nth-child(2){left:42%;top:8%;animation-delay:3s}
.fbc-dna-bg span:nth-child(3){left:70%;top:45%;animation-delay:6s}
.fbc-dna-bg span:nth-child(4){left:18%;top:78%;animation-delay:9s}

@keyframes fbcDrift {
    from { transform: translateX(-120px) rotate(0deg); opacity: .1; }
    35% { opacity: .75; }
    to { transform: translateX(520px) rotate(360deg); opacity: 0; }
}

.fbc-header {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    padding:8px 6px 24px;
}

.fbc-brand {
    display:flex;
    align-items:center;
    gap:16px;
}

.fbc-logo {
    display:grid;
    place-items:center;
    flex:0 0 auto;
    width:66px;
    height:66px;
    font-size:35px;
    background:linear-gradient(145deg, rgba(139,255,61,.21), rgba(52,239,255,.16));
    border:1px solid var(--fbc-border);
    border-radius:20px;
    box-shadow:0 0 26px rgba(139,255,61,.23), inset 0 0 20px rgba(255,255,255,.04);
}

.fbc-eyebrow {
    margin:0 0 5px!important;
    color:var(--fbc-primary);
    font-size:11px;
    font-weight:900;
    letter-spacing:.14em;
}

.fbc-brand h2 {
    margin:0!important;
    color:var(--fbc-text);
    font-size:clamp(25px,4vw,38px);
    line-height:1.05;
    letter-spacing:-.04em;
    text-shadow:0 0 24px rgba(139,255,61,.2);
}

.fbc-brand p:last-child {
    margin:7px 0 0!important;
    color:var(--fbc-muted);
    font-size:14px;
}

.fbc-toolbar { display:flex; gap:9px; }

.fbc-icon-button,
.fbc-copy,
.fbc-primary,
.fbc-secondary,
.fbc-category-button {
    appearance:none;
    border:0;
    font:inherit;
    cursor:pointer;
    transition:transform .16s ease, border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

.fbc-icon-button {
    display:inline-flex;
    align-items:center;
    gap:7px;
    min-height:42px;
    padding:9px 12px;
    color:var(--fbc-muted);
    background:rgba(255,255,255,.045);
    border:1px solid rgba(255,255,255,.09);
    border-radius:12px;
}

.fbc-icon-button:hover,
.fbc-icon-button.is-active {
    color:var(--fbc-text);
    border-color:var(--fbc-border);
    box-shadow:0 0 18px rgba(139,255,61,.11);
}

.fbc-shell {
    display:grid;
    grid-template-columns:minmax(220px,300px) minmax(0,1fr);
    gap:18px;
}

.fbc-sidebar,
.fbc-main {
    border:1px solid rgba(255,255,255,.08);
    border-radius:20px;
    background:linear-gradient(145deg, rgba(18,27,56,.88), rgba(7,12,27,.93));
    backdrop-filter:blur(14px);
}

.fbc-sidebar { padding:18px; }
.fbc-main { padding:clamp(19px,4vw,34px); }

.fbc-label {
    display:block;
    margin-bottom:8px;
    color:#e7f6ff;
    font-size:12px;
    font-weight:900;
    letter-spacing:.06em;
    text-transform:uppercase;
}

.fbc-search-wrap {
    display:flex;
    align-items:center;
    gap:8px;
    padding:0 12px;
    background:rgba(1,5,14,.73);
    border:1px solid rgba(255,255,255,.09);
    border-radius:14px;
}

.fbc-search-wrap:focus-within {
    border-color:var(--fbc-primary);
    box-shadow:0 0 0 3px color-mix(in srgb,var(--fbc-primary) 13%,transparent);
}

.fbc-search-wrap input {
    width:100%;
    height:44px;
    padding:0;
    color:var(--fbc-text);
    background:transparent;
    border:0;
    outline:0;
    font:inherit;
    font-size:14px;
}

.fbc-search-wrap input::placeholder { color:#74819c; }

.fbc-category-list {
    display:grid;
    gap:8px;
    margin-top:18px;
    max-height:575px;
    overflow:auto;
    padding-right:4px;
}

.fbc-category-group { margin-top:6px; }

.fbc-category-title {
    display:block;
    margin:14px 4px 7px;
    color:var(--fbc-muted);
    font-size:11px;
    font-weight:900;
    letter-spacing:.12em;
    text-transform:uppercase;
}

.fbc-category-button {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    width:100%;
    padding:11px 12px;
    color:#d0ddf1;
    text-align:left;
    background:transparent;
    border:1px solid transparent;
    border-radius:12px;
}

.fbc-category-button:hover {
    color:var(--fbc-text);
    background:rgba(255,255,255,.045);
}

.fbc-category-button.is-active {
    color:#071205;
    font-weight:900;
    background:linear-gradient(135deg,var(--fbc-primary),color-mix(in srgb,var(--fbc-primary) 58%,white));
    box-shadow:0 0 22px color-mix(in srgb,var(--fbc-primary) 30%,transparent);
}

.fbc-category-button small {
    opacity:.72;
    font-size:10px;
}

.fbc-formula-heading {
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:18px;
    padding-bottom:22px;
    border-bottom:1px solid rgba(255,255,255,.08);
}

.fbc-category-chip {
    display:inline-flex;
    margin-bottom:9px;
    padding:5px 10px;
    color:var(--fbc-primary);
    background:color-mix(in srgb,var(--fbc-primary) 10%,transparent);
    border:1px solid color-mix(in srgb,var(--fbc-primary) 28%,transparent);
    border-radius:999px;
    font-size:11px;
    font-weight:900;
    letter-spacing:.07em;
    text-transform:uppercase;
}

.fbc-formula-heading h3 {
    margin:0!important;
    color:var(--fbc-text);
    font-size:clamp(24px,3vw,34px);
    line-height:1.1;
}

.fbc-formula-heading p {
    margin:8px 0 0!important;
    color:var(--fbc-muted);
}

.fbc-formula-badge {
    flex:0 0 auto;
    max-width:48%;
    padding:13px 16px;
    color:var(--fbc-accent);
    background:rgba(1,5,14,.74);
    border:1px solid color-mix(in srgb,var(--fbc-accent) 31%,transparent);
    border-radius:13px;
    font-family:"Courier New", monospace;
    font-size:16px;
    font-weight:900;
    text-align:center;
}

.fbc-form { padding-top:24px; }

.fbc-special-area {
    margin-bottom:16px;
    padding:17px;
    background:rgba(1,5,14,.62);
    border:1px solid rgba(255,255,255,.09);
    border-radius:15px;
}

.fbc-special-input,
.fbc-special-select {
    width:100%;
    min-height:52px;
    padding:11px 14px;
    color:var(--fbc-text);
    background:rgba(1,5,14,.78);
    border:1px solid rgba(255,255,255,.11);
    border-radius:14px;
    outline:0;
    font:inherit;
    font-size:16px;
    font-weight:800;
}

.fbc-special-input:focus,
.fbc-special-select:focus {
    border-color:var(--fbc-primary);
    box-shadow:0 0 0 3px color-mix(in srgb,var(--fbc-primary) 12%,transparent);
}

.fbc-special-select option { color:#111827; background:#fff; }

.fbc-special-grid {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px;
}

.fbc-help {
    margin:9px 1px 0!important;
    color:var(--fbc-muted);
    font-size:12px;
}

.fbc-input-grid {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:16px;
}

.fbc-field { min-width:0; }

.fbc-field-shell {
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(92px,auto);
    overflow:hidden;
    background:rgba(1,5,14,.74);
    border:1px solid rgba(255,255,255,.10);
    border-radius:14px;
}

.fbc-field-shell:focus-within {
    border-color:var(--fbc-primary);
    box-shadow:0 0 0 3px color-mix(in srgb,var(--fbc-primary) 12%,transparent),0 0 24px color-mix(in srgb,var(--fbc-primary) 10%,transparent);
}

.fbc-field-shell input,
.fbc-field-shell select,
.fbc-output-row select {
    min-width:0;
    height:50px;
    color:var(--fbc-text);
    background:transparent;
    border:0;
    outline:0;
    font:inherit;
}

.fbc-field-shell input {
    width:100%;
    padding:0 14px;
    font-size:16px;
    font-weight:800;
}

.fbc-field-shell select {
    padding:0 30px 0 10px;
    color:var(--fbc-primary);
    border-left:1px solid rgba(255,255,255,.08);
    font-size:13px;
    font-weight:900;
}

.fbc-field-shell select option,
.fbc-output-row select option {
    color:#101827;
    background:#fff;
}

.fbc-output-row {
    display:grid;
    grid-template-columns:minmax(180px,300px);
    margin-top:17px;
}

.fbc-output-row select {
    width:100%;
    padding:0 14px;
    background:rgba(1,5,14,.74);
    border:1px solid rgba(255,255,255,.10);
    border-radius:14px;
}

.fbc-output-row select:focus {
    border-color:var(--fbc-primary);
    box-shadow:0 0 0 3px color-mix(in srgb,var(--fbc-primary) 12%,transparent);
}

.fbc-actions {
    display:flex;
    gap:12px;
    margin-top:22px;
}

.fbc-primary,
.fbc-secondary {
    min-height:49px;
    padding:12px 20px;
    border-radius:14px;
    font-weight:900;
}

.fbc-primary {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    color:#061005;
    background:linear-gradient(135deg,var(--fbc-primary),var(--fbc-accent));
    box-shadow:0 0 25px color-mix(in srgb,var(--fbc-primary) 27%,transparent);
}

.fbc-secondary {
    color:var(--fbc-text);
    background:rgba(255,255,255,.055);
    border:1px solid rgba(255,255,255,.10);
}

.fbc-primary:hover,
.fbc-secondary:hover,
.fbc-icon-button:hover,
.fbc-copy:hover:not(:disabled) { transform:translateY(-1px); }

.fbc-primary:active,
.fbc-secondary:active,
.fbc-icon-button:active,
.fbc-copy:active:not(:disabled) { transform:translateY(1px) scale(.99); }

.fbc-result {
    margin-top:25px;
    padding:22px;
    background:linear-gradient(145deg,color-mix(in srgb,var(--fbc-primary) 8%,transparent),rgba(1,5,14,.67));
    border:1px solid color-mix(in srgb,var(--fbc-primary) 23%,transparent);
    border-radius:20px;
}

.fbc-result.is-success { animation:fbcPulse .48s ease; }

.fbc-result.is-error {
    border-color:rgba(255,101,126,.55);
    box-shadow:0 0 24px rgba(255,101,126,.08);
}

@keyframes fbcPulse {
    0%{transform:scale(.995)}
    55%{transform:scale(1.005);box-shadow:0 0 32px color-mix(in srgb,var(--fbc-primary) 17%,transparent)}
    100%{transform:scale(1)}
}

.fbc-result-top {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
}

.fbc-result-label {
    display:block;
    color:var(--fbc-muted);
    font-size:11px;
    font-weight:900;
    letter-spacing:.14em;
}

.fbc-result-value {
    margin-top:6px;
    color:var(--fbc-primary);
    font-size:clamp(26px,5vw,44px);
    font-weight:900;
    line-height:1.08;
    overflow-wrap:anywhere;
    text-shadow:0 0 22px color-mix(in srgb,var(--fbc-primary) 27%,transparent);
}

.fbc-copy {
    padding:9px 12px;
    color:var(--fbc-text);
    background:rgba(255,255,255,.055);
    border:1px solid rgba(255,255,255,.11);
    border-radius:11px;
    font-size:13px;
    font-weight:900;
}

.fbc-copy:disabled { opacity:.45; cursor:not-allowed; }

.fbc-solution {
    margin-top:20px;
    padding-top:18px;
    border-top:1px solid rgba(255,255,255,.08);
}

.fbc-solution h4 {
    margin:0 0 10px!important;
    color:#ecfff4;
    font-size:14px;
}

.fbc-steps {
    display:grid;
    gap:8px;
    color:var(--fbc-muted);
    font-size:14px;
    line-height:1.55;
}

.fbc-step-line {
    padding:8px 10px;
    background:rgba(255,255,255,.035);
    border-left:3px solid var(--fbc-secondary);
    border-radius:8px;
    overflow-wrap:anywhere;
}

.fbc-note {
    margin:15px 2px 0!important;
    color:#7e8ca7;
    font-size:12px;
    line-height:1.5;
}

.fbc-empty {
    padding:18px 10px;
    color:var(--fbc-muted);
    text-align:center;
    border:1px dashed rgba(255,255,255,.10);
    border-radius:12px;
}

.fbc-error-text { color:var(--fbc-danger); font-weight:900; }

@media (max-width:820px) {
    .fbc-app { padding:14px; border-radius:20px; }
    .fbc-header { align-items:flex-start; }
    .fbc-shell { grid-template-columns:1fr; }
    .fbc-category-list {
        display:flex;
        max-height:none;
        overflow-x:auto;
        gap:8px;
        padding:2px 0 8px;
    }
    .fbc-category-group { display:contents; }
    .fbc-category-title { display:none; }
    .fbc-category-button {
        flex:0 0 auto;
        width:auto;
        white-space:nowrap;
        background:rgba(255,255,255,.035);
        border-color:rgba(255,255,255,.07);
    }
    .fbc-category-button small { display:none; }
}

@media (max-width:600px) {
    .fbc-header { display:grid; }
    .fbc-toolbar { margin-left:82px; }
    .fbc-button-label { display:none; }
    .fbc-formula-heading { display:grid; }
    .fbc-formula-badge { max-width:100%; width:100%; text-align:left; }
    .fbc-input-grid,
    .fbc-special-grid { grid-template-columns:1fr; }
    .fbc-output-row { grid-template-columns:1fr; }
    .fbc-actions { display:grid; grid-template-columns:1fr 1fr; }
    .fbc-result-top { align-items:flex-start; }
}

@media (prefers-reduced-motion:reduce) {
    .fbc-app *,
    .fbc-app *::before,
    .fbc-app *::after {
        animation-duration:.01ms!important;
        animation-iteration-count:1!important;
        transition-duration:.01ms!important;
    }
}