/* StreamDrop v0.4 CDN UX layer: CDN kütüphanelerinin panel tasarımıyla uyumlu görünmesi için yazıldı. */
:root {
    --font-display: Outfit, Inter, "Segoe UI", Arial, sans-serif;
    --safe-bottom: env(safe-area-inset-bottom, 0px);
}

body {
    font-family: Inter, "Segoe UI", Tahoma, Arial, sans-serif;
    text-rendering: geometricPrecision;
}

h1,
h2,
h3,
.brand {
    font-family: var(--font-display);
}

.status-card {
    margin-top: 16px;
    border-radius: 20px;
    padding: 16px;
    background: rgba(255, 255, 255, .50);
    border: 1px solid rgba(255, 255, 255, .58);
    box-shadow: 0 10px 24px rgba(64, 56, 39, .08);
}

.icon-btn {
    width: 42px;
    height: 42px;
    display: inline-grid;
    place-items: center;
    border: 1px solid rgba(72, 96, 128, .14);
    border-radius: 14px;
    color: #39516f;
    background: rgba(255, 255, 255, .72);
    box-shadow: 0 8px 20px rgba(40, 54, 77, .08);
}

.icon-btn i,
.btn i {
    line-height: 1;
}

.mobile-menu {
    display: none;
    flex: 0 0 auto;
}

.sidebar-backdrop {
    position: fixed;
    inset: 0;
    z-index: 79;
    opacity: 0;
    background: rgba(23, 32, 50, .42);
    backdrop-filter: blur(5px);
    transition: opacity .18s ease;
}

.sidebar-backdrop.is-visible {
    opacity: 1;
}

body.menu-open {
    overflow: hidden;
}

.btn {
    gap: 8px;
    transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}

.btn:active,
.icon-btn:active {
    transform: translateY(1px) scale(.99);
}

.section-card,
.hero-copy,
.hero-preview,
.sidebar {
    will-change: transform;
}

.chart-box {
    grid-column: 1 / -1;
    min-height: 320px;
}

#scoreChart {
    min-height: 245px;
    width: 100%;
}

.chart-empty {
    min-height: 230px;
    display: grid;
    place-items: center;
    border-radius: 18px;
    color: rgba(70, 85, 107, .62);
    font-weight: 850;
    background: rgba(246, 251, 255, .74);
}

.apexcharts-tooltip,
.apexcharts-xaxistooltip,
.apexcharts-menu {
    border-radius: 12px !important;
    border: 1px solid rgba(72, 96, 128, .14) !important;
    box-shadow: 0 14px 34px rgba(35, 58, 92, .13) !important;
    overflow: hidden;
}

.choices {
    margin: 0;
}

.choices__inner {
    min-height: 46px;
    border: 1px solid rgba(72, 96, 128, .18) !important;
    border-radius: 14px !important;
    background: rgba(255, 255, 255, .82) !important;
    color: #435c7a;
    box-shadow: inset 0 1px 2px rgba(0,0,0,.03);
}

.choices.is-focused .choices__inner,
.choices.is-open .choices__inner {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 4px rgba(91,142,234,.14);
}

.choices__list--dropdown,
.choices__list[aria-expanded] {
    z-index: 85;
    border: 1px solid rgba(72, 96, 128, .16) !important;
    border-radius: 16px !important;
    background: rgba(255, 255, 255, .96) !important;
    box-shadow: 0 18px 42px rgba(34, 45, 65, .16);
    overflow: hidden;
}

.choices__item--choice {
    color: #405a78;
    font-weight: 650;
}

.choices__item--choice.is-highlighted {
    background: rgba(91, 142, 234, .12) !important;
    color: #2855a3;
}

.tippy-box[data-theme~='light-border'] {
    color: #344b68;
    border-radius: 14px;
    border-color: rgba(72, 96, 128, .16);
    box-shadow: 0 14px 34px rgba(35, 58, 92, .13);
    font-weight: 700;
}

.sd-toast.toastify {
    border-radius: 999px;
    padding: 12px 18px;
    color: #fff;
    border: 1px solid rgba(255,255,255,.24);
    box-shadow: 0 16px 40px rgba(34, 45, 65, .22);
    background: linear-gradient(135deg, #2f4464, #405a78) !important;
    font-weight: 850;
}

.sd-toast-success.toastify {
    background: linear-gradient(135deg, #139a72, #25b981) !important;
}

.sd-toast-warn.toastify {
    background: linear-gradient(135deg, #b96b00, #f59e0b) !important;
}

.swal2-popup.sd-swal-popup {
    border-radius: 24px;
    background: rgba(255, 252, 240, .98);
    color: #344b68;
    box-shadow: 0 24px 70px rgba(55, 38, 15, .24);
}

.swal2-title {
    font-family: var(--font-display);
}

.swal2-styled.sd-swal-confirm,
.swal2-styled.sd-swal-cancel {
    border-radius: 14px !important;
    padding: 12px 18px !important;
    font-weight: 900 !important;
}

.swal2-styled.sd-swal-confirm {
    background: linear-gradient(135deg, var(--danger), #fb7185) !important;
}

.swal2-styled.sd-swal-cancel {
    color: #405a78 !important;
    background: rgba(255, 255, 255, .78) !important;
}

.live-log::-webkit-scrollbar,
body::-webkit-scrollbar {
    width: 10px;
}

.live-log::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(91,142,234,.42);
}

@supports (padding: max(0px)) {
    .toastify,
    .toast {
        margin-bottom: var(--safe-bottom);
    }
}