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

.fcc-app {
    --fcc-bg: #050810;
    --fcc-panel: rgba(10, 20, 34, 0.92);
    --fcc-text: #f7fff8;
    --fcc-muted: #a9bdc4;
    --fcc-primary: #39ff88;
    --fcc-secondary: #21e6ff;
    --fcc-accent: #f6ff3c;
    --fcc-pink: #ff49ca;
    --fcc-danger: #ff647c;
    --fcc-border: rgba(57, 255, 136, 0.24);

    position: relative;
    isolation: isolate;
    overflow: hidden;
    width: 100%;
    max-width: 1180px;
    margin: 24px auto;
    padding: 24px;
    color: var(--fcc-text);
    background:
        radial-gradient(circle at 10% 8%, rgba(57, 255, 136, 0.17), transparent 31%),
        radial-gradient(circle at 92% 9%, rgba(33, 230, 255, 0.16), transparent 29%),
        radial-gradient(circle at 82% 92%, rgba(255, 73, 202, 0.12), transparent 34%),
        linear-gradient(145deg, #050810, #081320);
    border: 1px solid var(--fcc-border);
    border-radius: 28px;
    box-shadow: 0 25px 75px rgba(0,0,0,.46), inset 0 0 45px rgba(57,255,136,.025);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.fcc-app[data-theme="cyan"] {
    --fcc-primary: #24eaff;
    --fcc-secondary: #9d5cff;
    --fcc-accent: #54ff8c;
    --fcc-pink: #ff46ce;
    --fcc-border: rgba(36, 234, 255, .25);
}

.fcc-app[data-theme="pink"] {
    --fcc-primary: #ff44cf;
    --fcc-secondary: #8a68ff;
    --fcc-accent: #36ffbf;
    --fcc-pink: #35e9ff;
    --fcc-border: rgba(255, 68, 207, .25);
}

.fcc-bubbles {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    opacity: .35;
    pointer-events: none;
}

.fcc-bubbles span {
    position: absolute;
    bottom: -80px;
    width: 22px;
    height: 22px;
    border: 2px solid var(--fcc-primary);
    border-radius: 50%;
    box-shadow: 0 0 18px var(--fcc-primary);
    animation: fccFloat 12s linear infinite;
}

.fcc-bubbles span:nth-child(1){left:8%; animation-delay:0s; width:14px;height:14px;}
.fcc-bubbles span:nth-child(2){left:27%; animation-delay:2.5s; width:30px;height:30px;}
.fcc-bubbles span:nth-child(3){left:53%; animation-delay:5s; width:18px;height:18px;}
.fcc-bubbles span:nth-child(4){left:74%; animation-delay:1.5s; width:38px;height:38px;}
.fcc-bubbles span:nth-child(5){left:91%; animation-delay:7s; width:20px;height:20px;}

@keyframes fccFloat {
    from { transform: translateY(0) scale(.7); opacity: 0; }
    15% { opacity: .8; }
    to { transform: translateY(-900px) scale(1.25); opacity: 0; }
}

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

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

.fcc-logo {
    display:grid;
    place-items:center;
    flex:0 0 auto;
    width:66px;
    height:66px;
    font-size:34px;
    background:linear-gradient(145deg, rgba(57,255,136,.21), rgba(33,230,255,.15));
    border:1px solid var(--fcc-border);
    border-radius:20px;
    box-shadow:0 0 26px rgba(57,255,136,.23), inset 0 0 20px rgba(255,255,255,.04);
}

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

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

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

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

.fcc-icon-button,
.fcc-copy,
.fcc-primary,
.fcc-secondary,
.fcc-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;
}

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

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

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

.fcc-sidebar,
.fcc-main {
    border:1px solid rgba(255,255,255,.08);
    border-radius:20px;
    background:linear-gradient(145deg, rgba(17,34,48,.88), rgba(7,14,25,.92));
    backdrop-filter:blur(14px);
}

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

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

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

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

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

.fcc-search-wrap input::placeholder { color:#70868f; }

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

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

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

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

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

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

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

.fcc-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);
}

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

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

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

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

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

.fcc-special-area {
    margin-bottom:16px;
    padding:17px;
    background:rgba(1,6,13,.6);
    border:1px solid rgba(255,255,255,.09);
    border-radius:15px;
}

.fcc-formula-input {
    width:100%;
    height:52px;
    padding:0 14px;
    color:var(--fcc-text);
    background:rgba(1,6,13,.78);
    border:1px solid rgba(255,255,255,.11);
    border-radius:14px;
    outline:0;
    font:inherit;
    font-size:17px;
    font-weight:800;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.fcc-result.is-success { animation:fccPulse .48s ease; }
.fcc-result.is-error {
    border-color:rgba(255,100,124,.55);
    box-shadow:0 0 24px rgba(255,100,124,.08);
}

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

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

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

.fcc-result-value {
    margin-top:6px;
    color:var(--fcc-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(--fcc-primary) 27%,transparent);
}

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

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

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

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

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

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

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

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

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

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

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

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