:root {
    --sidebar-width: 250px;
    --sidebar-bg: #171b26;
    --sidebar-text: #aab0c0;
    --sidebar-text-active: #ffffff;
    --sidebar-accent: #4f7cff;

    --bg: #f4f6fb;
    --surface: #ffffff;
    --border: #e4e7ef;
    --text: #1c2130;
    --muted: #6b7280;

    --success: #16a34a;
    --danger: #dc2626;
    --warning: #d97706;
    --info: #4f7cff;

    --radius: 10px;
    --shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 3px rgba(16, 24, 40, 0.06);
}

* {
    box-sizing: border-box;
}

html, body {
    height: 100%;
}

body {
    margin: 0;
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: var(--bg);
    color: var(--text);
    font-size: 14px;
    line-height: 1.5;
    /* Sayfanın en altına/üstüne ulaşınca mobil tarayıcıların "rubber-band" geri sıçramasını yumuşatır. */
    overscroll-behavior-y: contain;
}

.app-shell {
    display: flex;
    min-height: 100vh;
    /* Mobilde adres çubuğu kaydırırken kapanıp açıldığında statik 100vh anlık değişir; sayfanın en altına
       inildiğinde bu, tarayıcının scroll konumunu üste "sıçratmasına" yol açabiliyordu. dvh (dynamic viewport
       height) tarayıcı arayüzündeki değişimi hesaba katar - desteklemeyen tarayıcılarda bu satır yok sayılır. */
    min-height: 100dvh;
}

/* Sidebar */
.sidebar {
    width: var(--sidebar-width);
    flex-shrink: 0;
    background: var(--sidebar-bg);
    display: flex;
    flex-direction: column;
    padding: 20px 0;
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 20px 20px;
    color: #fff;
    font-weight: 600;
    font-size: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    margin-bottom: 12px;
}

.sidebar-brand i {
    color: var(--sidebar-accent);
    font-size: 20px;
}

.sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0 10px;
}

.sidebar-group-title {
    padding: 16px 14px 6px;
    color: rgba(255, 255, 255, 0.35);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.sidebar-group-title:first-child {
    padding-top: 4px;
}

.sidebar-nav .nav-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: 8px;
    color: var(--sidebar-text);
    text-decoration: none;
    font-weight: 500;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.sidebar-nav .nav-link i {
    font-size: 16px;
    width: 18px;
    text-align: center;
}

.sidebar-nav .nav-link:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--sidebar-text-active);
}

.sidebar-nav .nav-link.active {
    background: var(--sidebar-accent);
    color: #fff;
}

.sidebar-footer {
    margin-top: auto;
    padding: 14px 20px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.sidebar-user-info {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    color: var(--sidebar-text-active);
    font-size: 13px;
    font-weight: 500;
    padding: 10px 0;
}

.sidebar-user-info .badge-role {
    background: rgba(79, 124, 255, 0.2);
    color: #cdd8ff;
}

.sidebar-footer-link {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--sidebar-text);
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    padding: 8px 0;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    width: 100%;
    text-align: left;
}

.sidebar-footer-link:hover {
    color: var(--sidebar-text-active);
}

.sidebar-footer form {
    margin: 0;
}

/* Sidebar toggle (mobil) ve off-canvas arka planı */
.sidebar-backdrop {
    display: none;
}

.topbar-left {
    display: none;
    align-items: center;
    gap: 10px;
}

.sidebar-toggle-btn {
    display: none;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    font-size: 18px;
    cursor: pointer;
}

.topbar-brand-mobile {
    display: none;
    font-weight: 600;
    font-size: 14px;
    color: var(--text);
}

/* Main area */
.main-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.topbar {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    padding: 18px 28px;
}

.topbar h1 {
    font-size: 18px;
    font-weight: 600;
    margin: 0;
}

.content {
    padding: 24px 28px;
    flex: 1;
}

