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

.folc-app {
    --folc-text: #f7fbff;
    --folc-muted: #a9b7d2;
    --folc-primary: #d6ff3e;
    --folc-secondary: #35efff;
    --folc-accent: #a85cff;
    --folc-pink: #ff49cf;
    --folc-danger: #ff647d;
    --folc-border: rgba(214,255,62,.24);

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

.folc-app[data-theme="cyan"] {
    --folc-primary: #35efff;
    --folc-secondary: #a75cff;
    --folc-accent: #d4ff3d;
    --folc-border: rgba(53,239,255,.24);
}

.folc-app[data-theme="pink"] {
    --folc-primary: #ff46d1;
    --folc-secondary: #916cff;
    --folc-accent: #45ffb0;
    --folc-border: rgba(255,70,209,.25);
}

.folc-grid-bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: .30;
    background-image:
        linear-gradient(rgba(214,255,62,.055) 1px, transparent 1px),
        linear-gradient(90deg,rgba(214,255,62,.055) 1px, transparent 1px);
    background-size: 34px 34px;
    mask-image: linear-gradient(to bottom, black, transparent 94%);
}

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

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

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

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

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

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

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

.folc-tool,
.folc-primary,
.folc-secondary,
.folc-preset {
    appearance: none;
    border: 0;
    font: inherit;
    cursor: pointer;
    transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

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

.folc-tool:hover,
.folc-tool.is-active {
    color: var(--folc-text);
    border-color: var(--folc-border);
    box-shadow: 0 0 18px rgba(214,255,62,.11);
}

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

.folc-circuit-card,
.folc-main {
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 20px;
    background: linear-gradient(145deg, rgba(18,27,58,.89), rgba(7,12,28,.94));
    backdrop-filter: blur(14px);
}

.folc-circuit-card {
    padding: 20px;
}

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

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

.folc-circuit {
    position: relative;
    width: 210px;
    height: 260px;
    margin: 28px auto 18px;
}

.folc-wire {
    position: absolute;
    background: rgba(255,255,255,.18);
    box-shadow: 0 0 8px rgba(255,255,255,.06);
}

.folc-wire-top,
.folc-wire-bottom {
    left: 35px;
    width: 140px;
    height: 4px;
}

.folc-wire-top { top: 28px; }
.folc-wire-bottom { bottom: 28px; }

.folc-wire-left,
.folc-wire-right {
    top: 28px;
    width: 4px;
    height: 204px;
}

.folc-wire-left { left: 35px; }
.folc-wire-right { right: 35px; }

.folc-battery {
    position: absolute;
    left: 17px;
    top: 104px;
    width: 40px;
    height: 62px;
    background: rgba(1,5,15,.9);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 10px;
    box-shadow: 0 0 18px color-mix(in srgb,var(--folc-secondary) 14%,transparent);
}

.folc-battery::before,
.folc-battery::after {
    content: "";
    position: absolute;
    left: 50%;
    background: var(--folc-secondary);
    transform: translateX(-50%);
}

.folc-battery::before {
    top: 16px;
    width: 24px;
    height: 3px;
}

.folc-battery::after {
    bottom: 16px;
    width: 13px;
    height: 3px;
}

.folc-battery span:first-child {
    position: absolute;
    top: 9px;
    left: 50%;
    color: var(--folc-primary);
    font-size: 10px;
    transform: translateX(-50%);
}

.folc-battery span:last-child {
    position: absolute;
    bottom: 6px;
    left: 50%;
    color: var(--folc-primary);
    font-size: 10px;
    transform: translateX(-50%);
}

.folc-resistor {
    position: absolute;
    right: 18px;
    top: 92px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 84px;
    background: #e9d9a7;
    border: 2px solid #b8985e;
    border-radius: 10px;
    box-shadow: 0 0 20px color-mix(in srgb,var(--folc-primary) 18%,transparent);
}

.folc-resistor i {
    width: 3px;
    height: 100%;
    margin: 0 2px;
    background: #6a4020;
}

.folc-resistor i:nth-child(2) { background: #d44e32; }
.folc-resistor i:nth-child(3) { background: #f4c63a; }
.folc-resistor i:nth-child(4) { background: #2d2828; }
.folc-resistor i:nth-child(5) { background: #c7a72d; }

.folc-flow b {
    position: absolute;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--folc-primary);
    box-shadow: 0 0 13px var(--folc-primary);
    opacity: 0;
}

.folc-flow.is-active b {
    opacity: 1;
    animation: folcCurrent 2.4s linear infinite;
}

.folc-flow b:nth-child(1) { animation-delay: 0s; }
.folc-flow b:nth-child(2) { animation-delay: .4s; }
.folc-flow b:nth-child(3) { animation-delay: .8s; }
.folc-flow b:nth-child(4) { animation-delay: 1.2s; }
.folc-flow b:nth-child(5) { animation-delay: 1.6s; }
.folc-flow b:nth-child(6) { animation-delay: 2s; }

@keyframes folcCurrent {
    0% { left: 31px; top: 24px; }
    25% { left: 171px; top: 24px; }
    50% { left: 171px; top: 228px; }
    75% { left: 31px; top: 228px; }
    100% { left: 31px; top: 24px; }
}

.folc-live-values {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px;
}

.folc-live-values div {
    padding: 11px;
    background: rgba(1,5,15,.57);
    border: 1px solid rgba(255,255,255,.075);
    border-radius: 11px;
}

.folc-live-values span {
    display: block;
    color: var(--folc-muted);
    font-size: 10px;
}

.folc-live-values strong {
    display: block;
    margin-top: 4px;
    color: var(--folc-primary);
    font-size: 15px;
    overflow-wrap: anywhere;
}

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

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

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

.folc-titlebar p {
    margin: 8px 0 0 !important;
    color: var(--folc-muted);
}

.folc-formulas {
    display: grid;
    gap: 7px;
    flex: 0 0 auto;
}

.folc-formulas span {
    padding: 9px 12px;
    color: var(--folc-accent);
    background: rgba(1,5,15,.74);
    border: 1px solid color-mix(in srgb,var(--folc-accent) 28%,transparent);
    border-radius: 11px;
    font: 900 14px "Courier New", monospace;
    text-align: center;
}

.folc-form {
    padding-top: 23px;
}

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

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

.folc-field.is-known .folc-input-shell {
    border-color: var(--folc-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb,var(--folc-primary) 10%,transparent);
}

.folc-field.is-calculated .folc-input-shell {
    border-color: color-mix(in srgb,var(--folc-secondary) 60%,transparent);
}

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

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

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

.folc-input-shell input,
.folc-input-shell select {
    min-width: 0;
    height: 52px;
    color: var(--folc-text);
    background: transparent;
    border: 0;
    outline: 0;
    font: inherit;
}

.folc-input-shell input {
    width: 100%;
    padding: 0 14px;
    font-size: 16px;
    font-weight: 900;
}

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

.folc-input-shell select option {
    color: #111827;
    background: #fff;
}

.folc-selection-note {
    margin-top: 14px;
    color: var(--folc-muted);
    font-size: 12px;
    font-weight: 800;
}

.folc-selection-note.is-ready {
    color: var(--folc-primary);
}

.folc-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 11px;
    margin-top: 19px;
}

.folc-primary,
.folc-secondary {
    min-height: 48px;
    padding: 11px 19px;
    border-radius: 13px;
    font-weight: 900;
}

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

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

.folc-primary:hover,
.folc-secondary:hover,
.folc-tool:hover,
.folc-preset:hover {
    transform: translateY(-1px);
}

.folc-primary:active,
.folc-secondary:active,
.folc-tool:active,
.folc-preset:active {
    transform: translateY(1px) scale(.99);
}

.folc-secondary:disabled {
    opacity: .45;
    cursor: not-allowed;
}

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

.folc-result.is-error {
    border-color: rgba(255,100,125,.55);
}

.folc-result-grid {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 10px;
    margin-top: 13px;
}

.folc-result-grid div {
    padding: 13px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.075);
    border-radius: 12px;
}

.folc-result-grid span {
    display: block;
    color: var(--folc-muted);
    font-size: 10px;
}

.folc-result-grid strong {
    display: block;
    margin-top: 5px;
    color: var(--folc-primary);
    font-size: 18px;
    overflow-wrap: anywhere;
}

.folc-steps {
    display: grid;
    gap: 7px;
    margin-top: 17px;
    padding-top: 16px;
    color: var(--folc-muted);
    border-top: 1px solid rgba(255,255,255,.08);
    font-size: 13px;
    line-height: 1.5;
}

.folc-step {
    padding: 8px 9px;
    background: rgba(255,255,255,.035);
    border-left: 3px solid var(--folc-secondary);
    border-radius: 7px;
}

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

.folc-presets,
.folc-reference {
    margin-top: 20px;
    padding: 18px;
    background: rgba(1,5,15,.48);
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 16px;
}

.folc-preset-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 10px;
    margin-top: 13px;
}

.folc-preset {
    min-height: 88px;
    padding: 12px;
    color: var(--folc-text);
    text-align: left;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.075);
    border-radius: 12px;
}

