/* ═══════════════════════════════════════════════════════════════════════════
   responsive.css — Mobil responsive override katmanı
   En son yüklenen stylesheet (XcaliburApp::setup_css sırasının sonunda).
   Amaç: tüm ekranları mobilde özellik kaybı olmadan tek kolona akıtmak.

   Breakpoint konvansiyonu (proje geneli):
     - 760px : birincil mobil eşik (içerik tek kolon, tablo kart-modu, nav toggle)
     - 900px : grid 2->1 kolon collapse (landing/pricing/dashboard kartları)
     - 480px : çok dar telefon ince ayarları

   C++ FIRST notu: yapı/veri/genişlik C++ tarafında üretilir; bu dosya yalnızca
   viewport'a tepkiyen görsel akışı (Wt'nin viewport-reaktif API'si yok) yönetir.

   Özgüllük notu: tablo kuralları `table.card-mobile.card-mobile` ile (çift
   class -> 0,2,1) yazılır; bu xcalibur.css'teki `.recordings-table.sortable-table`
   (0,2,0) min-width dayatmalarını ezer ve hem SortableTable hem düz WTable
   (LiveSpaces/Quotas/Management) için aynı kuralları çalıştırır.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────────────────────────────────
   TABLO KART-MODU (SortableTable + düz WTable)
   C++ tarafı: tabloya .card-mobile sınıfı (SortableTable.cpp veya
   apply_table_card_mobile() yardımcısı), her gövde hücresine
   data-label="<kolon başlığı>", header satırına .sortable-header-row,
   filtre satırına (varsa) .sortable-filter-row eklenir.
   Mobilde: kolon başlık satırı gizlenir, her gövde satırı dikey kart olur,
   her hücre "ETIKET ........ değer" satırına döner. Hiçbir kolon/aksiyon
   gizlenmez — yalnızca yeniden akıtılır.
   ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 760px) {

    /* min-width dayatmasını kaldır: yatay scroll yerine dikey akış */
    table.card-mobile.card-mobile {
        min-width: 0 !important;
        width: 100% !important;
        display: block !important;
    }

    /* Kart-modu tablonun wrapper'ı yatay kaymaya gerek duymaz */
    .sortable-table-wrapper,
    .live-spaces-table-wrap {
        overflow-x: hidden !important;
    }

    /* Mobilde tablo kart-moduna döner ve doğal akışta uzar; masaüstündeki
       viewport-fit max-height (calc(100vh - 240px)) burada gereksiz/zararlı
       olur — iptal edilir ki sayfa kendi içinde kayabilsin. */
    .live-spaces-table-wrap {
        max-height: none !important;
    }

    table.card-mobile.card-mobile thead,
    table.card-mobile.card-mobile tbody {
        display: block !important;
        width: 100% !important;
    }

    /* Kolon başlık satırı gizlenir — etiketler kartlara taşındı */
    table.card-mobile.card-mobile thead .sortable-header-row {
        display: none !important;
    }

    /* Filtre satırı (SortableTable): kart olmaz, yatay sarılabilir filtre bar'ı */
    table.card-mobile.card-mobile thead .sortable-filter-row {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        padding: 10px !important;
        min-width: 0 !important;
    }
    table.card-mobile.card-mobile thead .sortable-filter-row > .table-filter-cell {
        display: block !important;
        flex: 1 1 140px !important;
        min-width: 0 !important;
        padding: 0 !important;
        border: none !important;
    }
    table.card-mobile.card-mobile thead .sortable-filter-row > .table-filter-cell-full {
        flex: 1 1 100% !important;
    }
    table.card-mobile.card-mobile thead .sortable-filter-row .form-control,
    table.card-mobile.card-mobile thead .sortable-filter-row .Wt-edit,
    table.card-mobile.card-mobile thead .sortable-filter-row .Wt-combobox {
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Her gövde satırı = kart */
    table.card-mobile.card-mobile tbody tr {
        display: block !important;
        width: 100% !important;
        margin: 0 0 12px 0 !important;
        padding: 2px 0 !important;
        border: 1px solid rgba(255, 255, 255, 0.09) !important;
        border-radius: 8px !important;
        background: rgba(255, 255, 255, 0.025) !important;
        box-sizing: border-box !important;
    }

    /* Her hücre = "ETIKET ....... değer" satırı.
       Değer kısa ise etiketle aynı satırda sağda; uzun/zengin ise (başlık +
       alt-metin gibi) flex-wrap ile etiketin altına tam genişlik akar. */
    table.card-mobile.card-mobile tbody td {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: space-between !important;
        align-items: baseline !important;
        gap: 4px 12px !important;
        width: auto !important;
        max-width: 100% !important;
        padding: 9px 13px !important;
        border: none !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
        text-align: right !important;
        white-space: normal !important;
        word-break: break-word !important;
        overflow-wrap: anywhere !important;
    }
    table.card-mobile.card-mobile tbody td:last-child {
        border-bottom: none !important;
    }

    /* Etiket sütunu — C++ data-label içeriği */
    table.card-mobile.card-mobile tbody td::before {
        content: attr(data-label);
        flex: 0 0 auto;
        text-align: left;
        color: #2A9FD6;
        font-size: 11px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        white-space: normal;
    }

    /* Değer içeriği etiketin sağına yaslanır; sığmazsa alt satıra tam genişlik
       sarar (zengin hücrelerde alt-metin sıkışıp dikey kırılmaz). */
    table.card-mobile.card-mobile tbody td > * {
        margin-left: auto;
        min-width: 0;
        max-width: 100%;
        overflow-wrap: anywhere;
    }

    /* Aksiyon hücreleri (başlığı boş) → tam genişlik dokunmatik bar */
    table.card-mobile.card-mobile tbody td[data-label=""],
    table.card-mobile.card-mobile tbody td:not([data-label]) {
        justify-content: center !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
    }
    table.card-mobile.card-mobile tbody td[data-label=""]::before,
    table.card-mobile.card-mobile tbody td:not([data-label])::before {
        display: none !important;
    }
    table.card-mobile.card-mobile tbody td[data-label=""] > *,
    table.card-mobile.card-mobile tbody td:not([data-label]) > * {
        margin-left: 0 !important;
        max-width: 100% !important;
    }
    table.card-mobile.card-mobile tbody td[data-label=""] .btn,
    table.card-mobile.card-mobile tbody td[data-label=""] button,
    table.card-mobile.card-mobile tbody td:not([data-label]) .btn,
    table.card-mobile.card-mobile tbody td:not([data-label]) button {
        flex: 1 1 auto !important;
        min-height: 38px !important;
    }

    /* "Kayıt yok" gibi tam-genişlik tek hücreli satırlar kart içinde ortalı */
    table.card-mobile.card-mobile tbody td[colspan]::before {
        display: none !important;
    }

    /* Yorum accordion genişleme satırı (Yorumlar kolonu): kart-modunda da tam
       genişlik blok; içindeki CommentsPanel sola yaslanır (değer-sağa itme yok).
       ::before zaten td[colspan] kuralıyla gizli. */
    table.card-mobile.card-mobile tbody td.sortable-expansion-cell {
        display: block !important;
        text-align: left !important;
        padding: 4px 13px 12px 13px !important;
    }
    table.card-mobile.card-mobile tbody td.sortable-expansion-cell > * {
        margin-left: 0 !important;
    }
    table.card-mobile.card-mobile tbody td[colspan] {
        justify-content: center !important;
        text-align: center !important;
    }
}

