:root {
            --fsx-font: iranyekan, system-ui, -apple-system, Segoe UI, Roboto, "Noto Sans", Arial;
            --fsx-primary: #F16136 !important;
            --fsx-primary-weak: #F57E59 !important;
            --fsx-text: #1A1A1A !important;
            --fsx-muted: #6B7280 !important;
            --fsx-bg: #F7F7F7 !important;
            --fsx-card: #FFFFFF !important;
            --fsx-border: #E5E7EB !important;
            --fsx-shadow: 0 1px 0 rgba(0, 0, 0, .03), 0 8px 24px -16px rgba(0, 0, 0, .12) !important;
        }

        .fsx {
            font-family: var(--fsx-font) !important;
            color: var(--fsx-text) !important;
            margin: 0 auto !important;
            max-width: 1200px !important;
            padding: 16px !important;
        }

        .fsx * {
            box-sizing: border-box !important;
        }

        .fsx-tabs-wrap {
            position: relative !important;
            padding-bottom: 8px !important;
        }

        .fsx-tabs {
            display: flex !important;
            gap: 8px !important;
            overflow: auto hidden !important;
            padding: 8px 48px 16px 48px !important;
            -webkit-overflow-scrolling: touch !important;
            scrollbar-width: none !important;
        }

        .fsx-tabs::-webkit-scrollbar {
            display: none !important;
        }

        .fsx-tabs-wrap::before,
        .fsx-tabs-wrap::after {
            content: "";
            position: absolute !important;
            top: 0 !important;
            bottom: 0 !important;
            width: 36px !important;
            pointer-events: none !important;
            background: linear-gradient(to left, rgba(255, 255, 255, 0), #fff) !important;
        }

        .fsx-tabs-wrap::before {
            left: 0 !important;
            transform: scaleX(-1) !important;
        }

        .fsx-tabs-wrap::after {
            right: 0 !important;
        }

        .fsx-tabnav {
            position: absolute !important;
            top: 50% !important;
            transform: translateY(-50%) !important;
            width: 32px !important;
            height: 32px !important;
            border-radius: 999px !important;
            border: 1px solid var(--fsx-border) !important;
            background: #fff !important;
            box-shadow: var(--fsx-shadow) !important;
            cursor: pointer !important;
            z-index: 2 !important;
        }

        .fsx-tabnav--left {
            left: 8px !important;
        }

        .fsx-tabnav--right {
            right: 8px !important;
        }

        .fsx-tabnav::before {
            content: "";
            position: absolute !important;
            inset: 0 !important;
            margin: auto !important;
            width: 8px !important;
            height: 8px !important;
            border: 2px solid var(--fsx-muted) !important;
            border-top: none !important;
            border-left: none !important;
            transform: rotate(-45deg) !important;
        }

        .fsx-tabnav--left::before {
            transform: rotate(135deg) !important;
        }

        .fsx-tabnav:hover {
            filter: brightness(.98) !important;
        }

        .fsx-tab {
            position: relative !important;
            display: inline-flex !important;
            align-items: center !important;
            gap: 8px !important;
            padding: 10px 14px !important;
            border: 1px solid var(--fsx-border) !important;
            background: #fff !important;
            color: var(--fsx-text) !important;
            border-radius: 999px !important;
            font-size: 14px !important;
            line-height: 24px !important;
            white-space: nowrap !important;
            cursor: pointer !important;
            transition: background .2s ease, border-color .2s ease, box-shadow .2s ease !important;
        }

        .fsx-tab:hover {
            background: #fafafa !important;
            border-color: #e2e8f0 !important;
        }

        .fsx-tab:focus-visible {
            outline: none !important;
            box-shadow: 0 0 0 3px rgba(241, 97, 54, .35) !important;
        }

        .fsx-tab.is-active {
            background: var(--fsx-primary) !important;
            color: #fff !important;
            border-color: var(--fsx-primary) !important;
        }

        .fsx-tab.is-active::after {
            content: "";
            position: absolute !important;
            inset-inline: 16px auto !important;
            bottom: -7px !important;
            height: 3px !important;
            border-radius: 999px !important;
            background: var(--fsx-primary) !important;
            opacity: .65 !important;
            width: calc(100% - 32px) !important;
        }

        .fsx-ic {
            width: 20px !important;
            height: 20px !important;
        }

        .fsx-panels {
            margin-top: 4px !important;
        }

        .fsx-panel {
            display: none !important;
        }

        .fsx-panel.is-active {
            display: block !important;
        }

        .fsx-card {
            background: var(--fsx-card) !important;
            border: 1px solid var(--fsx-border) !important;
            border-radius: 16px !important;
            padding: 16px !important;
            box-shadow: var(--fsx-shadow) !important;
        }

        .fsx-head {
            font-weight: 700 !important;t;
            line-height: 30px !important;
            margin-bottom: 12px !important;
        }

        .fsx-grid {
            display: grid !important;
            grid-template-columns: 1fr !important;
            gap: 12px !important;
        }

        @media (min-width:640px) {
            .fsx-grid {
                grid-template-columns: repeat(2, 1fr) !important;
            }
        }

        @media (min-width:1024px) {
            .fsx-grid {
                grid-template-columns: repeat(3, 1fr) !important;
            }
        }

        .fsx-field {
            display: flex !important;
            flex-direction: column !important;
            gap: 6px !important;
            background: var(--fsx-bg) !important;
            border: 1px dashed #EFEFEF !important;
            border-radius: 12px !important;
            padding: 10px !important;
        }

        .fsx-label {
            font-size: 13px !important;
            color: #494949 !important;
        }

        .fsx-input {
            height: 44px !important;
            border: 1px solid var(--fsx-border) !important;
            border-radius: 10px !important;
            padding: 0 12px !important;
            font-size: 14px !important;
            background: #fff !important;
        }

        .fsx-input:focus {
            outline: none !important;
            border-color: var(--fsx-primary) !important;
            box-shadow: 0 0 0 2px rgba(241, 97, 54, .15) !important;
        }

        .fsx-actions {
            display: flex !important;
            flex-direction: column !important;
            gap: 10px !important;
            margin-top: 14px !important;
        }

        @media (min-width:768px) {
            .fsx-actions {
                flex-direction: row !important;
                align-items: center !important;
            }
        }

        .fsx-btn {
            min-width: 140px !important;
            height: 46px !important;
            border: none !important;
            border-radius: 12px !important;
            padding: 0 16px !important;
            font-weight: 700 !important;
            color: #fff !important;
            background: var(--fsx-primary) !important;
            cursor: pointer !important;
            transition: filter .15s ease, background .15s ease !important;
        }

        .fsx-btn.is-reset {
            background: var(--fsx-primary-weak) !important;
        }

        .fsx-btn:hover {
            filter: brightness(.98) !important;
        }

        .fsx-result {
            background: #FFF5EF !important;
            border: 1px solid #FFD9CC !important;
            border-radius: 12px !important;
            padding: 10px 14px !important;
            display: inline-flex !important;
            align-items: center !important;
            gap: 8px !important;
        }

        .fsx-result-row {
            display: flex !important;
            align-items: baseline !important;
            gap: 10px !important;
        }

        .fsx-result-title {
            color: #7A7A7A !important;
            font-size: 13px !important;
        }

        .fsx-num {
            font-weight: 800 !important;
            font-size: 18px !important;
            color: #1A1A1A !important;
        }

        .fsx-unit {
            font-weight: 500 !important;
            font-size: 13px !important;
            color: #6B6B6B !important;
        }

        @media (prefers-color-scheme: dark) {
            :root {
                --fsx-bg: #14161a !important;
                --fsx-card: #1b1e23 !important;
                --fsx-border: #2a2f3a !important;
                --fsx-text: #f6f6f6 !important;
            }

            .fsx-tab {
                background: #20232a !important;
                color: #eaeaea !important;
                border-color: #2a2f3a !important;
            }

            .fsx-tab:hover {
                background: #242833 !important;
            }

            .fsx-input {
                background: #111317 !important;
                border-color: #2a2f3a !important;
                color: #eaeaea  !important;
            }

            .fsx-label {
                color: #c9c9c9 !important;
            }

            .fsx-result {
                background: rgba(241, 97, 54, .08) !important;
                border-color: rgba(241, 97, 54, .25) !important;
            }
        }

.fsx-input{ border-radius:4px !important; }
.fsx-btn{ border-radius:4px !important; }


.fsx-out{
  display:none !important;              
  background:#FFF5EF !important;        
  border:1px solid #FDE6DC !important;
  padding:10px 12px !important;
  border-radius:4px !important;
  align-items:baseline !important;
  gap:6px !important;
  font-size:14px !important;
}
.fsx-out.is-visible{ display:inline-flex !important; }


.fsx-out .fsx-out-num{ font-weight:800 !important; font-size:18px !important; line-height:1 !important; }
.fsx-out .fsx-out-unit{ font-weight:500 !important; font-size:13px !important; opacity:.9 !important; }


.fsx-btn.recalc{
  background:#F58E6B !important;         
  filter:none !important;
}
.fsx-btn.recalc:hover{ filter:brightness(.98) !important; }