.folc-preset span {
    font-size: 20px;
}

.folc-preset strong {
    display: block;
    margin-top: 5px;
    color: var(--folc-primary);
    font-size: 14px;
}

.folc-preset small {
    display: block;
    margin-top: 4px;
    color: var(--folc-muted);
    font-size: 11px;
}

.folc-preset:hover {
    border-color: var(--folc-border);
    box-shadow: 0 0 17px color-mix(in srgb,var(--folc-primary) 9%,transparent);
}

.folc-reference-grid {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 9px;
    margin-top: 13px;
}

.folc-reference-grid div {
    padding: 12px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 11px;
}

.folc-reference-grid strong {
    display: block;
    color: var(--folc-primary);
    font-size: 13px;
}

.folc-reference-grid span {
    display: block;
    margin-top: 5px;
    color: var(--folc-muted);
    font: 800 11px "Courier New", monospace;
}

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

@media (max-width: 920px) {
    .folc-shell {
        grid-template-columns: 1fr;
    }

    .folc-circuit-card {
        display: grid;
        grid-template-columns: auto 1fr;
        align-items: center;
        gap: 22px;
    }

    .folc-card-label {
        grid-column: 1/-1;
    }

    .folc-circuit {
        margin: 0 auto;
    }

    .folc-live-values {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 700px) {
    .folc-app {
        padding: 14px;
        border-radius: 20px;
    }

    .folc-header {
        display: grid;
        align-items: flex-start;
    }

    .folc-toolbar {
        margin-left: 82px;
    }

    .folc-tool-label {
        display: none;
    }

    .folc-titlebar {
        display: grid;
    }

    .folc-formulas {
        grid-template-columns: 1fr 1fr;
    }

    .folc-input-grid {
        grid-template-columns: 1fr;
    }

    .folc-result-grid,
    .folc-reference-grid {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }
}

@media (max-width: 520px) {
    .folc-circuit-card {
        grid-template-columns: 1fr;
    }

    .folc-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .folc-preset-grid,
    .folc-result-grid,
    .folc-reference-grid {
        grid-template-columns: 1fr;
    }
}

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