/* ───────────────────────────────────────────────────────────────────────────
   DIALOG — mobil güvenlik cap'i
   SettingsPage dialogları zaten C++ tarafında min(Npx, 92vw) ile responsive.
   Bu kural, dönüştürülmemiş tüm dialogları da viewport'a sığdırır (içerik
   taşmaz). setWidth(Npx) inline genişliği max-width ile etkin min(N, 94vw)
   davranışına iner; Wt merkezleme render anındaki gerçek genişliği okuduğundan
   ortalama korunur.
   ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
    .Wt-dialog,
    .modal-dialog {
        max-width: 94vw !important;
        box-sizing: border-box !important;
    }
    .Wt-dialog .Wt-dialog-body,
    .Wt-dialog .body,
    .modal-dialog .modal-body {
        max-width: 100% !important;
        overflow-x: auto !important;
    }
    /* Dialog içindeki sabit-genişlik form alanları sığsın */
    .Wt-dialog input,
    .Wt-dialog select,
    .Wt-dialog textarea,
    .Wt-dialog .form-control {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
}

/* ───────────────────────────────────────────────────────────────────────────
   ALT PLAYER PANELİ — mobil taşma düzeltmesi
   xcalibur.css mobil bloğu panele `left:8px; right:8px` veriyor (kenar boşluklu
   yüzen kart), ancak başka bir kural width'i viewport'a eşitlediği için panel
   8px sağa taşıyor (8 + 100vw = viewport+8). width:auto ile left/right çiftinin
   genişliği belirlemesini sağlarız → panel 8px gutter'lara tam oturur, taşma yok.
   ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
    .bottom-player-panel {
        width: auto !important;
        max-width: none !important;
        box-sizing: border-box !important;
    }

    /* Player kontrol şeridi (jp-interface) masaüstünde tek satır nowrap:
       controls + 1x + seek + süre + ses ~480px ister. ~320px'lik mobil panelde
       seek bar (flex:1) tüm boşluğu yutunca SÜRE (00:00/00:00) ve SES kaydırıcısı
       sağa, ekran dışına taşıyıp erişilemez oluyordu (iki kontrol kaybı = desktop'tan
       fonksiyon kaybı). Çözüm: şeridi sarmalı yap, seek bar'ı tam-genişlik alt
       satıra al → süre + ses onun altındaki satırda yan yana kalır; hiçbir kontrol
       gizlenmez (native medya oynatıcı düzeni: transport / scrubber / süre+ses).
       Yalnızca viewport-reaktif akış; kontrol ağacı ve sınıfları C++ tarafında aynı. */
    .audio-mediaplayer.jp-interface,
    .audio-mediaplayer div.jp-interface {
        flex-wrap: wrap !important;
        height: auto !important;
        row-gap: 8px !important;
        padding-top: 8px !important;
        padding-bottom: 8px !important;
    }
    .audio-mediaplayer .jp-progress,
    .audio-mediaplayer div.jp-progress {
        display: none !important;
    }
    .audio-waveform {
        flex: 1 1 100% !important;
        order: 1 !important;
    }
    .audio-mediaplayer div.jp-time-holder {
        order: 2 !important;
        margin-left: 0 !important;
    }
    .audio-mediaplayer div.jp-volume-bar {
        order: 3 !important;
    }
}

