/* =========================================================
   Kuncham Controls — Glassmorphism for the embedded
   engineering simulator (engineering-calculators/toolkit).
   Surface treatment only; loaded after the page's own <style>.
   Embedded mode (?embed=1) is transparent so the parent page's
   glass backdrop shows through; standalone mode gets its own.
   ========================================================= */
:root {
    --panel: rgba(255,255,255,.56);
    --panel-2: rgba(255,255,255,.40);
    --border: rgba(255,255,255,.72);
    --shadow: 0 12px 34px rgba(14,79,127,.13), inset 0 1px 0 rgba(255,255,255,.9);
}
body.kc-toolkit-full {
    background:
        radial-gradient(60vmax 46vmax at 4% 2%,   rgba(70,120,170,.09), rgba(70,120,170,0) 70%),
        radial-gradient(56vmax 44vmax at 96% 96%, rgba(70,130,160,.07), rgba(70,130,160,0) 70%),
        linear-gradient(160deg, #f6f8fb 0%, #eef2f6 50%, #f4f6f9 100%) fixed !important;
}
body.kc-toolkit-embed { background: transparent !important; }

.panel,
.outcard,
.explain-card,
.sim-chip,
.live-slider,
.sim-trend-wrap,
.current-input-token,
.formula-box {
    border-color: rgba(255,255,255,.75) !important;
}
.panel {
    background:
        linear-gradient(118deg, rgba(255,255,255,.62) 0%, rgba(255,255,255,.18) 32%, rgba(255,255,255,0) 58%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .30  0 0 0 0 .38  0 0 0 0 .48  0 0 0 .7 -.30'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
        linear-gradient(160deg, rgba(255,255,255,.66), rgba(255,255,255,.36)) !important;
    -webkit-backdrop-filter: blur(22px) saturate(175%);
    backdrop-filter: blur(22px) saturate(175%);
    box-shadow:
        inset 1.5px 1.5px 0 rgba(255,255,255,.95),
        inset -1px -1px 0 rgba(255,255,255,.38),
        inset 0 0 26px rgba(255,255,255,.38),
        0 1px 2px rgba(20,38,58,.06), 0 12px 30px rgba(20,38,58,.11), 0 30px 56px -14px rgba(20,38,58,.15) !important;
}
/* nested surfaces: translucent fill only */
.outcard, .explain-card, .sim-chip, .live-slider, .sim-trend-wrap,
.current-input-token, .sim-control, .sim-btn, .sim-speed, .reset-btn,
.field input, .field select, .search-wrap input {
    background: rgba(255,255,255,.48) !important;
}
.field-control .unit-select { background: rgba(214,232,246,.6) !important; }
.outcard.good, .sim-chip.good { background: rgba(232,248,240,.62) !important; }
.outcard.bad,  .sim-chip.bad  { background: rgba(253,238,235,.66) !important; }
.outcard.pulse { background: rgba(226,240,251,.70) !important; }
.formula-box { background: rgba(230,242,251,.58) !important; }
.sim-head { background: rgba(255,255,255,.34) !important; }
.simulation-stage {
    background: linear-gradient(180deg, rgba(255,255,255,.46), rgba(240,247,252,.30)) !important;
}
.sim-trend { background: rgba(255,255,255,.34) !important; }
.sim-btn.primary { background: rgba(214,235,250,.75) !important; }
.sim-btn:hover, .reset-btn:hover { background: rgba(255,255,255,.80) !important; }
.field input:focus, .field select:focus {
    background: rgba(255,255,255,.85) !important;
}
.sidebar {
    background: linear-gradient(160deg, rgba(255,255,255,.80), rgba(236,246,252,.66)) !important;
    -webkit-backdrop-filter: blur(20px) saturate(170%);
    backdrop-filter: blur(20px) saturate(170%);
}
.tool-btn.active { background: rgba(214,232,246,.75) !important; }
.topbar {
    background: rgba(255,255,255,.72) !important;
    -webkit-backdrop-filter: blur(16px) saturate(170%);
    backdrop-filter: blur(16px) saturate(170%);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .panel { background: rgba(255,255,255,.92) !important; }
    .sidebar, .topbar { background: rgba(255,255,255,.96) !important; }
}
@media (prefers-contrast: more), (prefers-reduced-transparency: reduce) {
    .panel { background: rgba(255,255,255,.95) !important; }
}