/* Card */
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 20px;
    margin-bottom: 20px;
}

.card-title {
    font-size: 15px;
    font-weight: 600;
    margin: 0 0 16px;
}

/* Form */
.form-grid {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    align-items: flex-start;
}

.symbol-info-line {
    display: flex;
    flex-wrap: wrap;
    gap: 3px 10px;
    font-size: 12px;
    color: var(--muted);
}

.symbol-info-line [data-clickable-price] {
    cursor: pointer;
    text-decoration: underline dotted;
}

.direction-toggle {
    display: flex;
    gap: 8px;
}

.direction-btn {
    flex: 1;
    padding: 9px 16px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.direction-btn.active-long {
    background: var(--success);
    border-color: var(--success);
    color: #fff;
}

.direction-btn.active-short {
    background: var(--danger);
    border-color: var(--danger);
    color: #fff;
}

/* Coin seçim modalı: mobilde <datalist> güvenilir açılmadığı için özel bir arama + liste modalı kullanılır. */
.coin-picker-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    cursor: pointer;
    text-align: left;
}

.coin-picker-trigger .placeholder {
    color: var(--muted);
}

.coin-picker-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    z-index: 3000;
}

.coin-picker-overlay.hidden {
    display: none;
}

.coin-picker-modal {
    background: var(--surface);
    border-radius: 16px 16px 0 0;
    width: 100%;
    max-width: 480px;
    /* vh yerine overlay'in kendi (JS ile visualViewport'a göre ayarlanan) yüksekliğinin yüzdesi kullanılır -
       aksi halde mobilde klavye açıldığında modal, görünmeyen (klavyenin arkasında kalan) alana göre boyutlanırdı. */
    max-height: calc(100% - 24px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

@media (min-width: 640px) {
    .coin-picker-overlay {
        align-items: center;
    }

    .coin-picker-modal {
        border-radius: 16px;
        max-height: 70vh;
    }
}

.coin-picker-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
}

.coin-picker-header .card-title {
    margin: 0;
}

.coin-picker-close {
    border: none;
    background: none;
    color: var(--muted);
    font-size: 20px;
    cursor: pointer;
    line-height: 1;
    padding: 4px;
}

.coin-picker-search-wrap {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
}

.coin-picker-search-wrap input {
    width: 100%;
}

.coin-picker-list {
    overflow-y: auto;
    flex: 1;
    padding: 6px 0;
}

.coin-picker-item {
    display: block;
    width: 100%;
    text-align: left;
    padding: 12px 16px;
    border: none;
    background: none;
    color: var(--text);
    font-size: 14px;
    cursor: pointer;
}

.coin-picker-item:hover,
.coin-picker-item.highlighted {
    background: var(--hover-bg, rgba(79, 124, 255, 0.08));
}

.coin-picker-empty {
    padding: 24px 16px;
    text-align: center;
    color: var(--muted);
    font-size: 13px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-group label {
    font-weight: 500;
    font-size: 13px;
    color: var(--muted);
}

.form-control, select.form-control {
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 9px 12px;
    font-size: 14px;
    font-family: inherit;
    color: var(--text);
    background: var(--surface);
    min-width: 180px;
}

.form-control:focus, select.form-control:focus {
    outline: none;
    border-color: var(--sidebar-accent);
    box-shadow: 0 0 0 3px rgba(79, 124, 255, 0.15);
}

.field-error {
    color: var(--danger);
    font-size: 12px;
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: none;
    border-radius: 8px;
    padding: 10px 18px;
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    text-decoration: none;
}

.btn-primary {
    background: var(--sidebar-accent);
    color: #fff;
}

.btn-primary:hover {
    background: #3d68e8;
}

.btn-secondary {
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
}

.btn-secondary:hover {
    background: var(--bg);
}

/* Uzun süren AJAX işlemlerinde (ör. Spot-Futures Botu "Kaldıracı Tüm Coinlere Uygula") buton içi ikonu döndürür. */
.spin {
    display: inline-block;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Stat tiles (ör. Pair Bot hesap özeti) */
.stat-grid {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.stat-tile {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 180px;
    flex: 1;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 14px 16px;
}

.stat-label {
    font-size: 12px;
    color: var(--muted);
    font-weight: 500;
}

.stat-value {
    font-size: 20px;
    font-weight: 700;
}

/* Tabs */
.tab-nav {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.tab-nav-scroll {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.tab-btn {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 600;
    color: var(--muted);
    cursor: pointer;
    font-family: inherit;
    white-space: nowrap;
}

.tab-btn:hover {
    color: var(--text);
}

.tab-btn.active {
    color: var(--sidebar-accent);
    border-bottom-color: var(--sidebar-accent);
}

.tab-pane {
    display: none;
}

.tab-pane.active {
    display: block;
}

/* Table */
.table {
    width: 100%;
    border-collapse: collapse;
}

.table th, .table td {
    text-align: left;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
}

.table th {
    color: var(--muted);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.03em;
}

.table th.sortable {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

.table th.sortable:hover {
    color: var(--text);
}

.table th.sortable::after {
    content: '\2195';
    margin-left: 4px;
    opacity: 0.4;
}

.table th.sortable[data-sort-dir='desc']::after {
    content: '\2193';
    opacity: 1;
}

.table th.sortable[data-sort-dir='asc']::after {
    content: '\2191';
    opacity: 1;
}

/* Badge */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
}

.badge-pending { background: #eef2ff; color: #4338ca; }
.badge-running { background: #fff7ed; color: var(--warning); }
.badge-completed { background: #ecfdf5; color: var(--success); }
.badge-failed { background: #fef2f2; color: var(--danger); }

/* Toggle switch (açık/kapalı anahtarlar için) - checkbox'ı görsel olarak gizleyip yerine büyük, yeşil/kırmızı bir anahtar çizer */
.toggle-switch {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
}

.toggle-switch input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-switch-track {
    position: relative;
    width: 52px;
    height: 28px;
    flex-shrink: 0;
    border-radius: 999px;
    background: var(--danger);
    transition: background-color 0.2s ease;
}

.toggle-switch-track::before {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    transition: transform 0.2s ease;
}

.toggle-switch input:checked + .toggle-switch-track {
    background: var(--success);
}

.toggle-switch input:checked + .toggle-switch-track::before {
    transform: translateX(24px);
}

.toggle-switch input:focus-visible + .toggle-switch-track {
    outline: 2px solid var(--info);
    outline-offset: 2px;
}

.toggle-switch-label {
    font-weight: 600;
}

.toggle-switch-label-on,
.toggle-switch-label-off {
    display: none;
}

.toggle-switch input:checked ~ .toggle-switch-label .toggle-switch-label-on { display: inline; color: var(--success); }
.toggle-switch input:not(:checked) ~ .toggle-switch-label .toggle-switch-label-off { display: inline; color: var(--danger); }

/* Progress */
.progress {
    width: 100%;
    height: 8px;
    background: var(--border);
    border-radius: 999px;
    overflow: hidden;
}

.progress-bar {
    height: 100%;
    background: var(--sidebar-accent);
    transition: width 0.3s ease;
}

/* Yüzdesi bilinmeyen (tek bir istek gibi ilerlemesi ölçülemeyen) işlemler için: sabit genişlikte bir blok
   konteyner içinde sürekli sağa doğru kayar - "bir şey oluyor" hissi verir, sahte bir yüzde göstermez. */
.progress-bar-indeterminate {
    height: 100%;
    width: 40%;
    background: var(--sidebar-accent);
    border-radius: 999px;
    animation: progress-indeterminate-slide 1.1s ease-in-out infinite;
}

@keyframes progress-indeterminate-slide {
    0% { margin-left: -40%; }
    100% { margin-left: 100%; }
}

.log-panel {
    background: #0f1220;
    color: #cfd6ea;
    border-radius: 8px;
    padding: 14px 16px;
    font-family: "Consolas", "SFMono-Regular", monospace;
    font-size: 12.5px;
    max-height: 320px;
    overflow-y: auto;
    white-space: pre-wrap;
}

.muted {
    color: var(--muted);
}

/* Login */
.login-body {
    background: var(--sidebar-bg);
}

.login-wrapper {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.login-card {
    width: 100%;
    max-width: 360px;
    padding: 32px;
}

.login-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text);
    font-weight: 600;
    font-size: 16px;
    margin-bottom: 24px;
}

.login-brand i {
    color: var(--sidebar-accent);
    font-size: 22px;
}

.login-title {
    font-size: 20px;
    font-weight: 600;
    margin: 0 0 20px;
}

.login-card form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.login-card .form-group {
    width: 100%;
}

.login-card .form-control {
    width: 100%;
}

.login-submit {
    width: 100%;
    justify-content: center;
    margin-top: 4px;
}

.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Sekmeler: mobilde yatay sıkışan tab-nav yerine dropdown (site.js tarafından otomatik oluşturulur) */
.tab-select {
    display: none;
}

/* Toast bildirimleri: sağ üstte belirir, birkaç saniye sonra kendiliğinden kaybolur */
.toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 360px;
    max-width: calc(100vw - 40px);
}

.toast {
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: 0 12px 28px rgba(16, 24, 40, 0.16), 0 4px 10px rgba(16, 24, 40, 0.08);
    border-radius: 12px;
    padding: 14px 16px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    opacity: 0;
    transform: translateX(24px);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.toast.toast-visible {
    opacity: 1;
    transform: translateX(0);
}

.toast-icon {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    background: rgba(22, 163, 74, 0.12);
    color: var(--success);
}

.toast.toast-error .toast-icon {
    background: rgba(220, 38, 38, 0.12);
    color: var(--danger);
}

.toast-message {
    flex: 1;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--text);
    line-height: 1.45;
    padding-top: 5px;
}

.toast-close {
    flex-shrink: 0;
    background: none;
    border: none;
    color: var(--muted);
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    padding: 4px;
    margin: -4px -4px 0 0;
}

.toast-close:hover {
    color: var(--text);
}

/* Hesap özeti kartı (Pair Bot): mobilde açılır/kapanır */
.account-summary-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.account-summary-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: var(--muted);
    font-size: 18px;
    cursor: pointer;
    padding: 4px;
}

/* Responsive: mobile / narrow viewports */
@media (max-width: 768px) {
    .app-shell {
        flex-direction: column;
        min-height: 0;
    }

    /* iOS Safari, font-size'ı 16px'in altında olan bir input/select'e odaklanınca sayfayı otomatik
       yakınlaştırır - viewport meta'daki user-scalable=no bu davranışı engellemez, çünkü pinch-zoom değil
       ayrı bir "odaklanma zoom'u" mekanizmasıdır. Masaüstündeki 14px boyutu (.form-control) korunur,
       yalnızca mobilde 16px'e çıkarılır. */
    .form-control, select.form-control {
        font-size: 16px;
    }

    /* Sidebar: statik sütundan, hamburger ile açılıp kapanan off-canvas panele döner */
    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        width: 260px;
        max-width: 82vw;
        height: 100vh;
        height: 100dvh;
        z-index: 1000;
        transform: translateX(-100%);
        transition: transform 0.25s ease;
        overflow-y: auto;
    }

    .sidebar.sidebar-open {
        transform: translateX(0);
    }

    .sidebar-backdrop {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(15, 18, 32, 0.5);
        z-index: 999;
    }

    .sidebar-backdrop.visible {
        display: block;
    }

    .topbar-left {
        display: flex;
        order: -1;
    }

    .sidebar-toggle-btn {
        display: inline-flex;
    }

    .topbar-brand-mobile {
        display: inline-block;
    }

    .topbar h1 {
        order: 2;
        font-size: 15px;
        margin-left: auto;
        text-align: right;
    }

    .topbar {
        padding: 14px 16px;
    }

    .content {
        padding: 16px;
        /* iOS Chrome/Safari'de aşağı kaydırırken adres çubuğu kapanıp gerçek görünür alan büyüdüğü için, sayfanın
           tam sonundaki bir öğeye (ör. "Kaydet" butonu) dokunmak adres çubuğunun tam kapanma anına denk gelmek
           zorunda kalıyordu. Altta bolca boşluk bırakmak, o butonu sayfanın kesin sonuna yapıştırmak yerine
           rahatça ulaşılabilir bir kaydırma konumuna taşır. env(...) çentikli/gesture-bar'lı cihazlarda ek pay sağlar. */
        padding-bottom: calc(96px + env(safe-area-inset-bottom));
    }

    .form-grid {
        gap: 12px;
    }

    .form-control, select.form-control {
        min-width: 0;
        width: 100%;
        /* iOS Safari, font-size 16px'in altındaki input'lara dokununca sayfayı otomatik yakınlaştırır;
           viewport'taki user-scalable=no bazı sürümlerde bunu engellemiyor - 16px bu davranışı önler. */
        font-size: 16px;
    }

    .card {
        padding: 16px;
    }

    .table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }

    /* Pozisyon listeleri (Pair Bot / Spot-Futures Botu, Açık Pozisyonlar + Geçmiş): satır yerine, her pozisyonu
       kendi kutusunda "alan: değer" biçiminde gösteren kart listesine döner - yatay kaydırmalı dar tablo yerine. */
    .table.table-cards {
        display: block;
        overflow-x: visible;
        white-space: normal;
        border: none;
    }

    .table.table-cards thead {
        display: none;
    }

    .table.table-cards tbody {
        display: block;
    }

    .table.table-cards tr {
        display: block;
        border: 1px solid var(--border);
        border-radius: var(--radius);
        padding: 12px 14px;
        margin-bottom: 12px;
        background: var(--surface);
    }

    .table.table-cards tr:last-child {
        margin-bottom: 0;
    }

    .table.table-cards td {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 12px;
        padding: 6px 0;
        border: none;
        text-align: right;
    }

    .table.table-cards td::before {
        content: attr(data-label);
        font-weight: 600;
        color: var(--muted);
        text-align: left;
        flex-shrink: 0;
    }

    .table.table-cards td.table-cards-action {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        border-top: 1px solid var(--border);
        margin-top: 4px;
        padding-top: 10px;
    }

    .table.table-cards td.table-cards-action::before {
        content: none;
    }

    .table.table-cards td.table-cards-action > * {
        margin-right: 0 !important;
        width: 100%;
    }

    .table.table-cards td.table-cards-action form {
        display: block !important;
    }

    .table.table-cards td.table-cards-action form button {
        width: 100%;
    }

    /* Sekmeler: yatay tab-nav yerine dropdown */
    .tab-nav {
        display: none;
    }

    .tab-select {
        display: block;
        width: 100%;
        margin-bottom: 16px;
    }

    /* Hesap özeti kartı: varsayılan kapalı, buton ile açılır */
    .account-summary-toggle {
        display: inline-flex;
    }

    [data-account-summary-content] {
        display: none;
        margin-top: 12px;
    }

    [data-account-summary-content].expanded {
        display: flex;
    }

    /* Tarama durumu kartı (Spot-Futures Botu): mobilde varsayılan kapalı, buton ile açılır */
    [data-loop-status-content] {
        display: none;
        margin-top: 12px;
    }

    [data-loop-status-content].expanded {
        display: flex;
    }

    .toast-container {
        top: 10px;
        right: 10px;
        left: 10px;
        width: auto;
        max-width: none;
    }
}