/* ───────────────────────────────────────────────────────────────────────────
   SETTINGS — yan menü + içerik düzeni mobilde dikey yığın
   Masaüstü: `[150px tab rail][esnek içerik]` flex satırı (C++ inline style).
   Mobilde bu satır 380px'i paylaşınca içerik ~190px'e sıkışıp formları
   overflow:hidden ile KESİYORDU (özellik kaybı). Çözüm: flex satırını dikey
   yığına çevir; tab rail'i üstte tam-genişlik YATAY KAYDIRILABİLİR pill bar
   yap (12 sekme tek satırda kaydırılır, hiçbiri gizlenmez); içerik stack'i
   tam genişlik alır. C++ FIRST: yapı/sınıflar C++ tarafında; bu yalnızca
   viewport-reaktif akış.
   ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
    .settings-layout {
        flex-direction: column !important;
        gap: 10px !important;
    }
    .masonry-row {
        flex-direction: column !important;
    }
    /* Tab rail üstte, tam genişlik, doğal yükseklik */
    .settings-menu-shell {
        width: 100% !important;
        flex: 0 0 auto !important;
    }
    .settings-menu-container {
        width: 100% !important;
        flex: 0 0 auto !important;
        /* Base kural .settings-menu-container'ı min/max-width:150px ile pinler;
           mobilde tam genişlik için bunu açıkça serbest bırak (yoksa pill bar
           150px'e sıkışıp sekmeler dar kalır). */
        min-width: 0 !important;
        max-width: none !important;
    }
    /* Dikey pill listesi → yatay kaydırılabilir pill bar (sekme kaybı yok) */
    .settings-menu-shell .nav-stacked {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        gap: 6px !important;
        width: 100% !important;
        -webkit-overflow-scrolling: touch;
    }
    .settings-menu-shell .nav-stacked > li {
        flex: 0 0 auto !important;
        float: none !important;
    }
    .settings-menu-shell .nav-stacked > li > a {
        white-space: nowrap !important;
        margin: 0 !important;
    }
    .settings-menu-shell .nav,
    .settings-menu-shell ul {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        gap: 6px !important;
        width: 100% !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .settings-menu-shell .nav > li,
    .settings-menu-shell ul > li {
        flex: 0 0 auto !important;
        float: none !important;
    }
    /* Masaüstü daraltma toggle'ı yatay bar'da anlamsız — gizle (sekmeler erişilir kalır) */
    .settings-menu-shell > .admin-btn {
        display: none !important;
    }
    /* İçerik stack'i tam genişlik; formlar artık kesilmez */
    .settings-layout > .Wt-stack {
        width: 100% !important;
        min-width: 0 !important;
    }

    /* Settings kartlarındaki satır-içi flex form satırları (C++ inline
       `display:flex` ile kurulu, class'sız) mobilde SARSIN: sabit genişlikli
       inputlar/butonlar alt satıra iner, hiçbiri gizlenmez veya kesilmez. */
    .settings-layout .admin-card [style*="display:flex"],
    .settings-layout .admin-field-group,
    .settings-layout .admin-toolbar,
    .settings-layout .cookie-toolbar {
        flex-wrap: wrap !important;
        min-width: 0 !important;
    }
    /* Form alanları konteynere sığsın (taşma yerine küçül) */
    .settings-layout .admin-card .form-control,
    .settings-layout .admin-card input,
    .settings-layout .admin-card select,
    .settings-layout .admin-card textarea {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
}

/* ───────────────────────────────────────────────────────────────────────────
   STANDALONE ADMIN SAYFALARI — Loglar (/management/logs), Kaynaklar
   (/management/resources), Yönetim (/management). Bunlar `.settings-layout`
   DIŞINDA `admin-card` kullanıyor; üstteki settings kuralları onları kapsamıyor.
   Mobilde: satır-içi form satırları sarsın (input/buton kaybı yok), log
   görüntüleyici kendi kutusunda yatay kaysın (sayfa taşmaz, hiçbir log satırı
   kesilmez — tam içerik scroll ile erişilir). Tablolar C++ kart-modu ile
   (apply_table_card_mobile) zaten dikey karta dönüyor. C++ FIRST: yapı C++
   tarafında; bu yalnızca viewport-reaktif görsel akış.
   ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
    /* Form satırları (form-inline) ve başlık satırları mobilde sarsın */
    .admin-card .form-inline,
    .resources-header,
    .settings-footer {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
        align-items: center !important;
        min-width: 0 !important;
    }
    /* Form alanları konteynere sığsın (taşma yerine küçül) */
    .admin-card .form-inline .form-control,
    .admin-card .form-inline input,
    .admin-card .form-inline select,
    .admin-card .form-inline textarea {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    /* Log görüntüleyici: uzun satırlar kutu içinde yatay kayar; sayfa taşmaz,
       hiçbir log satırı kesilmez (tam içerik scroll ile erişilir). */
    .log-view {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
}

/* ───────────────────────────────────────────────────────────────────────────
   "KÜÇÜLÜP KAYBOLMA" KARŞITI MOBİL TRICK'LER
   İlke: bir kontrol mobilde dar alana sıkışıp okunmaz/erişilmez hale gelecekse,
   GİZLEMEK veya ezmek yerine onu GÖRÜNÜR tutan bir mobil desen uygula:
     • Tab/chip şeritleri → yatay momentum-scroll (sekmeler kesilmez, kaydırılır)
     • Geniş canvas chart → dikey yığın + max-width:100% (taşmaz, küçülerek görünür)
     • Virtualize tablo (WTableView) → momentum yatay scroll, viewport'a sığma
   Hiçbir sekme/aksiyon/kolon kaybı yok — yalnızca erişim yöntemi dokunmatiğe uyar.
   C++ FIRST: yapı/sınıflar C++ tarafında; bu yalnızca viewport-reaktif görsel akış.
   ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 760px) {

    /* (1) TAB / CHIP ŞERİTLERİ → yatay kaydırılabilir bar.
       DİKKAT: bare `.nav-tabs` HEDEFLENMEZ — o workspace navbar drawer'ı; yalnızca
       sayfa-içi sekme şeritleri (admin sekmeleri, chat sekmeleri) alınır.
       nowrap + overflow-x:auto: sekmeler doğal dokunmatik boyutta kalır, sığmayan
       kısım parmakla kaydırılır — hiçbir sekme overflow:hidden ile kesilmez. */
    .admin-tabs,
    .chat-header-tabs {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;          /* Firefox: ince scrollbar gizle */
        gap: 6px !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    .admin-tabs::-webkit-scrollbar,
    .chat-header-tabs::-webkit-scrollbar {
        height: 0 !important;           /* WebKit: scrollbar gizle, scroll aktif */
    }
    .admin-tabs > *,
    .chat-header-tabs > * {
        flex: 0 0 auto !important;      /* çocuklar sıkışmaz, doğal boyutta kalır */
        white-space: nowrap !important;
    }

    /* (1b) GÜNDEM TOOLBAR bir sekme şeridi DEĞİL, aksiyon toolbar'ı: gün-sayısı
       spin kutusu, "Konuşmacı filtrele" ve "Yenile" butonları. Yatay scroll'a
       alınırsa birincil aksiyon (Yenile) ekran dışına kayıp gizleniyordu →
       mobilde SAR: tüm kontroller ikinci satıra taşarak görünür/erişilebilir kalır.
       Hiçbir kontrol kaybolmaz; yalnızca tek satır yerine iki satıra akar. */
    .gundem-toolbar-controls {
        display: flex !important;
        flex-wrap: wrap !important;
        overflow-x: visible !important;
        gap: 6px !important;
        row-gap: 8px !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    .gundem-toolbar-controls > * {
        flex: 0 0 auto !important;
        white-space: nowrap !important;
    }

    /* (1c) KAYIT DETAYI BAŞLIK SATIRI (rec-detail-header): geri-ok + başlık +
       Process/Analyze/Favorite/Akış aksiyonları tek flex satırında. Tüm aksiyonlar
       görünürken dar telefonda başlık flex:1 ile 0 px'e eziliyor (kayıt adı
       okunamıyor) ve son buton ekran dışına taşıyordu. Mobilde SAR ve başlığa
       tam satır ver: SATIR 1 = [geri] [başlık tam okunur], SATIR 2 = aksiyon
       butonları. Hiçbir aksiyon kaybolmaz; başlık her zaman okunur kalır. */
    .rec-detail-header {
        flex-wrap: wrap !important;
        row-gap: 8px !important;
    }
    .rec-detail-header .rec-detail-title-wrap {
        flex: 1 1 calc(100% - 46px) !important;   /* geri-ok genişliği hariç tam satır */
        min-width: 0 !important;
    }
    .rec-detail-header .rec-detail-chat-btn {
        margin-left: 0 !important;   /* auto-itme kalkar; butonlar 2. satırda paketlenir */
    }

    /* (2) GERÇEK Wt CANVAS CHART'LARI (Quota/Management/Settings).
       Yan-yana iki chart dar telefonda ezilir → dikey yığına al; canvas'ı
       viewport'a göre ölçekle (taşma/kırpılma yerine küçülerek görünür kalır).
       Min yükseklik 0'a çökmesini önler (canvas görünmez olmaz). */
    .quota-charts-row {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
    }
    .quota-chart-card,
    .quota-charts-row > * {
        width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }
    .quota-chart-card canvas,
    .quota-chart-card .Wt-chart,
    .gundem-paper canvas,
    .admin-card canvas {
        max-width: 100% !important;     /* sabit-px canvas viewport'a sığsın */
        height: auto !important;        /* oran korunur, görünür kalır */
        min-height: 160px;              /* 0'a çökmesin (chart kaybolmaz) */
    }

    /* (3) VIRTUALIZE TABLO — WTableView (Storage) kart-flip'i desteklemez
       (sanal DOM). Kolon kaybı OLMADAN: kendi viewport'unda momentum yatay
       scroll + sayfaya taşmama. Tüm kolonlar kaydırılarak erişilir. */
    .Wt-tableview {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    .Wt-tableview .Wt-tv-contents,
    .Wt-tableview .Wt-spacer,
    .Wt-itemview .Wt-tv-contents {
        -webkit-overflow-scrolling: touch;
    }
}

/* ───────────────────────────────────────────────────────────────────────────
   APP HİSSİ — dokunmatik cila (yalnızca görsel; özellik/yerleşim değişmez)
   Renk/tema/hover sınıfında kalan, native-app dokunuşu veren küçük rötuşlar.
   ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
    /* Tap sırasında gri flash kutusu (mobil Chrome/Safari) → kaldır, app gibi */
    a, button, .btn, [role="button"], .nav-link,
    .admin-btn, .sortable-header-cell, .chat-tab {
        -webkit-tap-highlight-color: transparent;
    }

    /* iPhone home-indicator / notch güvenli alanı: alt sabit barlar çakışmasın */
    .bottom-player-panel {
        padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
    }

    /* Dokunmatik hedef minimumları (Apple HIG ~44px): küçük ikon-butonlar
       parmakla isabetli tıklanır — hiçbir buton küçülüp erişilmez kalmaz. */
    .admin-btn,
    .sortable-header-cell,
    .gundem-toolbar-btn,
    .chat-tab,
    .public-mobile-link {
        min-height: 40px;
    }

    /* Momentum scroll + taşma engeli: app gibi akıcı dikey kaydırma */
    .workspace-content,
    .page-scroll,
    .settings-layout > .Wt-stack {
        -webkit-overflow-scrolling: touch;
    }
}

/* ───────────────────────────────────────────────────────────────────────────
   ERİŞİLEBİLİRLİK (görme engelliler / klavye) — GLOBAL (media query'siz)
   C++ tarafı: LayoutShell skip-link (WAnchor.skip-link → #main-content),
   navbar role=navigation, content role=main. Burası yalnızca skip-link'in
   görsel davranışı: normalde ekran dışı, klavye ile odaklanınca belirir.
   ─────────────────────────────────────────────────────────────────────────── */
.skip-link {
    position: fixed;
    top: -64px;                 /* normalde görünmez (ekran dışı) */
    left: 8px;
    z-index: 3000;              /* navbar/dialog üstünde */
    padding: 10px 18px;
    background: #2a9fd6;
    color: #fff;
    font-weight: 700;
    text-decoration: none;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
    transition: top 0.16s ease;
}
.skip-link:focus,
.skip-link:focus-visible {
    top: 0;                     /* klavye odağında üstte belirir */
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* Ekran-okuyucu-only yardımcı sınıf (görsel gizli, SR'a görünür) — ileride
   ikon-only butonlara metin etiket eklemek için. */
.sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOBİL APP-GRADE GÖRSEL KATMAN  (yalnızca ≤760px — masaüstüne dokunmaz)
   Amaç: mobil ekranlar "native app" hissi versin — yüzeyler yükseltilmiş kart
   diline gelir, başlık hiyerarşisi netleşir, durum rozetleri tutarlı pill olur,
   dokunmatik geri-besleme app gibi olur.
   C++ FIRST: yapı/boyut/görünürlük C++ ve mevcut responsive akışta yapılır;
   burası SALT görsel tema (elevation/gölge/köşe/tipografi/renk) — Wt'nin
   viewport-reaktif API'si olmadığından bu katman CSS'te meşru.
   Kısıt: mor yok; YENİ sol-kenar kart yok (mevcut sol-aksanlar üste taşınır).
   ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 760px) {

    /* (A) YÜZEY SİSTEMİ — kart yüzeyleri tek tutarlı app-kartı dili:
       hairline kenar + yumuşak yükseltilmiş gölge + 16px köşe + dikey ritim.
       (Yalnız açık "kart" sınıfları; dm-elevation gibi genel yardımcılar
       bilinçli DIŞARIDA bırakıldı — yerleşim bozulmasın.) */
    .admin-card,
    .landing-card,
    .landing-use-case,
    .signup-card,
    .pricing-card,
    .well,
    .stat-well,
    .gundem-paper,
    .quota-chart-card,
    table.card-mobile.card-mobile tbody tr {
        border-radius: 16px !important;
        border: 1px solid rgba(255, 255, 255, 0.06) !important;
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.045),
            0 10px 26px -12px rgba(0, 0, 0, 0.62) !important;
        margin-bottom: 14px !important;
    }

    /* Kart içi nefes — "nefessiz/düz" his giderilir */
    .admin-card,
    .landing-card,
    .landing-use-case,
    .signup-card,
    .pricing-card,
    .gundem-paper,
    .quota-chart-card,
    .well {
        padding: 16px !important;
    }

    /* Hero = app açılış paneli: daha yumuşak köşe + derin yumuşak gölge */
    .landing-hero {
        border-radius: 20px !important;
        box-shadow: 0 20px 54px -20px rgba(0, 0, 0, 0.78) !important;
    }

    /* (B) ESKİ SOL-KENAR AKSAN → ÜST-KENAR aksan (kullanıcı sol-border kart
       istemiyor; renk semantiğini koru, çizgiyi üste taşı). */
    .admin-card-accent-green,
    .admin-card-accent-blue,
    .admin-card-accent-amber {
        border-left: 0 !important;
    }
    .admin-card-accent-green { border-top: 2px solid #10b981 !important; }
    .admin-card-accent-blue  { border-top: 2px solid #3b82f6 !important; }
    .admin-card-accent-amber { border-top: 2px solid #f59e0b !important; }

    /* (C) TİPOGRAFİ RİTMİ — başlık hiyerarşisi iri, net, havalı. */
    .settings-page-title,
    .resources-header,
    .admin-page-title,
    .pricing-header h1,
    .landing-hero h1 {
        font-weight: 800 !important;
        letter-spacing: 0 !important;
        line-height: 1.14 !important;
    }
    .landing-hero h1 {
        font-size: clamp(30px, 9vw, 44px) !important;
    }
    /* Kart başlığı = temiz micro-label (caps + tracking + aksan tonu) */
    .admin-card-header {
        text-transform: uppercase !important;
        letter-spacing: 0.06em !important;
        font-weight: 700 !important;
        color: #93a7b6 !important;
    }

    /* (D) ROZET / PILL DİLİ — durum rozetleri tutarlı yuvarlak pill.
       (chat .hl-badge.cat-* zaten bu dilde; gerisi ona hizalanır.) */
    .admin-status,
    .admin-badge,
    .admin-badge-public,
    .admin-badge-early,
    .admin-badge-private,
    .admin-tier-badge,
    .score-badge,
    .badge,
    .pricing-card-badge,
    .speaker-badge {
        border-radius: 999px !important;
        padding: 3px 11px !important;
        font-weight: 700 !important;
        font-size: 11px !important;
        letter-spacing: 0.02em !important;
        line-height: 1.5 !important;
        display: inline-flex !important;
        align-items: center !important;
    }

    /* (E) SEKSİYON RİTMİ — landing/pricing bölümleri arası nefes (premium his) */
    .landing-section {
        margin-top: 30px !important;
    }
    .pricing-cards {
        gap: 14px !important;
    }

    /* (F) ALT PLAYER = yüzen cam app-bar (üst hairline + yumuşak gölge) */
    .bottom-player-panel {
        border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
        box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.45) !important;
    }

    /* (G) DOKUNMATİK GERİ-BESLEME — "bas-hisset" (native press). */
    .btn:active,
    .admin-btn:active,
    a:active,
    .pricing-card .btn:active,
    table.card-mobile.card-mobile tbody tr .btn:active {
        transform: scale(0.985);
        transition: transform 0.06s ease;
    }
}

/* ───────────────────────────────────────────────────────────────────────────
   ANALYZE / SEARCH — kontrol satırı (SearchPage form_row = .search-controls-row)
   Masaüstünde tek satır: [Speaker 160px][Query stretch][Mode 120px][Tier][Search].
   Dar ekranda sabit-genişlikli kardeşler query input'u ~18px'e eziyordu (fiilen
   kullanılamaz = gizli fonksiyon kaybı). Mobilde satırı sardır; speaker filtresi
   ve arama kutusu tam-genişlik kendi satırına insin, mode kalan alanı doldursun,
   search butonu mode ile aynı hatta kalsın. Gizli tier combo (flex 0 0 0) hiç
   hedeflenmez → fuzzy modda gizli kalmaya devam eder.
   C++ FIRST: yapı/genişlik C++'ta (WHBoxLayout + setWidth); burada yalnızca
   viewport'a tepkiyen sarma akışı yönetilir.
   ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
    .search-controls-row {
        flex-wrap: wrap !important;
    }
    .search-controls-row > .Wt-fill-height {
        margin-top: 4px !important;
        margin-bottom: 4px !important;
    }
    /* speaker filtresi (1. öğe): tam genişlik kendi satırı */
    .search-controls-row > .Wt-fill-height:first-child {
        flex: 1 1 100% !important;
        margin-right: 0 !important;
    }
    .search-controls-row > .Wt-fill-height:first-child .btn {
        width: 100% !important;
    }
    /* query input (2. öğe): tam genişlik kendi satırı (zaten width:100%) */
    .search-controls-row > .Wt-fill-height:nth-child(2) {
        flex: 1 1 100% !important;
    }
    /* mode combo (3. öğe): kalan satırı doldur, search butonu ile aynı hatta */
    .search-controls-row > .Wt-fill-height:nth-child(3) {
        flex-grow: 1 !important;
    }
    .search-controls-row > .Wt-fill-height:nth-child(3) .form-control {
        width: 100% !important;
    }
}

/* ───────────────────────────────────────────────────────────────────────────
   GÜNDEM — grafik kartı başlık satırı (.gundem-chart-head-inline)
   Masaüstünde başlık + alt-başlık tek satırda yan yana (flex nowrap). Dar
   ekranda alt-başlık (flex:0 0 auto, overflow:hidden) satıra sığmayıp sağdan
   KIRPILIYORDU — metin kaybı ("...yakalana", "...günde" kesiliyordu). Mobilde
   satırı sardır ve alt-başlığı kendi satırına TAM GENİŞLİK indir; overflow'u
   görünür yap ki uzun metin kırpılmak yerine alt alta sarsın. Başlık sıkışmaz,
   hiçbir açıklama kesilmez. C++ FIRST: yapı/sınıf C++'ta; bu yalnızca viewport-
   reaktif sarma akışı.
   ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
    .gundem-chart-head-inline {
        flex-wrap: wrap !important;
    }
    .gundem-chart-head-inline .gundem-chart-subtitle {
        flex: 1 1 100% !important;
        margin-left: 0 !important;
        overflow: visible !important;
        text-overflow: clip !important;
        white-space: normal !important;
    }
}

/* ───────────────────────────────────────────────────────────────────────────
   LIVE SPACES — auto-refresh çubuğu (tab şeridi ile çakışma)
   C++'ta auto_bar `position:absolute; top:3; right:0` ile tab şeridinin sağ
   üstüne konumlanıyor (masaüstünde sekmelerin sağında boş alana oturur). 390px'te
   tek "Twitter Spaces" sekmesiyle örtüşüyordu: başlık metni (sol) ile "Auto-refresh"
   etiketi ~31px üst üste biniyordu. Mobilde tab satırını (.live-spaces-tab-row,
   C++ hook sınıfı) dikey yığına çevir ve auto-bar'ı absolute'tan çıkarıp order:-1
   ile tab şeridinin ÜSTÜNE tam genişlik al — checkbox, sayaç, "s" ve Yenile
   butonu hepsi görünür/erişilir kalır, hiçbir örtüşme olmaz. C++ FIRST: konumlama
   C++'ta üretildi; bu yalnızca viewport-reaktif akış override'ı.
   ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
    .live-spaces-tab-row {
        display: flex !important;
        flex-direction: column !important;
    }
    .live-spaces-tab-row .live-spaces-auto-bar {
        position: static !important;
        order: -1 !important;
        width: 100% !important;
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 6px 10px !important;
        margin: 0 0 10px 0 !important;
        top: auto !important;
        right: auto !important;
    }
}

/* ───────────────────────────────────────────────────────────────────────────
   YÖNETİM (/management) — workspace filtre/araç çubuğu (.admin-topbar)
   admin.css'te `.admin-topbar` `display:flex` ama flex-wrap YOK (orada boş bir
   "mobil: alt satıra sar" placeholder'ı bırakılmış). Çubuk şunları taşır: arama
   kutusu + 3 eşik spin filtresi (min üye/takip/kayıt) + kademe combo + "+" ekle
   butonu. 390px'te bunlar tek satıra sığmayıp yatay taşıyordu. Mobilde çubuğu
   sardır: arama kutusu tam-genişlik kendi satırına insin, eşik grupları ve combo
   alt satırda doğal boyutta dizilsin, ekle butonu akışta kalsın — hiçbir filtre
   gizlenmez/kesilmez. C++ FIRST: yapı/sınıf C++'ta; bu yalnızca viewport-reaktif
   sarma akışı (Wt'nin viewport-reaktif API'si yok).
   ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
    .admin-topbar {
        flex-wrap: wrap !important;
        min-width: 0 !important;
    }
    /* Arama kutusu mobilde tam genişlik kendi satırı (masaüstünde flex:1 kalır) */
    .admin-topbar .admin-topbar-filter {
        flex: 1 1 100% !important;
    }
    /* Ekle butonu sağa-itmeyi bırakıp doğal akışta kalsın (wrap'te ortada kaybolmaz) */
    .admin-topbar .admin-topbar-add {
        margin-left: 0 !important;
    }
}

/* ───────────────────────────────────────────────────────────────────────────
   KOTA (/management/quota) — özet kartları satırı (.quota-summary-row)
   C++ inline `display:flex;flex-wrap:wrap` ile kuruluyor; kartlar min-width:160px,
   flex-grow yok → 390px'te iki kart sığar ama sağda boşluk kalır (düzensiz). App
   hissi için kartlara flex-grow ver: satırı eşit doldursunlar (özellik değişmez,
   yalnız hizalama). Chart satırı (.quota-charts-row) zaten yukarıda dikey yığına
   alınıyor.
   ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
    .quota-summary-row > .quota-card {
        flex: 1 1 140px !important;
    }
}

/* ───────────────────────────────────────────────────────────────────────────
   LOGLAR (/management/logs) — retention satırı (.logs-retention-row)
   C++ LogsPage WHBoxLayout flex-container'ına bu sınıf veriliyor. Masaüstünde
   tek satır (nowrap) kalır; ≤760px'te flex-wrap:wrap ile keep-days alanı +
   Kaydet/Şimdi Temizle butonları alt satıra iner — hiçbir kontrol kırpılmaz.
   ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
    .logs-retention-row {
        flex-wrap: wrap !important;
        row-gap: 8px !important;
    }
    .logs-retention-row > * {
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }
}

/* ───────────────────────────────────────────────────────────────────────────
   KAYNAKLAR (/management/resources) — kademe × kriter matrisi
   (.resources-tier-table, sarmalayıcı .resources-tier-scroll)
   2D MATRİS: sütun = kademe (Başlangıç/Pro/Stüdyo/Enterprise), satır = kriter
   (Aktif/Depolama/İşleme/…). Kart-flip burada YANLIŞ olur: kademe adları sütun
   başlığında olduğundan kart moduna geçince checkbox/input'ların hangi kademeye
   ait olduğu kaybolur. Bu yüzden ResourcesPage.cpp bu matrisi kart-moda ALMAZ;
   yerine C++ tarafında yatay-scroll sarmalayıcısı kurar (Wt setOverflow). Mobilde
   matris yatay kaydırılır; ilk sütun (kriter etiketleri + köşe) sticky kalır ki
   hangi satırda olduğun görünür kalsın. Kademe başlık satırı sütunlarıyla birlikte
   yatay kayar → her değerin üstünde kademe adı hizalı durur. Masaüstü grid'inin
   birebir aynısı, yalnızca dar viewport'ta kaydırılabilir. Kolon/özellik kaybı YOK.
   ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
    .resources-tier-scroll {
        -webkit-overflow-scrolling: touch; /* iOS momentum kaydırma */
    }
    /* Dar viewport'ta hücreleri sıkıştırmak yerine kaydır: okunabilir min genişlik
       (masaüstünde tablo zaten daha geniş; min-width etkisiz kalır, scrollbar çıkmaz) */
    .resources-tier-table {
        min-width: 520px !important;
    }
    /* İlk sütun (kriter etiketleri + (0,0) köşe hücresi) sticky — yatay kaydırırken
       sabit kalır; opak arka plan (tablo bg) altından kademe değerleri geçmesin */
    .resources-tier-table td:first-child,
    .resources-tier-table th:first-child {
        position: sticky !important;
        left: 0 !important;
        z-index: 2;
        background: #181818 !important;
        border-right: 2px solid #333 !important;
    }
}

/* ───────────────────────────────────────────────────────────────────────────
   SİSTEM DURUMU çubuğu (.monitor-bar) — DashboardPage _monitor_alert_
   Yönetim sayfalarının altındaki tek-satır izleme çubuğu: nokta + Başlat/Durdur
   + spacer + 7 metrik chip (CPU/RAM/SWP/DSK/TMP/GPU/NET). Base kuralda flex-wrap
   yok → mobilde tek satır taşar, sağdaki chip'ler (GPU/NET/TMP) viewport dışında
   KIRPILIR ve görünmez = metrik kaybı. Mobilde sarılsın: kontroller üst satırda,
   chip'ler alta akar; spacer satır-kesici olur. Hiçbir chip/kontrol gizlenmez.
   ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
    .monitor-bar {
        flex-wrap: wrap !important;
        row-gap: 6px !important;
    }
    /* Spacer'ı tam-genişlik 0-yükseklik satır-kesiciye çevir: kontrollerden sonra
       chip grubu yeni satıra iner (masaüstünde flex:1 esnek boşluk olarak kalır) */
    .monitor-bar .monitor-spacer {
        flex-basis: 100% !important;
        min-width: 0 !important;
        height: 0 !important;
    }
}

