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

.fsc-app {
    --fsc-bg: #050713;
    --fsc-panel: rgba(12, 18, 40, .92);
    --fsc-panel-2: rgba(17, 25, 55, .88);
    --fsc-text: #f7fbff;
    --fsc-muted: #a8b6d1;
    --fsc-primary: #39f4ff;
    --fsc-secondary: #a855ff;
    --fsc-accent: #d6ff3e;
    --fsc-pink: #ff48cf;
    --fsc-danger: #ff6079;
    --fsc-border: rgba(57,244,255,.24);

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

.fsc-app[data-theme="lime"] {
    --fsc-primary: #c8ff3f;
    --fsc-secondary: #30eaff;
    --fsc-accent: #ff47ca;
    --fsc-pink: #8a69ff;
    --fsc-border: rgba(200,255,63,.25);
}

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

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

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

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

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

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

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

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

.fsc-header-tools {
    display:flex;
    gap:9px;
}

.fsc-small-button,
.fsc-key,
.fsc-mode,
.fsc-clear-history,
.fsc-constant-grid button,
.fsc-history-item {
    appearance:none;
    border:0;
    font:inherit;
    cursor:pointer;
    transition:transform .15s ease, border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

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

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

.fsc-shell {
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(260px,330px);
    gap:18px;
}

.fsc-calculator,
.fsc-history-panel {
    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);
}

.fsc-calculator {
    padding:clamp(17px,3vw,26px);
}

.fsc-history-panel {
    padding:20px;
}

.fsc-topbar {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    margin-bottom:14px;
}

.fsc-mode-group {
    display:flex;
    gap:6px;
    padding:5px;
    background:rgba(1,5,15,.68);
    border:1px solid rgba(255,255,255,.08);
    border-radius:12px;
}

.fsc-mode {
    min-width:54px;
    padding:8px 10px;
    color:var(--fsc-muted);
    background:transparent;
    border-radius:9px;
    font-size:12px;
    font-weight:900;
}

.fsc-mode.is-active {
    color:#061016;
    background:var(--fsc-primary);
    box-shadow:0 0 18px color-mix(in srgb,var(--fsc-primary) 28%,transparent);
}

.fsc-status {
    display:flex;
    gap:8px;
}

.fsc-status span {
    display:grid;
    place-items:center;
    min-width:34px;
    height:28px;
    padding:0 8px;
    color:#69748f;
    background:rgba(255,255,255,.035);
    border:1px solid rgba(255,255,255,.07);
    border-radius:8px;
    font-size:11px;
    font-weight:900;
}

.fsc-status span.is-active {
    color:var(--fsc-accent);
    border-color:color-mix(in srgb,var(--fsc-accent) 30%,transparent);
    box-shadow:0 0 15px color-mix(in srgb,var(--fsc-accent) 12%,transparent);
}

.fsc-display {
    min-height:132px;
    padding:19px 20px;
    background:
        radial-gradient(circle at 85% 20%, color-mix(in srgb,var(--fsc-primary) 8%,transparent), transparent 42%),
        rgba(1,5,15,.82);
    border:1px solid color-mix(in srgb,var(--fsc-primary) 23%,transparent);
    border-radius:18px;
    box-shadow:inset 0 0 28px rgba(0,0,0,.35), 0 0 22px color-mix(in srgb,var(--fsc-primary) 7%,transparent);
}

.fsc-expression {
    min-height:55px;
    color:var(--fsc-text);
    font-family:"Courier New", monospace;
    font-size:clamp(28px,5vw,46px);
    font-weight:900;
    line-height:1.18;
    text-align:right;
    overflow-wrap:anywhere;
}

.fsc-preview {
    min-height:22px;
    margin-top:10px;
    color:var(--fsc-primary);
    font-family:"Courier New", monospace;
    font-size:14px;
    font-weight:800;
    text-align:right;
    overflow-wrap:anywhere;
    text-shadow:0 0 15px color-mix(in srgb,var(--fsc-primary) 22%,transparent);
}

.fsc-preview.is-error {
    color:var(--fsc-danger);
    text-shadow:none;
}

.fsc-keypad {
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:10px;
    margin-top:16px;
}

.fsc-key {
    min-height:52px;
    padding:9px 6px;
    color:var(--fsc-text);
    background:rgba(255,255,255,.055);
    border:1px solid rgba(255,255,255,.085);
    border-radius:13px;
    font-size:15px;
    font-weight:900;
    box-shadow:inset 0 0 12px rgba(255,255,255,.02);
}

.fsc-key:hover {
    transform:translateY(-1px);
    border-color:var(--fsc-border);
    box-shadow:0 0 18px color-mix(in srgb,var(--fsc-primary) 10%,transparent);
}

.fsc-key:active {
    transform:translateY(1px) scale(.985);
}

.fsc-number {
    color:#061018;
    background:linear-gradient(145deg,#f9fcff,#d8e6f4);
    border-color:rgba(255,255,255,.5);
}

.fsc-function {
    color:var(--fsc-primary);
    background:color-mix(in srgb,var(--fsc-primary) 8%,rgba(255,255,255,.035));
}

.fsc-function.is-second {
    color:var(--fsc-accent);
    border-color:color-mix(in srgb,var(--fsc-accent) 30%,transparent);
}

.fsc-memory {
    color:var(--fsc-accent);
    background:color-mix(in srgb,var(--fsc-accent) 7%,rgba(255,255,255,.03));
}

.fsc-action {
    color:#ffe5ef;
    background:rgba(255,96,121,.12);
    border-color:rgba(255,96,121,.18);
}

.fsc-operator {
    color:#07101a;
    background:linear-gradient(145deg,var(--fsc-secondary),color-mix(in srgb,var(--fsc-secondary) 60%,white));
    box-shadow:0 0 17px color-mix(in srgb,var(--fsc-secondary) 15%,transparent);
}

.fsc-equals {
    color:#071005;
    background:linear-gradient(145deg,var(--fsc-primary),var(--fsc-accent));
    box-shadow:0 0 23px color-mix(in srgb,var(--fsc-primary) 24%,transparent);
}

.fsc-zero {
    grid-column:span 2;
}

.fsc-keyboard-note {
    margin-top:13px;
    color:#7e8ca7;
    font-size:12px;
    text-align:center;
}

.fsc-history-heading {
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:14px;
    padding-bottom:15px;
    border-bottom:1px solid rgba(255,255,255,.08);
}

.fsc-panel-label {
    display:block;
    color:var(--fsc-primary);
    font-size:10px;
    font-weight:900;
    letter-spacing:.13em;
}

.fsc-history-heading h3 {
    margin:4px 0 0!important;
    color:var(--fsc-text);
    font-size:24px;
}

.fsc-clear-history {
    padding:8px 10px;
    color:var(--fsc-muted);
    background:rgba(255,255,255,.045);
    border:1px solid rgba(255,255,255,.08);
    border-radius:10px;
    font-size:12px;
    font-weight:900;
}

.fsc-clear-history:hover {
    color:var(--fsc-text);
    border-color:var(--fsc-border);
}

.fsc-history-list {
    display:grid;
    gap:8px;
    max-height:340px;
    overflow:auto;
    margin-top:14px;
}

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

.fsc-history-item {
    display:block;
    width:100%;
    padding:11px 12px;
    text-align:left;
    background:rgba(255,255,255,.035);
    border:1px solid rgba(255,255,255,.07);
    border-radius:11px;
}

.fsc-history-item:hover {
    border-color:var(--fsc-border);
    background:rgba(255,255,255,.055);
}

.fsc-history-expression {
    display:block;
    color:var(--fsc-muted);
    font-size:12px;
    overflow-wrap:anywhere;
}

.fsc-history-result {
    display:block;
    margin-top:5px;
    color:var(--fsc-primary);
    font-family:"Courier New", monospace;
    font-size:17px;
    font-weight:900;
    overflow-wrap:anywhere;
}

.fsc-constants {
    margin-top:22px;
    padding-top:18px;
    border-top:1px solid rgba(255,255,255,.08);
}

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

.fsc-constant-grid button {
    min-height:54px;
    padding:9px 10px;
    color:var(--fsc-text);
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.075);
    border-radius:11px;
    font-size:16px;
    font-weight:900;
}

.fsc-constant-grid button small {
    display:block;
    margin-top:3px;
    color:var(--fsc-muted);
    font-size:10px;
    font-weight:700;
}

.fsc-constant-grid button:hover {
    border-color:var(--fsc-border);
    box-shadow:0 0 16px color-mix(in srgb,var(--fsc-primary) 9%,transparent);
}

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

    .fsc-history-panel {
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:18px;
    }

    .fsc-history-heading {
        grid-column:1/-1;
    }

    .fsc-history-list {
        margin-top:0;
    }

    .fsc-constants {
        margin-top:0;
        padding-top:0;
        border-top:0;
    }
}

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

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

    .fsc-header-tools {
        margin-left:82px;
    }

    .fsc-small-label {
        display:none;
    }

    .fsc-keypad {
        gap:7px;
    }

    .fsc-key {
        min-height:48px;
        padding:7px 3px;
        font-size:13px;
        border-radius:11px;
    }

    .fsc-history-panel {
        grid-template-columns:1fr;
    }

    .fsc-history-heading {
        grid-column:auto;
    }

    .fsc-mode {
        min-width:46px;
        padding:7px;
    }
}

@media (max-width:430px) {
    .fsc-topbar {
        align-items:flex-start;
    }

    .fsc-status {
        display:none;
    }

    .fsc-display {
        min-height:118px;
        padding:16px 14px;
    }

    .fsc-key {
        min-height:45px;
        font-size:12px;
    }
}

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