/* ───────────────────────────────────────────────────────────────────────────
   NATIVE MOBIL APP PASS — global shell, dokunma hedefleri, dialog/toolbar/table
   yuzeyleri. Hedef: feature gizlemeden tek elle kullanilabilir, premium gorunum.
   ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden !important;
        background:
            radial-gradient(circle at 16% -8%, rgba(42, 159, 214, 0.18), transparent 34%),
            linear-gradient(180deg, #0d1118 0%, #11161f 46%, #0b0e14 100%) !important;
        color: #eef4fb;
        -webkit-tap-highlight-color: rgba(42, 159, 214, 0.18);
        text-size-adjust: 100%;
    }

    body,
    .Wt-domRoot,
    .xcalibur-root {
        min-width: 0 !important;
    }

    .content-area {
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: 100vw !important;
        min-height: 100svh !important;
        overflow-x: hidden !important;
        overflow-y: visible !important;
        padding: 12px 10px calc(112px + env(safe-area-inset-bottom, 0px)) !important;
    }

    .content-area.public-content-area {
        padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px)) !important;
    }

    .content-area.embed-content-area {
        min-height: 0 !important;
        max-height: none !important;
        overflow-y: visible !important;
        padding-bottom: 0 !important;
    }

    .admin-content,
    .settings-layout,
    .settings-content,
    .settings-section,
    .management-page,
    .landing-page,
    .demo-embed-page {
        box-sizing: border-box !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .admin-card,
    .panel,
    .well,
    .landing-card,
    .pricing-card,
    .settings-card,
    .island-card,
    .demo-workspace-embed-panel {
        border-color: rgba(132, 156, 181, 0.22) !important;
        border-radius: 18px !important;
        background:
            linear-gradient(180deg, rgba(27, 35, 47, 0.94), rgba(15, 20, 29, 0.96)) !important;
        box-shadow: 0 18px 48px rgba(0, 0, 0, 0.36), inset 0 1px 0 rgba(255, 255, 255, 0.055) !important;
    }

    .landing-page .landing-hero h1,
    .pricing-header h1 {
        color: #f7fbff !important;
        background: none !important;
        -webkit-text-fill-color: #f7fbff !important;
        text-shadow: 0 2px 24px rgba(29, 155, 242, 0.18) !important;
    }

    .landing-page .landing-hero p,
    .pricing-header p,
    .pricing-card-description,
    .pricing-card-features,
    .pricing-card-period {
        color: #cdd7e3 !important;
    }

    .pricing-card-name,
    .pricing-card-price {
        color: #f7fbff !important;
    }

    .landing-page.demo-embed-page .demo-embed-host-section {
        margin-top: 0 !important;
    }

    .demo-embed-host-frame {
        min-height: calc(100svh - 24px) !important;
    }

    .btn,
    .admin-btn,
    button,
    input[type="button"],
    input[type="submit"],
    .form-control,
    select,
    textarea {
        min-height: 42px !important;
        border-radius: 14px !important;
        font-size: 14px !important;
    }

    .btn,
    .admin-btn,
    button,
    input[type="button"],
    input[type="submit"] {
        touch-action: manipulation;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px;
        padding-left: 12px !important;
        padding-right: 12px !important;
        white-space: nowrap;
    }

    .form-control,
    select,
    textarea {
        width: 100% !important;
        max-width: 100% !important;
        color: #eef4fb !important;
        background: rgba(9, 13, 20, 0.74) !important;
        border: 1px solid rgba(132, 156, 181, 0.26) !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035) !important;
    }

    .mobile-workspace-nav {
        left: 8px !important;
        right: 8px !important;
        bottom: max(8px, env(safe-area-inset-bottom, 0px)) !important;
        gap: 6px !important;
        padding: 7px !important;
        border-radius: 26px !important;
        border: 1px solid rgba(126, 191, 228, 0.28) !important;
        background: rgba(10, 14, 22, 0.88) !important;
        box-shadow:
            0 20px 54px rgba(0, 0, 0, 0.58),
            0 0 0 1px rgba(255, 255, 255, 0.035) inset !important;
        backdrop-filter: blur(22px) saturate(1.35);
        -webkit-backdrop-filter: blur(22px) saturate(1.35);
    }

    .mobile-nav-item.btn,
    .mobile-nav-item {
        min-height: 52px !important;
        height: auto !important;
        border-radius: 20px !important;
        color: #aeb9ca !important;
        line-height: 1.12 !important;
        letter-spacing: 0 !important;
        transition: transform 120ms ease, background 160ms ease, color 160ms ease;
    }

    .mobile-nav-item.active,
    .mobile-nav-item:focus,
    .mobile-nav-item:hover {
        background: linear-gradient(180deg, rgba(64, 169, 235, 0.32), rgba(33, 111, 171, 0.2)) !important;
        color: #fff !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
    }

    .mobile-more-panel {
        bottom: calc(78px + env(safe-area-inset-bottom, 0px)) !important;
        border-radius: 22px !important;
        background: rgba(12, 17, 26, 0.96) !important;
        border: 1px solid rgba(126, 191, 228, 0.24) !important;
        box-shadow: 0 18px 54px rgba(0, 0, 0, 0.56) !important;
        backdrop-filter: blur(20px) saturate(1.25);
        -webkit-backdrop-filter: blur(20px) saturate(1.25);
    }

    .admin-toolbar,
    .admin-topbar,
    .table-toolbar,
    .recordings-toolbar,
    .search-controls-row,
    .logs-retention-row,
    .monitor-bar {
        align-items: stretch !important;
        gap: 8px !important;
    }

    .admin-toolbar > *,
    .admin-topbar > *,
    .table-toolbar > *,
    .recordings-toolbar > *,
    .search-controls-row > *,
    .logs-retention-row > * {
        max-width: 100% !important;
    }

    .recordings-toolbar,
    .table-toolbar {
        padding: 7px !important;
        border-radius: 18px !important;
        background: rgba(10, 14, 22, 0.54) !important;
        border: 1px solid rgba(132, 156, 181, 0.16) !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035) !important;
    }

    table.card-mobile.card-mobile tbody tr {
        margin: 0 0 10px 0 !important;
        border: 1px solid rgba(132, 156, 181, 0.18) !important;
        border-radius: 18px !important;
        background:
            linear-gradient(180deg, rgba(25, 33, 45, 0.94), rgba(13, 18, 27, 0.98)) !important;
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.045) !important;
        overflow: hidden;
    }

    table.card-mobile.card-mobile tbody td {
        min-height: 40px !important;
        border-color: rgba(132, 156, 181, 0.12) !important;
        white-space: normal !important;
        overflow-wrap: anywhere;
    }

    table.card-mobile.card-mobile tbody td::before {
        color: #8fa5ba !important;
        letter-spacing: 0 !important;
        text-transform: none !important;
    }

    .sortable-table-wrapper,
    .live-spaces-table-wrap,
    .resources-tier-scroll {
        border-radius: 18px !important;
        background: rgba(9, 13, 20, 0.6) !important;
        border: 1px solid rgba(132, 156, 181, 0.16) !important;
    }

    .Wt-dialog,
    .modal-dialog {
        width: calc(100vw - 16px) !important;
        max-width: calc(100vw - 16px) !important;
        margin: max(8px, env(safe-area-inset-top, 0px)) auto max(8px, env(safe-area-inset-bottom, 0px)) !important;
    }

    .Wt-dialog .modal-content,
    .modal-content {
        max-height: calc(100svh - 20px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) !important;
        overflow: hidden !important;
        border-radius: 22px !important;
        background: rgba(14, 19, 28, 0.98) !important;
        border: 1px solid rgba(132, 156, 181, 0.24) !important;
        box-shadow: 0 26px 72px rgba(0, 0, 0, 0.58) !important;
    }

    .Wt-dialog .modal-body,
    .modal-body {
        max-height: calc(100svh - 132px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    .modal-footer,
    .Wt-dialog .modal-footer {
        gap: 8px !important;
        flex-wrap: wrap !important;
    }

    .modal-footer .btn,
    .Wt-dialog .modal-footer .btn {
        flex: 1 1 130px !important;
    }
}

@media (max-width: 480px) {
    .content-area {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    .mobile-workspace-nav {
        left: 6px !important;
        right: 6px !important;
        gap: 4px !important;
        padding: 6px !important;
    }

    .mobile-nav-item.btn,
    .mobile-nav-item {
        min-height: 50px !important;
        padding-left: 4px !important;
        padding-right: 4px !important;
        font-size: 10.5px !important;
    }

    .mobile-more-panel {
        grid-template-columns: 1fr !important;
    }

    .btn,
    .admin-btn,
    button,
    input[type="button"],
    input[type="submit"] {
        min-height: 44px !important;
    }
}