/* ════════════════════════════════════════════════════════════════════════════
   SkyraIrl — custom.css
   Tüm CSS dosyaları (site.css, app.css, admin.css, quiz.css,
   cat.css, simulation.css) bu tek dosyada birleştirilmiştir.
   Ana marka rengi: --skyra-brand: #23005C
   Bu değişkeni değiştirmek tüm türevleri günceller.
════════════════════════════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════════════════════════════════════
   1. CSS DEĞİŞKENLERİ — TEMA PARAMETRELERİ
════════════════════════════════════════════════════════════════════════════ */
:root {
    /* ── ANA MARKA — tüm türevlerin kaynağı #23005c─────────────────────────────── */
    --skyra-brand: #3B0764;
    /* ── Arka plan katmanları #0d0020 ────────────────────────────────────────────── */
    --skyra-bg: #0d0020;
    --skyra-bg2: #160038;
    --skyra-surface: rgba(35, 0, 92, 0.94);
    --skyra-nav-bg: rgba(13, 0, 32, 0.96);
    /* ── Kenar ve hover ──────────────────────────────────────────────────── */
    --skyra-border: rgba(150, 80, 255, 0.42);
    --skyra-border-h: rgba(180, 110, 255, 0.75);
    /* ── Vurgu renkleri ──────────────────────────────────────────────────── */
    --skyra-accent: #8844ff;
    --skyra-accent2: #bb55ff;
    --skyra-gold: #ffcc44;
    --skyra-orange: #ff7722;
    /* ── Metin ───────────────────────────────────────────────────────────── */
    --skyra-text: #e0d0ff;
    --skyra-text-muted: rgba(200, 180, 240, 0.55);
    /* ── Neon parıltı (mor) ──────────────────────────────────────────────── */
    --skyra-glow: rgba(140, 70, 255, 0.28);
    --skyra-neon-glow: 0 0 6px rgba(140,70,255,0.30), 0 0 18px rgba(120,50,255,0.12);
    --skyra-neon-glow-h: 0 0 8px rgba(170,100,255,0.58), 0 0 28px rgba(150,80,255,0.24), 0 0 2px rgba(220,190,255,0.45);
    /* ── Layout ──────────────────────────────────────────────────────────── */
    --skyra-nav-h: 60px;
    --skyra-footer-h: 52px;
    /* ── Yazı boyutları ──────────────────────────────────────────────────── */
    --fs-2xs: 1rem;
    --fs-xs: 1rem;
    --fs-sm: 1rem;
    --fs-base: 1rem;
    --fs-md: 1rem;
    --fs-lg: 1.2rem;
    --fs-xl: 1.3rem;
    --fs-error: 1rem;
    --fs-badge: 1rem;
    --fs-event: 1rem;
    /* ── Sayfa başlık renkleri ───────────────────────────────────────────── */
    --color-page-title: #ddbbff;
    --color-section-head: #bb99dd;
    /* ── Soluk metin renkleri ────────────────────────────────────────────── */
    --color-muted-strong: rgba(200, 180, 240, .50);
    --color-muted-medium: rgba(200, 180, 240, .60);
    --color-muted-light: rgba(200, 180, 240, .35);
    --color-muted-dim: rgba(200, 180, 240, .40);
    /* ── Durum renkleri ──────────────────────────────────────────────────── */
    --color-success-text: rgba(100, 230, 140, .80);
    --color-success-border: rgba( 40, 200, 80, .30);
    --color-error-text: rgba(230, 100, 100, .90);
    --color-error-border: rgba(220, 50, 50, .30);
    --color-warn-text: rgba(255, 200, 100, .70);
    --color-active-text: rgba( 80, 200, 120, .90);
    --color-deleted-text: #ff8888;
    /* ── Sayfa kapsayıcı genişlikleri ───────────────────────────────────── */
    --page-w-sm: 760px;
    --page-w-md: 860px;
    --page-w-lg: 900px;
    --page-w-xl: 960px;
    --page-w-xxl: 800px;
    /* ── Analitik ────────────────────────────────────────────────────────── */
    --analytics-bar-h: 22px;
    --analytics-bar-radius: 8px;
    /* ── Modal ───────────────────────────────────────────────────────────── */
    --modal-max-w: 420px;
    --modal-bg: rgba(30, 0, 75, 0.97);
    --modal-border: rgba(150, 80, 255, .52);
    /* ── Simülasyon — kedi çizgi rengi baz ──────────────────────────────── */
    --sim-line: rgba(170, 210, 255, 1.00);
    --sim-border: rgba(170, 210, 255, 0.38);
    --sim-border-h: rgba(170, 210, 255, 0.75);
    --sim-glow: 0 0 6px rgba(170,210,255,0.26), 0 0 18px rgba(170,210,255,0.09);
    --sim-glow-h: 0 0 10px rgba(170,210,255,0.55), 0 0 28px rgba(170,210,255,0.18), 0 0 2px rgba(210,235,255,0.42);
    /* Panel arka planları — simülasyon üzerinde okunabilir olsun */
    --sim-panel-bg: rgba(4, 8, 22, 0.88);
    --sim-card-bg: rgba(8, 6, 32, 0.88);
    --sim-card-bg2: rgba(6, 10, 28, 0.88);
}


/* ════════════════════════════════════════════════════════════════════════════
   2. RESET & BASE
════════════════════════════════════════════════════════════════════════════ */
html { font-size: 1em; position: relative; min-height: 100%; }
*, *::before, *::after { box-sizing: border-box; }

body.skyra-body {
    background-color: var(--skyra-bg);
    color: var(--skyra-text);
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    min-height: 100vh;
    overflow-x: hidden;
}

/* Yıldız parçacıkları arka planı */
body.skyra-body::before {
    content: '';
    position: fixed;
    inset: 0;
    background-image:
        radial-gradient(1px 1px at 10% 20%, rgba(255,255,255,.30) 0%, transparent 100%),
        radial-gradient(1px 1px at 35% 65%, rgba(220,200,255,.22) 0%, transparent 100%),
        radial-gradient(1px 1px at 60% 15%, rgba(255,255,255,.25) 0%, transparent 100%),
        radial-gradient(1px 1px at 80% 80%, rgba(210,190,255,.18) 0%, transparent 100%),
        radial-gradient(1px 1px at 90% 40%, rgba(255,255,255,.22) 0%, transparent 100%);
    pointer-events: none;
    z-index: 0;
}


/* ════════════════════════════════════════════════════════════════════════════
   3. NAVBAR
════════════════════════════════════════════════════════════════════════════ */
.skyra-nav {
    background: var(--skyra-nav-bg) !important;
    backdrop-filter: blur(12px);
    border-bottom: 2px solid var(--skyra-border);
    box-shadow: 0 2px 18px rgba(140,70,255,0.14);
    height: var(--skyra-nav-h);
    position: sticky;
    top: 0;
    z-index: 1000;
    padding: 0;
}

/* Mobile: navbar açıkken arka plan şeffaf olmasın */
.skyra-nav .navbar-collapse {
    background: var(--skyra-brand);
    border-top: 1px solid var(--skyra-border);
    border-radius: 0 0 12px 12px;
    padding: 8px 12px 12px;
}

@media (min-width: 992px) {
    .skyra-nav .navbar-collapse {
        background: transparent;
        border-top: none;
        border-radius: 0;
        padding: 0;
    }
}

.skyra-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: var(--skyra-text) !important;
    font-weight: 700;
    letter-spacing: .5px;
}
.brand-icon { font-size: 1.25rem; }
.brand-text {
    font-size: 1.125rem;
    background: linear-gradient(135deg, #cc99ff, #eeddff, #cc99ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.skyra-link {
    color: var(--skyra-text-muted) !important;
    font-size: 1rem;
    border-radius: 6px;
    padding: 6px 12px !important;
    transition: all .2s;
    display: flex;
    align-items: center;
    gap: 5px;
}

/* ── Navbar display modes (icon | text | both) ── */
.nav-item-icon-label { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.nav-item-icon-label .nav-icon { font-size: 1.05rem; line-height: 1; }
.nav-item-icon-label .nav-label { font-size: .92rem; }

/* icon modu: sadece icon göster (default) */
.skyra-nav[data-nav-mode="icon"] .nav-item-icon-label .nav-label { display: none; }
.skyra-nav[data-nav-mode="icon"] .nav-item-icon-label .nav-icon  { font-size: 1.2rem; }
.skyra-nav[data-nav-mode="icon"] .nav-item-icon-label { padding: 6px 10px !important; }

/* text modu: sadece yazı göster */
.skyra-nav[data-nav-mode="text"] .nav-item-icon-label .nav-icon { display: none; }

/* both modu: default davranış (icon + label yanyana) */

/* Mobil collapsed menüde (dikey açılır), icon modu olsa bile yazıları göster */
.navbar-collapse.show .nav-item-icon-label .nav-label,
.navbar-collapse.collapsing .nav-item-icon-label .nav-label {
    display: inline !important;
}
.skyra-link:hover {
    color: var(--skyra-text) !important;
    background: rgba(150, 80, 255, 0.12);
}
.skyra-link.active,
.skyra-link--active {
    color: #ddbbff !important;
    background: rgba(150, 80, 255, 0.18);
    font-weight: 600;
    position: relative;
}
.skyra-link--active::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, #8844ff, #cc99ff);
    opacity: .85;
}

.skyra-btn-outline--active {
    background: rgba(150, 80, 255, 0.20) !important;
    color: #ddbbff !important;
    /*border-color: rgba(170, 100, 255, 0.60) !important;*/
    font-weight: 600;
}

.skyra-toggler {
    border-color: var(--skyra-border) !important;
    filter: invert(.7);
}

.skyra-btn-outline {
    /*border: 2px solid var(--skyra-border-h);*/
    color: #cc99ff;
    background: transparent;
    border-radius: 6px;
    font-size: 1rem;
    padding: 5px 12px;
    transition: all .2s;
    text-decoration: none;
    box-shadow: 0 0 5px rgba(140,70,255,0.20);
}
.skyra-btn-outline:hover {
    background: rgba(150, 80, 255, 0.12);
    color: #eeddff;
    /*border-color: rgba(180,120,255,.90);*/
    box-shadow: 0 0 8px rgba(150,80,255,0.45), 0 0 20px rgba(130,60,255,0.18);
}


/* ════════════════════════════════════════════════════════════════════════════
   4. MAIN & FOOTER
════════════════════════════════════════════════════════════════════════════ */
.skyra-main {
    position: relative;
    z-index: 1;
    min-height: calc(100vh - var(--skyra-nav-h) - var(--skyra-footer-h));
}

.skyra-footer {
    background: rgba(13, 0, 32, 0.94);
    border-top: 2px solid var(--skyra-border);
    box-shadow: 0 -2px 16px rgba(140,70,255,0.12);
    padding: 14px 0;
    height: var(--skyra-footer-h);
    position: relative;
    z-index: 1;
}
.footer-brand { color: #cc99ff; font-weight: 600; font-size: 1rem; text-decoration: none; }
.footer-brand:hover { color: #e0c8ff; text-decoration: none; }
.footer-sep   { color: var(--skyra-border-h); margin: 0 8px; }
.footer-copy  { color: var(--skyra-text-muted); font-size: 1rem; }
.footer-tech  { color: var(--skyra-text-muted); font-size: 1rem; opacity: .6; }


/* ════════════════════════════════════════════════════════════════════════════
   5. KARTLAR / BAŞLIKLAR / BUTONLAR / BADGE
════════════════════════════════════════════════════════════════════════════ */
.skyra-card {
    background: var(--skyra-surface);
    border: var(--bw-std) solid var(--skyra-border);
    border-radius: var(--r-lg);
    padding: var(--spc-6);
    box-shadow: var(--sh-md);
    transition: border-color var(--t-base), box-shadow var(--t-base);
}
.skyra-card:hover {
    border-color: var(--skyra-border-h);
    box-shadow: var(--sh-lg);
}

.skyra-title {
    font-size: var(--fs-2xl);
    font-weight: var(--fw-bold);
    background: linear-gradient(135deg, #cc99ff 0%, #eeddff 50%, #cc99ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: var(--spc-2);
}
.skyra-subtitle {
    color: var(--skyra-text-muted);
    font-size: var(--fs-base);
    margin-bottom: var(--spc-6);
}

.btn-skyra-primary {
    background: transparent;
    border: var(--bw-std) solid rgba(150, 80, 255, 0.58);
    color: #cc99ff;
    border-radius: var(--r-sm);
    padding: var(--btn-pad-md);
    font-size: var(--fs-md);
    font-weight: var(--fw-medium);
    transition: all var(--t-base);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: var(--spc-2);
    box-shadow: var(--sh-sm);
}
.btn-skyra-primary:hover {
    background: rgba(150, 80, 255, 0.12);
    border-color: rgba(180, 110, 255, 0.90);
    color: #eeddff;
    box-shadow: var(--sh-lg);
    transform: translateY(-1px);
}

.btn-skyra-ghost {
    background: transparent;
    border: var(--bw-std) solid var(--skyra-border);
    color: var(--skyra-text-muted);
    border-radius: var(--r-sm);
    padding: var(--btn-pad-md);
    font-size: var(--fs-md);
    transition: all var(--t-base);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: var(--spc-2);
    box-shadow: var(--sh-sm);
}
.btn-skyra-ghost:hover {
    border-color: var(--skyra-border-h);
    color: var(--skyra-text);
    background: rgba(150,80,255,.08);
    box-shadow: var(--sh-md);
}

.skyra-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--spc-1);
    padding: 3px var(--spc-3);
    border-radius: var(--r-pill);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semi);
    letter-spacing: .3px;
}
.badge-admin     { background: transparent; color: #ff8844; border: 2px solid rgba(255, 80,  0, .50); box-shadow: 0 0 6px rgba(255,80,0,.20); }
.badge-moderator { background: transparent; color: #ffcc44; border: 2px solid rgba(255,200,  0, .48); box-shadow: 0 0 6px rgba(255,200,0,.22); }
.badge-vip       { background: transparent; color: #cc99ff; border: 2px solid rgba(150, 80,255, .50); box-shadow: 0 0 6px rgba(150,80,255,.24); }
.badge-active    { background: transparent; color: #ddaa77; border: 2px solid rgba(180,120, 60, .44); }
.badge-newbie    { background: transparent; color: #bbaaee; border: 2px solid rgba(140,110,200, .44); }

.stat-box {
    background: var(--skyra-surface);
    border: var(--bw-std) solid var(--skyra-border);
    border-radius: var(--r-md);
    padding: var(--spc-4) var(--spc-5);
    text-align: center;
    box-shadow: var(--sh-md);
    transition: all var(--t-base);
}
.stat-box:hover { border-color: var(--skyra-border-h); box-shadow: var(--sh-lg); }
.stat-box-link { display: block; text-decoration: none; color: inherit; }
.stat-box-link:hover .stat-box { border-color: rgba(120,170,255,.5); transform: translateY(-2px); }
.stat-value { font-size: 1.8rem; font-weight: var(--fw-normal); color: #ddccff; line-height: 1; }
.stat-label { font-size: var(--fs-base); color: var(--skyra-text-muted); margin-top: var(--spc-1); }


/* ════════════════════════════════════════════════════════════════════════════
   6. TABLO / FORM / ALERT
════════════════════════════════════════════════════════════════════════════ */
.skyra-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 1rem;
}
.skyra-table th {
    color: var(--skyra-text-muted);
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: .5px;
    text-transform: uppercase;
    padding: 10px 14px;
    border-bottom: 1px solid var(--skyra-border);
}
.skyra-table td {
    padding: 10px 14px;
    border-bottom: 1px solid rgba(150,80,255,.07);
    vertical-align: middle;
}
.skyra-table tr:hover td { background: rgba(150,80,255,.05); }

.skyra-input {
    background: rgba(25, 0, 60, 0.85);
    border: var(--bw-std) solid var(--skyra-border);
    border-radius: var(--r-sm);
    color: var(--skyra-text);
    padding: 9px var(--spc-4);
    font-size: var(--fs-md);
    width: 100%;
    transition: border-color var(--t-base), box-shadow var(--t-base);
}
.skyra-input:focus {
    outline: none;
    border-color: rgba(160,90,255,.55);
    box-shadow: 0 0 0 2px rgba(140,70,255,.22), 0 0 12px rgba(130,60,255,.20);
    background: rgba(30, 0, 70, 0.92);
    color: var(--skyra-text);
}
.skyra-input::placeholder { color: var(--skyra-text-muted); }

/* Select element özel styling — OS default dropdown'ını override et */
select.skyra-input {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    padding-right: 36px !important;
    background-color: rgba(25, 0, 60, 0.85) !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M3 4.5l3 3 3-3' stroke='%23cc99ff' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: right 14px center !important;
    background-size: 12px !important;
    cursor: pointer;
    color-scheme: dark;
}
select.skyra-input option {
    background: rgba(20, 0, 50, 1);
    color: var(--skyra-text);
    padding: var(--spc-2);
}
select.skyra-input:focus { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M3 4.5l3 3 3-3' stroke='%23eeddff' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>") !important; }

/* Date/time/datetime-local picker ikon rengini koyu temaya uyarla + color-scheme */
input[type="date"].skyra-input,
input[type="time"].skyra-input,
input[type="datetime-local"].skyra-input,
input[type="number"].skyra-input {
    color-scheme: dark;
}
.skyra-input[type="date"]::-webkit-calendar-picker-indicator,
.skyra-input[type="time"]::-webkit-calendar-picker-indicator,
.skyra-input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    filter: invert(0.7) sepia(0.3) saturate(4) hue-rotate(240deg);
    cursor: pointer; opacity: 0.7;
}
.skyra-input[type="date"]::-webkit-calendar-picker-indicator:hover,
.skyra-input[type="time"]::-webkit-calendar-picker-indicator:hover,
.skyra-input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover { opacity: 1; }

.skyra-label {
    font-size: var(--fs-base);
    color: var(--skyra-text-muted);
    font-weight: var(--fw-medium);
    margin-bottom: var(--spc-1);
    display: block;
}

.skyra-alert {
    background: rgba(25, 0, 65, 0.94);
    border: 2px solid var(--skyra-border);
    border-radius: 10px;
    padding: 12px 18px;
    font-size: 1rem;
    color: var(--skyra-text);
}
.skyra-alert.success { border-color: rgba(0,200,100,.45);  box-shadow: 0 0 8px rgba(0,200,100,.20); }
.skyra-alert.danger  { border-color: rgba(255,60,60,.50);   box-shadow: 0 0 8px rgba(255,60,60,.20); }
.skyra-alert.info    { border-color: rgba(150,80,255,.48);  box-shadow: 0 0 8px rgba(140,70,255,.22); }


/* ════════════════════════════════════════════════════════════════════════════
   7. SCROLLBAR / FOCUS / YARDIMCI
════════════════════════════════════════════════════════════════════════════ */
::-webkit-scrollbar       { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--skyra-bg); }
::-webkit-scrollbar-thumb { background: rgba(150,80,255,.35); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(170,100,255,.55); }

.btn:focus, .form-control:focus {
    box-shadow: 0 0 0 0.1rem rgba(140,70,255,.22), 0 0 0 0.25rem rgba(130,60,255,.16);
}

.text-skyra     { color: var(--skyra-accent) !important; }
.text-gold      { color: var(--skyra-gold) !important; }
.text-muted-sky { color: var(--skyra-text-muted) !important; }
.border-skyra   { border-color: var(--skyra-border) !important; }
.bg-skyra-surface { background: var(--skyra-surface) !important; }
.adm-hidden     { display: none !important; }


/* ════════════════════════════════════════════════════════════════════════════
   8. ZODİAK GÜNLÜK SAYFASI (/Zodiac/Daily)
════════════════════════════════════════════════════════════════════════════ */
.zd-ds-sign-btn {
    display: flex; align-items: center; gap: 10px;
    width: 100%; padding: 10px 14px;
    background: transparent; border: none; border-bottom: 1px solid rgba(150,80,255,.10);
    color: rgba(210,185,255,.70); cursor: pointer; text-align: left;
    transition: background .15s, color .15s;
}
.zd-ds-sign-btn:last-child { border-bottom: none; }
.zd-ds-sign-btn:hover { background: rgba(150,80,255,.10); color: #ddccff; }
.zd-ds-sign-btn--active { background: rgba(150,80,255,.18) !important; color: #cc99ff !important; border-left: 3px solid #8844ff; }
.zd-ds-sym  { font-size: 1.2rem; flex-shrink: 0; }
.zd-ds-name { font-size: .85rem; font-weight: 600; flex: 1; }
.zd-ds-cnt  { font-size: .7rem; background: rgba(150,80,255,.22); border: 1px solid rgba(150,80,255,.35); border-radius: 10px; padding: 1px 7px; color: #cc99ff; }
.zd-ds-placeholder { text-align: center; padding: 80px 20px; color: rgba(180,160,230,.35); font-size: .9rem; }
.zd-ds-ph-icon { font-size: 2.5rem; margin-bottom: 12px; }
.zd-ds-pane-hdr { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.zd-ds-pane-sym  { font-size: 1.8rem; }
.zd-ds-pane-name { font-size: 1.1rem; font-weight: 700; color: #ddccff; }
.zd-ds-pane-sub  { font-size: .78rem; color: rgba(180,160,230,.45); }
.zd-ds-empty { color: rgba(180,160,230,.35); font-size: .88rem; padding: 20px 0; }
.zd-ds-timeline { display: flex; flex-direction: column; gap: 12px; }
.zd-ds-entry { background: rgba(45, 5, 80, .55); border: 1px solid rgba(150,80,255,.14); border-radius: 10px; padding: 14px 16px; transition: border-color .18s; }
.zd-ds-entry:hover { border-color: rgba(150,80,255,.30); }
.zd-ds-entry-meta  { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.zd-ds-today-dot   { color: #44dd88; font-size: .5rem; }
.zd-ds-entry-date  { font-size: .78rem; font-weight: 600; color: rgba(190,170,240,.70); }
.zd-ds-entry-time  { font-size: .75rem; color: rgba(180,160,230,.45); }
.zd-ds-entry-text  { font-size: .88rem; color: rgba(230,210,255,.85); line-height: 1.6; margin-bottom: 8px; }
.zd-ds-entry-footer { font-size: .7rem; color: rgba(170,130,220,.42); text-align: right; }


/* ════════════════════════════════════════════════════════════════════════════
   9. ORTAK SAYFA YARDIMCILARI (app.css)
════════════════════════════════════════════════════════════════════════════ */
.page-container      { max-width: var(--page-w-lg);  margin: 0 auto; }
.page-container--sm  { max-width: var(--page-w-sm);  margin: 0 auto; }
.page-container--md  { max-width: var(--page-w-md);  margin: 0 auto; }
.page-container--xl  { max-width: var(--page-w-xl); }
.page-container--xxl { max-width: var(--page-w-xxl); }

.page-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }

.page-title     { color: var(--color-page-title); font-size: var(--fs-xl); margin: 0; }
.page-title--mb { color: var(--color-page-title); font-size: var(--fs-xl); margin-bottom: 20px; }

.section-heading      { color: var(--color-section-head); font-size: var(--fs-md); margin-bottom: 12px; }
.section-heading--mb14{ color: var(--color-section-head); font-size: var(--fs-md); margin-bottom: 14px; }

.text-muted-xs   { color: var(--color-muted-strong); font-size: var(--fs-xs);   }
.text-muted-sm   { color: var(--color-muted-strong); font-size: var(--fs-sm);   }
.text-muted-base { color: var(--color-muted-strong); font-size: var(--fs-base); }

.alert-success { border-color: var(--color-success-border) !important; color: var(--color-success-text) !important; }
.alert-error   { border-color: var(--color-error-border)   !important; color: var(--color-error-text)   !important; }

.field-error       { font-size: var(--fs-error); }
.btn-back-sm       { padding: 5px 10px; font-size: var(--fs-badge); }
.btn-submit-center { justify-content: center; padding: 11px; }


/* ════════════════════════════════════════════════════════════════════════════
   10. AUTH SAYFALARI
════════════════════════════════════════════════════════════════════════════ */
.auth-checkbox       { accent-color: var(--skyra-accent); width: 15px; height: 15px; }
.auth-checkbox-label { font-size: 1rem; cursor: pointer; }
.auth-link-sm        { font-size: 1rem; }


/* ════════════════════════════════════════════════════════════════════════════
   11. ÜYELER / MODERATÖR / BİLDİRİMLER
════════════════════════════════════════════════════════════════════════════ */
.members-search-input { width: 200px; }
.members-empty        { color: var(--skyra-text-muted); }
.mod-note-input       { flex: 1; }
.notif-form-inline    { display: inline; }


/* ════════════════════════════════════════════════════════════════════════════
   12. QUIZ OYNAMA SAYFASI
════════════════════════════════════════════════════════════════════════════ */
.quiz-state-btn  { font-size: 1rem; }
.quiz-hidden     { display: none; }
.quiz-spinner    { animation: qzSpin 1.5s linear infinite; }
.quiz-date-cell  { white-space: nowrap; }


/* ════════════════════════════════════════════════════════════════════════════
   13. QUIZ OLUŞTURMA SAYFASI
════════════════════════════════════════════════════════════════════════════ */
.quiz-success-wrap  { max-width: 560px; margin: 0 auto; text-align: center; }
.quiz-success-emoji { font-size: 2.5rem; margin-bottom: 12px; }
.quiz-success-title { color: var(--color-page-title); font-size: var(--fs-lg); margin-bottom: 8px; }
.quiz-success-msg   { color: var(--color-muted-strong); font-size: var(--fs-base); margin-bottom: 20px; }
.quiz-submit-btn    { padding: 9px 24px; }
.quiz-cat-label     { color: rgba(150, 180, 220, .45); font-weight: 400; }


/* ════════════════════════════════════════════════════════════════════════════
   14. PROFİL SAYFASI
════════════════════════════════════════════════════════════════════════════ */
.profile-levelup-text  { font-size: var(--fs-base); color: #99bbdd; }
.profile-progress-txt  { font-size: 1rem; color: var(--skyra-gold); }
.profile-progress-info { font-size: var(--fs-sm); }
.profile-maxlvl-card   { border-color: rgba(255, 200, 0, .48) !important; box-shadow: 0 0 8px rgba(255,200,0,.18) !important; }
.profile-maxlvl-emoji  { font-size: 1.3rem; }
.profile-maxlvl-text   { color: var(--skyra-gold); font-size: var(--fs-base); margin-left: 8px; }
.profile-tx-date       { white-space: nowrap; font-size: 1rem; }
.profile-tx-desc       { font-size: 1rem; color: var(--skyra-text-muted); }
.profile-bio-textarea  { resize: vertical; }


/* ════════════════════════════════════════════════════════════════════════════
   15. ADMIN — ANALİTİK
════════════════════════════════════════════════════════════════════════════ */
.analytics-session-select { max-width: 400px; }
.analytics-ts-text        { color: var(--color-muted-strong); font-size: 1rem; margin-left: 8px; }
.analytics-count-lbl      { font-size: 1rem; color: var(--color-muted-strong); }
.analytics-info-txt       { font-size: 1rem; color: var(--color-muted-strong); margin-top: 6px; margin-bottom: 0; }
.analytics-slots-hdr      { color: var(--color-section-head); font-size: 1rem; margin-bottom: 14px; }
.analytics-words-hdr      { color: var(--color-section-head); font-size: 1rem; margin-bottom: 12px; }
.analytics-exc-card        { border-color: rgba(255, 160, 0, .52) !important; box-shadow: 0 0 8px rgba(255,160,0,.18) !important; }
.analytics-exc-score       { color: var(--skyra-gold); }
.analytics-score-denom     { font-size: var(--fs-xs); }
.analytics-exc-bg          { background: rgba(8, 14, 36, .6); border-radius: var(--analytics-bar-radius); height: var(--analytics-bar-h); overflow: hidden; border: 2px solid rgba(80, 130, 255, .28); }
.analytics-exc-fill        { height: 100%; border-radius: var(--analytics-bar-radius); transition: width .6s ease; min-width: 4px; display: flex; align-items: center; padding-left: 8px; }
.analytics-exc-pct         { font-size: var(--fs-xs); color: rgba(0, 0, 0, .7); font-weight: 700; white-space: nowrap; }


/* ════════════════════════════════════════════════════════════════════════════
   16. ADMIN — CHAT EVENTS
════════════════════════════════════════════════════════════════════════════ */
.chat-user-select    { max-width: 320px; }
.chat-ev-date        { font-size: var(--fs-sm); white-space: nowrap; }
.chat-ev-nick        { font-size: var(--fs-event); }
.chat-ev-pts         { color: var(--skyra-gold); }
.chat-ev-note        { font-size: var(--fs-sm); }
.chat-ev-edited      { color: var(--color-warn-text); font-size: 1rem; }
.chat-ev-empty-note  { color: rgba(150, 180, 220, .35); }
.chat-ev-note-btn    { font-size: 1rem; padding: 4px 10px; }
.chat-deleted-row    { opacity: .6; }
.chat-deleted-date   { font-size: var(--fs-sm); }
.chat-hard-del-btn   { background: rgba(180, 40, 40, .2); border-color: rgba(220, 60, 60, .3); color: var(--color-deleted-text); font-size: 1rem; padding: 4px 10px; }
.chat-page-info      { color: var(--color-muted-medium); font-size: var(--fs-event); }
.chat-warn-txt       { color: var(--color-warn-text); font-size: 1rem; margin-bottom: 10px; }
.chat-note-textarea  { resize: vertical; margin-bottom: 12px; }

/* Not modalı */
.chat-modal-overlay {
    position: fixed; inset: 0; z-index: 50;
    background: rgba(0, 0, 0, .7);
    display: none; align-items: center; justify-content: center;
}
.chat-modal-overlay.active { display: flex; }
.chat-modal-box {
    background: var(--modal-bg);
    border: 2px solid var(--modal-border);
    box-shadow: 0 0 8px rgba(68,136,255,0.28), 0 0 24px rgba(68,136,255,0.12);
    border-radius: 14px; padding: 28px;
    width: 100%; max-width: var(--modal-max-w);
}
.chat-modal-title { color: var(--color-page-title); font-size: 1rem; margin-bottom: 14px; }


/* ════════════════════════════════════════════════════════════════════════════
   17. ADMIN — QUIZ ANALİTİK
════════════════════════════════════════════════════════════════════════════ */
.qa-diff-badge { border-radius: 20px; padding: 2px 10px; font-size: 1rem; }
.qa-col-count  { width: 80px; text-align: right; }
.qa-col-acc    { width: 160px; }
.qa-q-num      { color: rgba(120, 155, 210, .5); }
.qa-pct-wrap   { flex: 1; }
.qa-pct-txt    { font-size: 1rem; color: rgba(150, 185, 230, .65); white-space: nowrap; }


/* ════════════════════════════════════════════════════════════════════════════
   18. ADMIN — KEDİ HAYALLERİ
════════════════════════════════════════════════════════════════════════════ */
.catd-section-title { font-size: var(--fs-md); }
.catd-col-status    { width: 90px; }
.catd-col-actions   { width: 130px; }
.catd-active-txt    { font-size: var(--fs-sm); color: rgba( 80, 200, 120, .9); }
.catd-inactive-txt  { font-size: var(--fs-sm); color: rgba(150, 180, 220, .4); }


/* ════════════════════════════════════════════════════════════════════════════
   19. ADMIN — INDEX
════════════════════════════════════════════════════════════════════════════ */
.admin-warn-link { color: rgba(255, 200, 0, .7); }


/* ════════════════════════════════════════════════════════════════════════════
   20. ADMIN — PAYLAŞILAN STİLLER (admin.css)
════════════════════════════════════════════════════════════════════════════ */
.sim-add-btn {
    background: rgba(150,80,255,.12);
    border: var(--bw-hair) solid rgba(150,80,255,.28);
    color: #cc99ff; border-radius: var(--r-sm); cursor: pointer;
    transition: all var(--t-base); padding: var(--spc-1) var(--spc-3); font-size: var(--fs-sm);
    text-decoration: none; display: inline-block; font-weight: var(--fw-medium);
}
.sim-add-btn:hover    { background: rgba(150,80,255,.24); border-color: rgba(170,100,255,.50); color: #eeddff; }
.sim-add-btn:disabled { opacity: .5; cursor: not-allowed; }

.skyra-btn-small {
    background: rgba(80,30,160,.22); border: var(--bw-hair) solid rgba(150,80,255,.32);
    color: #ddbbff; border-radius: var(--r-sm); padding: var(--btn-pad-sm); font-size: var(--fs-sm);
    cursor: pointer; text-decoration: none; display: inline-block; font-weight: var(--fw-medium);
}
.skyra-btn-small:hover { background: rgba(100,40,180,.38); color: #eeddff; }

.section-head { color: #bb99dd; font-size: var(--fs-lg); font-weight: var(--fw-semi); }

.del-btn {
    background: rgba(200,60,60,.12); border: var(--bw-hair) solid rgba(200,60,60,.22);
    color: rgba(255,100,100,.82); border-radius: var(--r-sm);
    padding: 3px var(--spc-2); font-size: var(--fs-sm); cursor: pointer; transition: all var(--t-base);
}
.del-btn:hover { background: rgba(200,60,60,.24); }

.adm-scroll-220 { max-height:220px; overflow-y:auto; }
.adm-scroll-300 { max-height:300px; overflow-y:auto; }
.adm-scroll-380 { max-height:380px; overflow-y:auto; }
.adm-scroll-400 { max-height:400px; overflow-y:auto; }
.adm-scroll-500 { max-height:500px; overflow-y:auto; }
.adm-scroll-600 { max-height:600px; overflow-y:auto; }

.adm-label       { font-size:1rem; }
.adm-label-xs    { font-size:1rem; }
.adm-label-muted { color:rgba(200,180,240,.5); font-size:1rem; }
.adm-subtitle-sm { font-size:1rem; margin-bottom:12px; }

.adm-td-empty  { text-align:center; color:rgba(200,180,240,.5); }
.adm-td-empty2 { text-align:center; color:rgba(200,180,240,.4); }
.adm-td-key    { font-family:monospace; font-size:1rem; color:#cc99ff; }
.adm-td-val    { font-size:1rem; max-width:200px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.adm-td-group  { font-size:1rem; color:rgba(200,180,240,.7); }
.adm-td-desc   { font-size:1rem; color:rgba(200,180,240,.5); }
.adm-td-sm     { font-size:1rem; }
.adm-td-xs     { font-size:1rem; color:rgba(200,180,240,.6); }
.adm-td-nowrap { white-space:nowrap; font-size:1rem; }
.adm-td-rank   { color:var(--skyra-gold); font-weight:600; }
.adm-th-100    { width:100px; }
.adm-th-80     { width:80px; }

.adm-btn-sm   { font-size:1rem !important; padding:3px 8px !important; }
.adm-btn-xs   { font-size:1rem !important; padding:2px 6px !important; }
.adm-btn-xs2  { font-size:1rem !important; padding:2px 8px !important; }
.adm-btn-4-8  { font-size:1rem !important; padding:4px 8px !important; }
.adm-btn-4-10 { font-size:1rem !important; padding:4px 10px !important; }
.adm-btn-del  { background:rgba(200,50,50,.2) !important; }
.adm-btn-del2 { background:rgba(200,50,50,.25) !important; }
.adm-btn-reset{ background:rgba(100,100,100,.2); }
.adm-btn-12   { font-size:1rem !important; padding:7px 14px !important; }
.adm-btn-stream-go { font-size:1rem !important; padding:7px !important; justify-content:center; }

.adm-alert--ok      { border-color:rgba(40,200,80,.3)  !important; color:rgba(100,230,140,.9); }
.adm-alert--ok-soft { border-color:rgba(40,200,80,.3)  !important; color:rgba(100,230,140,.8); }
.adm-alert--err     { border-color:rgba(220,50,50,.3)  !important; color:rgba(230,100,100,.9); }

.adm-cat-row      { background:rgba(150,80,255,.07); border-radius:6px; cursor:pointer; border:1px solid transparent; }
.adm-cat-row--sel { border-color:rgba(150,80,255,.5) !important; }
.adm-code { font-family:monospace; color:#cc99ff; font-size:1rem; }
.adm-tag  { color:rgba(210,190,240,.7); font-size:1rem; margin-left:6px; }
.adm-kw   { font-size:1rem; color:rgba(180,150,230,.4); }

.adm-sign-row  { background:rgba(150,80,255,.07); border-radius:6px; cursor:pointer; }
.adm-sign-name { flex:1; color:#cc99ff; }
.adm-sign-el   { font-size:1rem; color:rgba(200,180,240,.5); }

.adm-nav-ul  { border-bottom:1px solid rgba(150,80,255,.2); display:flex; gap:4px; }
.adm-nav-tab {
    background: transparent !important; border: none !important;
    border-bottom: 2px solid transparent !important; border-radius: 0 !important;
    color: rgba(200,180,240,.5); padding: 8px 18px; font-size: 1rem;
    cursor: pointer; transition: color .2s, border-color .2s;
}
.adm-nav-tab:hover  { color: rgba(200,180,240,.8); }
.adm-nav-tab.active { color: #cc99ff !important; border-bottom-color: #8844ff !important; }

.adm-placeholder { color:rgba(200,180,240,.4); text-align:center; }
.adm-published   { color:rgba(80,200,100,.7); font-size:1rem; }
.adm-area-card   { background:rgba(150,80,255,.05); border-radius:6px; }
.adm-section-sm  { font-size:1rem; }

.adm-link         { color:#cc99ff; text-decoration:none; }
.adm-link-warn    { color:#ffaa44; font-size:1rem; margin-left:4px; }
.adm-stat-gold    { color:var(--skyra-gold); }
.adm-select-sm    { padding:3px 6px !important; font-size:1rem !important; width:auto !important; }
.adm-input-pts    { padding:3px 6px !important; font-size:1rem !important; width:70px !important; }
.adm-input-sm     { font-size:1rem !important; padding:5px 8px !important; }
.adm-select-dur   { width:auto !important; }
.adm-page-info    { color:rgba(200,180,240,.5); }
.adm-page-link    { padding:2px 8px; font-size:1rem; border-radius:5px; text-decoration:none; color:rgba(200,180,240,.6); border:1px solid rgba(150,80,255,.1); display:inline-block; }
.adm-page-link--active { background:rgba(150,80,255,.3); color:#ddbbff !important; border-color:rgba(150,80,255,.4); }
.adm-active-dot   { color:#22cc66; font-size:1rem; }
.adm-inactive-dot { color:#cc4444; font-size:1rem; }
.adm-no-stream    { color:var(--skyra-text-muted); font-size:1rem; margin-bottom:10px; }
.adm-stream-info  { font-size:1rem; color:var(--skyra-text-muted); }
.adm-chat-info    { font-size:1rem; color:rgba(200,180,240,.5); margin-bottom:6px; }
.adm-chat-empty   { color:rgba(200,180,240,.4); font-size:1rem; margin:0; }
.adm-chat-scroll  { max-height:220px; overflow-y:auto; display:flex; flex-direction:column; gap:3px; }
.adm-poll-title   { font-size:1rem; color:#ffaa44; font-weight:600; margin-bottom:4px; }
.adm-poll-q       { font-size:1rem; color:#eeddff; margin-bottom:6px; }
.adm-poll-stop    { font-size:1rem; margin-top:6px; }
.adm-poll-start   { font-size:1rem; padding:4px 10px; margin-top:5px; }


/* ════════════════════════════════════════════════════════════════════════════
   21. QUIZ OYNAMA UI (quiz.css)
════════════════════════════════════════════════════════════════════════════ */
.qz-page { display:flex; flex-direction:column; align-items:center; padding:32px 16px 64px; min-height:calc(100vh - 120px); }

.qz-card {
    background: rgba(30, 0, 75, 0.94);
    border: 1px solid rgba(150,80,255,.20);
    border-radius: 18px; padding: 36px 32px;
    width: 100%; max-width: 640px;
    box-shadow: 0 0 60px rgba(80,30,160,.10);
    animation: qzFadeUp .3s ease;
}
@keyframes qzFadeUp { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:translateY(0)} }

.qz-state-card {
    text-align: center;
    background: rgba(30, 0, 75, 0.94);
    border: 1px solid rgba(150,80,255,.15);
    border-radius: 18px; padding: 56px 32px;
    max-width: 480px; width: 100%;
    animation: qzFadeUp .3s ease;
}
.qz-state-icon { font-size: 3rem; margin-bottom: 16px; }
.qz-state-card p { color: rgba(210,190,250,.70); font-size:.9rem; line-height:1.8; margin:0; }

.qz-intro-badge {
    display: inline-block;
    background: rgba(150,80,255,.10); border: 1px solid rgba(150,80,255,.20);
    border-radius: 20px; padding: 3px 14px; font-size: 1rem; color: #cc99ff; margin-bottom: 16px;
}
.qz-intro-title { font-size: clamp(1.2rem,4vw,1.6rem); font-weight: 700; color: #ddbbff; margin-bottom: 10px; }
.qz-intro-desc  { font-size: .88rem; color: rgba(210,190,250,.50); line-height: 1.7; margin-bottom: 20px; }
.qz-intro-meta  { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.qz-meta-pill   { background: rgba(30,50,100,.5); border: 1px solid rgba(150,80,255,.15); border-radius: 20px; padding: 4px 14px; font-size: 1rem; color: #88aacc; }
.timer-pill     { border-color: rgba(255,180,30,.25); color: #ffcc66; }
.qz-start-btn {
    width: 100%;
    background: linear-gradient(135deg,#1a4080,#0d2050);
    border: 1px solid rgba(100,160,255,.4);
    color: #88ccff; border-radius: 12px; padding: 14px; font-size: 1rem;
    font-weight: 600; cursor: pointer; transition: all .2s; letter-spacing: .5px;
}
.qz-start-btn:hover {
    background: linear-gradient(135deg,#2a5aaa,#1a3070);
    border-color: rgba(100,160,255,.7); color: #bbddff;
    transform: translateY(-1px); box-shadow: 0 6px 24px rgba(80,30,160,.20);
}

.qz-top-bar        { display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.qz-progress-dots  { display:flex; gap:6px; flex:1; }
.qz-dot            { width:10px; height:10px; border-radius:50%; background:rgba(150,80,255,.20); border:1px solid rgba(150,80,255,.20); transition:all .3s; flex-shrink:0; }
.qz-dot.done       { background:rgba(80,200,120,.7); border-color:rgba(80,200,120,.5); }
.qz-dot.active     { background:rgba(150,80,255,.90); border-color:rgba(170,100,255,.80); box-shadow:0 0 8px rgba(150,80,255,.50); }
.qz-counter        { font-size:1rem; color:rgba(210,190,250,.50); white-space:nowrap; flex-shrink:0; }

.qz-timer-wrap { position:relative; width:46px; height:46px; flex-shrink:0; }
.qz-timer-svg  { width:46px; height:46px; transform:rotate(-90deg); }
.qz-timer-bg   { fill:none; stroke:rgba(150,80,255,.12); stroke-width:3; }
.qz-timer-ring { fill:none; stroke:#8844ff; stroke-width:3; stroke-linecap:round; transition:stroke .3s,stroke-dashoffset .9s linear; }
.qz-timer-ring.warning { stroke:#ffaa22; }
.qz-timer-ring.danger  { stroke:#ff4444; }
.qz-timer-text { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:1rem; font-weight:700; color:#cc99ff; }

.qz-progress-bar-wrap { height:3px; background:rgba(150,80,255,.10); border-radius:4px; margin-bottom:20px; overflow:hidden; }
.qz-progress-bar      { height:100%; background:linear-gradient(90deg,#8844ff,#bb55ff); border-radius:4px; transition:width .4s ease; }

.qz-media-wrap { margin-bottom:16px; text-align:center; }
.qz-media-img, .qz-media-vid { max-width:100%; max-height:260px; border-radius:10px; border:1px solid rgba(150,80,255,.18); object-fit:contain; }

.qz-question-text { font-size:clamp(.92rem,3vw,1.1rem); color:#ddbbff; font-weight:500; line-height:1.6; margin-bottom:4px; }
.qz-pts-badge     { font-size:1rem; color:var(--skyra-gold,#ffd466); margin-bottom:16px; }

.qz-options { display:flex; flex-direction:column; gap:10px; }
.qz-opt {
    display:flex; align-items:center; gap:12px; padding:13px 16px;
    border-radius:10px; border:1px solid rgba(150,80,255,.15);
    cursor:pointer; transition:all .18s; font-size:.88rem;
    color:var(--skyra-text,#cce); background:rgba(10,20,50,.3);
    position:relative; overflow:hidden;
}
.qz-opt:hover:not(.disabled) { border-color:rgba(150,80,255,.45); background:rgba(150,80,255,.12); transform:translateX(4px); }
.qz-opt.selected  { border-color:rgba(150,80,255,.60); background:rgba(150,80,255,.20); }
.qz-opt.disabled  { cursor:default; pointer-events:none; }
.qz-opt-letter {
    width:28px; height:28px; border-radius:8px;
    background:rgba(150,80,255,.12); border:1px solid rgba(150,80,255,.20);
    display:flex; align-items:center; justify-content:center;
    font-size:1rem; font-weight:700; color:#6699cc;
    flex-shrink:0; transition:all .18s;
}
.qz-opt.selected .qz-opt-letter,
.qz-opt:hover:not(.disabled) .qz-opt-letter { background:rgba(150,80,255,.30); color:#ddbbff; border-color:rgba(170,100,255,.40); }
.qz-opt-text { flex:1; line-height:1.4; }

.qz-transition { display:flex; align-items:center; justify-content:center; gap:12px; margin-top:20px; color:rgba(210,190,250,.50); font-size:1rem; }
.qz-transition-spinner { width:18px; height:18px; border:2px solid rgba(150,80,255,.20); border-top-color:#8844ff; border-radius:50%; animation:qzSpin .8s linear infinite; }
@keyframes qzSpin { to { transform:rotate(360deg); } }

.qz-submitting-card   { text-align:center; padding:60px 32px; }
.qz-submitting-card p { color:rgba(210,190,250,.50); margin-top:16px; font-size:.9rem; }

.qz-results-card { text-align:center; }
.qz-res-emoji { font-size:4rem; margin-bottom:12px; animation:qzBounce .5s ease; }
@keyframes qzBounce { 0%{transform:scale(0)} 70%{transform:scale(1.15)} 100%{transform:scale(1)} }
.qz-res-score  { font-size:clamp(1.6rem,5vw,2.4rem); font-weight:800; color:var(--skyra-gold,#ffd466); margin-bottom:6px; text-shadow:0 0 30px rgba(255,200,60,.3); }
.qz-res-ratio  { font-size:.88rem; color:rgba(210,190,250,.50); margin-bottom:10px; }
.qz-res-percentile { display:flex; align-items:center; justify-content:center; gap:8px; background:rgba(150,80,255,.12); border:1px solid rgba(150,80,255,.25); border-radius:10px; padding:10px 16px; font-size:.85rem; color:rgba(210,190,250,.70); margin-bottom:20px; animation:qzFadeUp .4s ease .2s both; }
.qz-res-percentile strong { color:#ddbbff; font-weight:700; }
.qz-percentile-icon { font-size:1.1rem; flex-shrink:0; }
.qz-res-breakdown { display:flex; flex-direction:column; gap:8px; margin-bottom:28px; text-align:left; }
.qz-res-row { display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:9px; font-size:.82rem; opacity:0; transform:translateY(8px); transition:opacity .3s ease,transform .3s ease; }
.qz-res-row.visible { opacity:1; transform:translateY(0); }
.qz-res-row.correct { background:rgba(40,180,80,.08); border:1px solid rgba(40,180,80,.2); }
.qz-res-row.wrong   { background:rgba(220,60,60,.08);  border:1px solid rgba(220,60,60,.2); }
.qz-res-row .icon   { flex-shrink:0; }
.qz-res-row .qtxt   { flex:1; color:rgba(210,190,250,.70); font-size:.78rem; }
.qz-res-row .atxt   { font-weight:500; }
.qz-res-row .pts    { margin-left:auto; color:var(--skyra-gold,#ffd466); white-space:nowrap; }

.qz-home-btn {
    position:relative; display:inline-flex; align-items:center; gap:8px;
    padding:13px 28px; background:linear-gradient(135deg,rgba(30,60,120,.8),rgba(20,40,90,.9));
    border:1px solid rgba(100,160,255,.3); border-radius:12px;
    color:#88ccff; font-weight:600; font-size:.9rem; text-decoration:none; transition:all .25s; overflow:hidden;
}
.qz-home-btn:hover { background:linear-gradient(135deg,rgba(40,80,160,.9),rgba(30,60,130,.9)); border-color:rgba(100,160,255,.6); color:#bbddff; transform:translateY(-2px); box-shadow:0 8px 28px rgba(80,30,160,.22); }
.qz-home-btn-orbit { position:absolute; width:120%; height:120%; top:-10%; left:-10%; background:radial-gradient(ellipse,rgba(150,80,255,.08) 0%,transparent 70%); animation:orbitPulse 2s ease-in-out infinite; pointer-events:none; }
@keyframes orbitPulse { 0%,100%{opacity:.4} 50%{opacity:1} }

.qz-history       { width:100%; max-width:680px; margin-top:40px; }
.qz-history-title { color:#cc99ff; font-size:.95rem; margin-bottom:12px; }

/* Günlük sayaç */
.qz-daily-counter {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 14px; border-radius: 999px;
    background: rgba(80,130,255,.1);
    border: 1px solid rgba(80,130,255,.25);
    font-size: .82rem; color: rgba(170,200,250,.75);
}
.qz-daily-counter .qz-dc-val { color: #aaccff; font-weight: 600; }

/* Çözülmemiş quiz kartları */
.qz-unsolved-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 12px;
}
.qz-unsolved-card {
    display: block; padding: 14px 16px;
    background: rgba(15,25,60,.5);
    border: 1px solid rgba(80,130,255,.2);
    border-radius: 10px;
    text-decoration: none;
    transition: all .2s ease;
}
.qz-unsolved-card:hover {
    border-color: rgba(120,170,255,.5);
    background: rgba(30,50,120,.4);
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(80,130,255,.15);
}
.qz-unsolved-title { color: #e0ecff; font-weight: 600; font-size: .92rem; margin-bottom: 6px; }
.qz-unsolved-meta { display: flex; gap: 10px; font-size: .75rem; color: rgba(150,180,220,.65); }

@media (max-width:520px) {
    .qz-card { padding:24px 16px; }
    .qz-intro-meta { flex-direction:column; gap:6px; }
}


/* ════════════════════════════════════════════════════════════════════════════
   22. KEDİ WIDGET (cat.css)
════════════════════════════════════════════════════════════════════════════ */
#cat-wrap {
    position: fixed; bottom: 0; left: 0; right: 0;
    height: 120px; z-index: 40; overflow: visible; pointer-events: none;
}
#cat-wrap[data-cat-page="sim"] { top: 0; height: 100%; }

#cat-canvas {
    position: absolute; bottom: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none; cursor: default;
}

.cat-balloon {
    position: fixed; bottom: 138px; left: 60px;
    min-width: 160px; max-width: 300px; padding: 12px 18px;
    background: #fff; border: 3px solid #3a3a5c;
    border-radius: 20px; box-shadow: 4px 4px 0 #3a3a5c;
    font-family: 'Comic Sans MS', 'Comic Sans', cursive;
    font-size: 15px; font-weight: 600; color: #2c2c4a;
    line-height: 1.4; text-align: center; white-space: pre-wrap;
    word-break: break-word; pointer-events: none; z-index: 50;
    animation: catBalloonPop 0.2s ease-out;
}
@keyframes catBalloonPop {
    from { transform: scale(0.7); opacity: 0; }
    to   { transform: scale(1);   opacity: 1; }
}
.cat-balloon::after {
    content: ''; position: absolute; bottom: -14px; left: 50%; transform: translateX(-50%);
    border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 14px solid #3a3a5c;
}
.cat-balloon::before {
    content: ''; position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%);
    border-left: 8px solid transparent; border-right: 8px solid transparent; border-top: 11px solid #fff; z-index: 1;
}

.cat-balloon--hidden { display: none !important; }
.cat-balloon--greet  { background: #eef2ff; border-color: #4a4a8c; box-shadow: 4px 4px 0 #4a4a8c; color: #2c2c6a; font-size: 16px; }
.cat-balloon--greet::after  { border-top-color: #4a4a8c; }
.cat-balloon--greet::before { border-top-color: #eef2ff; }
.cat-balloon--dream  { background: #fff8ee; border-color: #8a6a3a; box-shadow: 4px 4px 0 #8a6a3a; color: #5a3a10; font-size: 15px; }
.cat-balloon--dream::after  { border-top-color: #8a6a3a; }
.cat-balloon--dream::before { border-top-color: #fff8ee; }


/* ════════════════════════════════════════════════════════════════════════════
   23. SİMÜLASYON SAYFASI (simulation.css)
   NOT: Bu stiller yalnızca Simülasyon sayfasında aktif olur.
        body.skyra-body override ile diğer sayfaları etkilemez.
════════════════════════════════════════════════════════════════════════════ */

/* Sayfa-düzeyi override — sadece simülasyon sayfası */
body.sim-page { overflow: hidden; }
body.sim-page .skyra-main { padding: 0 !important; }

.sim-hidden        { display: none    !important; }
.sim-visible       { display: block   !important; }
.sim-visible-flex  { display: flex    !important; }

.sim-wrapper { position:fixed; top:60px; left:0; right:0; bottom:0; overflow:hidden; }

#sim-canvas { position:absolute; inset:0; }
#sim-canvas canvas { width:100% !important; height:100% !important; }

/* InfoWrapper: Ana kapsayıcı */
.sim-info-control-wrapper {
    position: fixed;
    top: 70px;
    left: 20px;
    z-index: 1000;
}
.info-icon-control {
    width: 30px;
    height: 30px;
    background-color: #0d0020;
    border: 1px solid rgb(133, 81, 204);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: white;
    box-shadow: 5px 2px 20px 0px #ddbbff;
    transition: transform 0.3s ease-in-out;
}

    .info-icon:hover {
        transform: scale(1.1) rotate(45deg);
    }
.info-icon-control {
    position: absolute;
    top: 16px;
    left: 16px;
    color: rgba(180,210,255,.8);
    font-size: 0.825rem;
    line-height: 1.9;
    pointer-events: none;
    text-shadow: 0 0 8px rgba(80,130,255,.5);
    z-index: 10;
}
/* Başlangıçta bilgi panelini gizle */
.sim-info {
    display: none;
    /* İstersen geçiş efekti için opacity de kullanabilirsin */
}

/* Wrapper 'active' sınıfını aldığında bilgi panelini göster */
.sim-info-control-wrapper.active .sim-info {
    display: block;
}

/* "7" butonunun tıklanabilir olduğunu belirtmek için */
.info-icon-control {
    cursor: pointer;
    user-select: none;
}
.sim-info h2    { font-size:.925rem; color:#99ccff; margin-bottom:4px; }
.sim-info small { opacity:.4; font-size:0.875rem; }
.sim-divider    { border-color:rgba(80,130,255,.2); margin:6px 0; }

/* ── Panel arka planları artık --sim-panel-bg değişkeniyle kontrol edilir ── */

/* InfoWrapper: Ana kapsayıcı */
.sim-info-wrapper {
    position: fixed;
    top: 70px;
    right: 20px;
    z-index: 1000;
}

/* InfoIcon: Küçük ikon stili */
.info-icon {
    width: 30px;
    height: 30px;
    background-color: #0d0020;
    border: 1px solid rgb(133, 81, 204);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: white;
    box-shadow: 5px 2px 20px 0px #ddbbff;
    transition: transform 0.3s ease-in-out;
}

.info-icon:hover {
    transform: scale(1.1) rotate(10deg);
}

/* SimLegend: Senin divin başlangıçta gizli */
.sim-legend {
    position: absolute;
    top: 50px;
    right: 0;
    width: 250px;
    background: rgba(5, 10, 25, 0.95);
    border: 1px solid #333;
    border-radius: 12px;
    padding: 15px;
    color: white;
    
    /* Animasyon Hazırlığı */
    opacity: 0;
    transform: translateY(-10px) scale(0.9);
    pointer-events: none; /* Gizliyken tıklanmasın */
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 10px 30px rgba(0,0,0,0.8);
}

/* Active State: Bu class eklenince panel açılır */
.sim-info-wrapper.active .sim-legend {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}
/*.sim-legend {
    position:absolute; top:16px; right:16px;
    background: var(--sim-panel-bg);
    border:2px solid var(--sim-border); border-radius:12px;
    padding:14px 16px; color:#ccd; font-size:1rem; line-height:2;
    min-width:185px; z-index:10; box-shadow:var(--sim-glow);
}*/
.sim-legend:hover { border-color:var(--sim-border-h); box-shadow:var(--sim-glow-h); }
.sim-legend h3    { color:#88bbff; font-size:1rem; margin-bottom:6px; letter-spacing:.5px; }
.sim-legend small { opacity:.5; font-size:1rem; }
.sim-role-row { display:flex; align-items:center; gap:8px; }
.sr-dot       { width:10px; height:10px; border-radius:50%; flex-shrink:0; }
.admin-dot    { background:#111; border:2px solid #ff6600; box-shadow:0 0 6px #ff4400; }
.mod-dot      { background:radial-gradient(#ffe066,#ff9900); box-shadow:0 0 6px #ffcc00; }
.vip-dot      { background:radial-gradient(#66aaff,#2255bb); box-shadow:0 0 5px #4488ff; }
.active-dot   { background:radial-gradient(#cc8855,#885533); }
.newbie-dot   { background:radial-gradient(#aaddff,#558899); }

.sim-tooltip {
    position:fixed; display:none;
    background: var(--sim-panel-bg);
    border:2px solid var(--sim-border); border-radius:10px;
    padding:11px 15px; color:#cce; font-size:1rem;
    pointer-events:none; min-width:160px;
    box-shadow:var(--sim-glow); z-index:20;
}
.sim-tooltip .tt-name   { color:#adf; font-size:1rem; font-weight:600; margin-bottom:4px; }
.sim-tooltip .tt-role   { font-size:1rem; margin-bottom:2px; }
.sim-tooltip .tt-pts    { color:#ffd466; font-size:1rem; }
.sim-tooltip .tt-streak { color:rgba(255,160,40,.8); font-size:1rem; margin-top:1px; }
.sim-tooltip .tt-hint   { opacity:.45; font-size:1rem; margin-top:4px; }

.sim-loading {
    position:absolute; inset:0; z-index:30;
    display:flex; align-items:center; justify-content:center;
    background:rgba(2,4,14,.85); backdrop-filter:blur(4px); transition:opacity .5s;
}
.sim-loading-inner { text-align:center; color:rgba(150,190,255,.7); font-size:1rem; letter-spacing:1px; }
.sim-loading-icon  { font-size:2.5rem; margin-bottom:10px; animation:sim-spin 3s linear infinite; }
@keyframes sim-spin { to { transform:rotate(360deg); } }

.sim-bottom-bar {
    position:absolute; bottom:54px; left:50%; transform:translateX(-50%);
    display:flex; align-items:center; gap:24px;
    background: var(--sim-panel-bg);
    border:2px solid var(--sim-border); border-radius:30px;
    padding:8px 20px; color:#88aadd; font-size:1rem;
    white-space:nowrap; z-index:10; box-shadow:var(--sim-glow);
}
.sim-speed-ctrl           { display:flex; align-items:center; gap:8px; }
.sim-speed-ctrl input     { width:110px; accent-color:#4488ff; cursor:pointer; }
.sim-member-ctrl          { display:flex; align-items:center; gap:10px; }
.sim-member-ctrl strong   { color:#88bbff; }

/* Simülasyona özel .sim-add-btn (renk şeması farklı — override) */
.sim-wrapper .sim-add-btn,
.sim-bottom-bar .sim-add-btn {
    background: transparent;
    border: 2px solid var(--sim-border);
    color: #88ccff; border-radius: 8px;
    padding: 5px 12px; font-size: 1rem;
    cursor: pointer; transition: all .2s;
}
.sim-wrapper .sim-add-btn:hover,
.sim-bottom-bar .sim-add-btn:hover {
    background: rgba(170,210,255,0.08); color: #bbddff;
    border-color: var(--sim-border-h); box-shadow: var(--sim-glow-h);
}

@media (max-width:600px) {
    .sim-bottom-bar {
        flex-direction: column;
        gap: 8px;
        bottom: 0;
        left: 0;
        right: 0;
        transform: none;
        width: 100%;
        max-width: 100%;
        border-radius: 16px 16px 0 0;
        padding: 10px 16px 14px;
        font-size: .9rem;
    }
    .sim-speed-ctrl input { width: 90px; }
    .sim-legend           { display: none; }
}

/* ── Güneş paneli ── */
.sun-panel {
    position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
    background: var(--sim-card-bg);
    border:2px solid rgba(255,160,60,0.55); border-radius:16px;
    padding:24px 28px 20px; min-width:240px; max-width:290px;
    text-align:center; z-index:25;
    box-shadow:0 0 10px rgba(255,140,30,0.45),0 0 28px rgba(255,100,10,0.18),0 0 2px rgba(255,200,100,0.35);
    animation:sunPanelIn .22s ease;
}
@keyframes sunPanelIn {
    from { opacity:0; transform:translate(-50%,-50%) scale(.9); }
    to   { opacity:1; transform:translate(-50%,-50%) scale(1);  }
}
.sun-panel-close          { position:absolute; top:10px; right:12px; background:none; border:none; color:rgba(255,180,80,.5); font-size:14px; cursor:pointer; transition:color .15s; }
.sun-panel-close:hover    { color:rgba(255,180,80,.9); }
.sun-panel-av-wrap        { margin-bottom:10px; }
.sun-panel-av             { width:72px; height:72px; border-radius:50%; border:2px solid rgba(255,160,60,0.65); object-fit:cover; box-shadow:0 0 10px rgba(255,140,30,0.52),0 0 24px rgba(255,100,10,0.20); }
.sun-panel-av-ph          { font-size:2.8rem; line-height:1; filter:drop-shadow(0 0 12px rgba(255,120,20,.6)); }
.sun-panel-nick           { font-size:1.15rem; font-weight:700; color:#ffcc88; margin-bottom:6px; text-shadow:0 0 12px rgba(255,140,30,.4); }
.sun-panel-badge          { display:inline-block; font-size:1rem; font-weight:600; background:transparent; color:#ffaa55; border:2px solid rgba(255,160,60,0.50); border-radius:20px; padding:2px 10px; margin-bottom:10px; }
.sun-panel-pts            { font-size:1rem; color:#ffd466; margin-bottom:12px; }
.sun-panel-links          { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-bottom:14px; }
.sun-panel-link           { display:inline-block; font-size:1rem; font-weight:600; padding:4px 12px; border-radius:20px; text-decoration:none; transition:all .2s; }
.kick-link                { background:transparent; color:#44cc88; border:2px solid rgba(0,200,100,0.45); }
.kick-link:hover          { background:rgba(0,180,80,.22); }
.twitch-link              { background:transparent; color:#bb88ff; border:2px solid rgba(145,70,255,0.50); }
.twitch-link:hover        { background:rgba(145,70,255,.22); }
.sun-panel-profile-btn    { display:inline-block; background:transparent; border:2px solid rgba(255,160,60,0.50); color:#ffaa55; border-radius:8px; padding:6px 18px; font-size:1rem; font-weight:600; text-decoration:none; transition:all .2s; }
.sun-panel-profile-btn:hover { background:rgba(255,140,30,0.10); color:#ffcc88; box-shadow:0 0 8px rgba(255,140,30,0.40); }

/* ── Üyelik modalı ── */
.reg-overlay { position:fixed; inset:0; z-index:40; background:rgba(2,4,14,.75); backdrop-filter:blur(6px); display:flex; align-items:center; justify-content:center; padding:16px; }
.reg-card {
    position:relative;
    background: var(--sim-card-bg2);
    border:2px solid var(--sim-border); border-radius:18px;
    padding:32px 28px; width:100%; max-width:400px;
    box-shadow:var(--sim-glow); animation:regCardIn .22s ease;
}
@keyframes regCardIn { from{opacity:0;transform:scale(.93)} to{opacity:1;transform:scale(1)} }
.reg-close          { position:absolute; top:12px; right:14px; background:none; border:none; color:rgba(150,180,220,.4); font-size:16px; cursor:pointer; transition:color .15s; }
.reg-close:hover    { color:rgba(150,180,220,.9); }
.reg-header         { text-align:center; margin-bottom:22px; }
.reg-logo           { font-size:2.2rem; margin-bottom:6px; }
.reg-title          { font-size:1.25rem; font-weight:700; color:#aaccff; margin-bottom:4px; }
.reg-sub            { font-size:1rem; color:rgba(150,180,220,.5); }
.reg-field          { margin-bottom:12px; }
.reg-footer         { text-align:center; margin-top:16px; font-size:1rem; color:rgba(150,180,220,.5); }
.reg-submit-btn     { justify-content:center; padding:11px; margin-top:8px; }
.badge-kick-req     { display:inline-block; font-size:1rem; font-weight:600; background:rgba(0,200,100,.12); color:#44cc88; border:1px solid rgba(0,200,100,.2); border-radius:4px; padding:1px 6px; vertical-align:middle; margin-left:6px; }
.kick-input-wrap    { display:flex; align-items:center; }
.kick-prefix        { background:rgba(10,20,50,.7); border:1px solid rgba(80,130,255,.25); border-right:none; border-radius:8px 0 0 8px; padding:9px 10px; font-size:1rem; color:rgba(150,180,220,.5); white-space:nowrap; line-height:1; }
.kick-input         { border-radius:0 8px 8px 0 !important; }
.auth-link          { color:#5599ff; text-decoration:none; }
.auth-link:hover    { color:#88bbff; }

/* ── Kozmik Olay Toast ── */
.cosmic-toast {
    position:fixed; bottom:80px; left:50%; transform:translateX(-50%) translateY(20px);
    background: var(--sim-panel-bg);
    border:2px solid var(--sim-border); border-radius:12px;
    padding:10px 22px; color:#c8a8ff; font-size:1rem;
    letter-spacing:0.03em; pointer-events:none; opacity:0; z-index:9999;
    transition:opacity 0.4s ease,transform 0.4s ease;
    box-shadow:var(--sim-glow-h); white-space:nowrap;
}
.cosmic-toast--in { opacity:1; transform:translateX(-50%) translateY(0); }

/* ── Burçlar butonu ── */
.sim-zodiac-btn {
    background:transparent; border:2px solid var(--sim-border);
    color:#c0a0ff; border-radius:8px; padding:5px 12px;
    font-size:1rem; cursor:pointer; transition:all .2s; white-space:nowrap;
}
.sim-zodiac-btn:hover { background:rgba(170,210,255,0.08); color:#ddc8ff; border-color:var(--sim-border-h); box-shadow:var(--sim-glow-h); }

/* ── Zodiac Overlay ── */
.zodiac-overlay {
    position:fixed; inset:0; z-index:50;
    background:rgba(2,4,18,.82); backdrop-filter:blur(8px);
    display:flex; align-items:center; justify-content:center;
    padding:20px; animation:zodiacFadeIn .22s ease;
}
.zodiac-overlay--hidden { display:none !important; }
@keyframes zodiacFadeIn { from{opacity:0} to{opacity:1} }

.zodiac-panel {
    position:relative;
    background: var(--sim-card-bg);
    border:2px solid var(--sim-border); border-radius:18px;
    padding:28px 26px 24px; width:100%; max-width:820px; max-height:88vh;
    overflow-y:auto; box-shadow:var(--sim-glow); animation:zodiacPanelIn .25s ease;
    scrollbar-width:thin; scrollbar-color:rgba(170,210,255,.35) transparent;
}
.zodiac-panel::-webkit-scrollbar       { width:5px; }
.zodiac-panel::-webkit-scrollbar-track  { background:transparent; }
.zodiac-panel::-webkit-scrollbar-thumb  { background:rgba(170,210,255,.35); border-radius:4px; }
@keyframes zodiacPanelIn { from{opacity:0;transform:scale(.93) translateY(12px)} to{opacity:1;transform:scale(1) translateY(0)} }

.zodiac-panel-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; }
.zodiac-panel-title  { font-size:1.15rem; font-weight:700; color:#c8a8ff; margin:0; letter-spacing:.5px; text-shadow:0 0 14px rgba(160,90,255,.45); }

.zodiac-close-btn       { background:none; border:none; color:rgba(180,140,255,.45); font-size:16px; cursor:pointer; line-height:1; padding:4px 6px; border-radius:6px; transition:color .15s,background .15s; flex-shrink:0; }
.zodiac-close-btn:hover { color:rgba(200,160,255,.9); background:rgba(100,50,200,.18); }

.zodiac-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
@media (max-width:600px) { .zodiac-grid { grid-template-columns:repeat(3,1fr); gap:8px; } }

.zodiac-card {
    background: rgba(14,10,40,0.72);
    border:2px solid var(--sim-border); border-radius:12px;
    padding:14px 8px 12px; cursor:pointer;
    display:flex; flex-direction:column; align-items:center; gap:5px;
    text-align:center; transition:border-color .2s,box-shadow .2s,background .2s,transform .15s;
    position:relative; overflow:hidden;
}
.zodiac-card::before { display:none; }
.zodiac-card:hover   { border-color:var(--sim-border-h); box-shadow:var(--sim-glow-h); background:rgba(170,210,255,0.08); transform:translateY(-2px); }
.zodiac-card:active  { transform:translateY(0); }
.zodiac-card-sym   { font-size:1.65rem; line-height:1; color:#d8b8ff; text-shadow:0 0 10px rgba(160,90,255,.5); display:block; }
.zodiac-card-name  { font-size:1rem; font-weight:700; color:#b899ee; display:block; letter-spacing:.3px; }
.zodiac-card-dates { font-size:1rem; color:rgba(160,130,220,.6); display:block; line-height:1.3; }

.zodiac-detail {
    position:fixed; inset:0; z-index:60;
    display:flex; align-items:center; justify-content:center; padding:20px;
    background:rgba(2,4,18,.6); backdrop-filter:blur(4px); animation:zodiacFadeIn .18s ease;
}
.zodiac-detail--hidden { display:none !important; }

.zodiac-detail-card {
    position:relative;
    background: var(--sim-card-bg);
    border:2px solid var(--sim-border); border-radius:18px;
    padding:28px 28px 24px; width:100%; max-width:660px;
    box-shadow:var(--sim-glow); animation:zodiacPanelIn .22s ease;
    max-height:88vh; overflow-y:auto;
}
.zodiac-detail-close-btn { position:absolute; top:12px; right:14px; }

.zodiac-detail-sym   { text-align:center; font-size:3.2rem; line-height:1; margin-bottom:8px; color:#dcc8ff; text-shadow:0 0 20px rgba(160,90,255,.55); }
.zodiac-detail-names { text-align:center; margin-bottom:18px; }
.zodiac-detail-tr    { font-size:1.3rem; font-weight:700; color:#c8a8ff; margin:0 0 3px; text-shadow:0 0 12px rgba(160,90,255,.35); }
.zodiac-detail-en    { font-size:1rem; color:rgba(170,130,220,.55); font-style:italic; }

.zodiac-detail-meta { display:flex; flex-direction:column; gap:7px; margin-bottom:16px; background:transparent; border:2px solid var(--sim-border); border-radius:10px; padding:12px 14px; }
.zodiac-meta-row    { display:flex; align-items:baseline; gap:8px; }
.zodiac-meta-label  { font-size:1rem; color:rgba(160,120,220,.55); font-weight:600; letter-spacing:.4px; text-transform:uppercase; flex-shrink:0; min-width:110px; }
.zodiac-meta-value  { font-size:1rem; color:#c0a4ee; }

.zodiac-traits-label { display:block; margin-bottom:8px; min-width:unset; }
.zodiac-traits  { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:16px; }
.zodiac-trait   { display:inline-block; background:transparent; border:2px solid var(--sim-border); color:#b89aee; border-radius:20px; padding:3px 11px; font-size:1rem; font-weight:600; letter-spacing:.2px; transition:background .15s,border-color .15s,box-shadow .15s; }
.zodiac-trait:hover { background:rgba(170,210,255,0.08); border-color:var(--sim-border-h); box-shadow:var(--sim-glow-h); }

.zodiac-detail-desc { font-size:1rem; color:rgba(180,150,230,.8); line-height:1.7; margin:0; border-top:1px solid rgba(100,50,200,.18); padding-top:14px; }

/* ── Sekme sistemi ── */
.zd-tabs    { display:flex; gap:6px; margin:14px 0 0; padding-bottom:14px; border-bottom:2px solid var(--sim-border); }
.zd-tab-btn { flex:1; padding:9px 0; background:transparent; border:2px solid var(--sim-border); border-radius:9px; color:rgba(160,120,220,.55); font-size:1rem; font-weight:600; cursor:pointer; transition:all .18s; letter-spacing:.3px; }
.zd-tab-btn:hover  { border-color:var(--sim-border-h); color:rgba(200,160,255,.85); background:rgba(170,210,255,0.06); }
.zd-tab-btn.zdt-active { background:rgba(170,210,255,0.08); border-color:var(--sim-border-h); color:#d4b8ff; box-shadow:var(--sim-glow-h); }
.zd-tab-pane           { display:none; }
.zd-tab-pane.zdp-active { display:block; }

/* ── Alan kartları ── */
.zd-area-cards { display:flex; flex-direction:row; gap:6px; margin-top:16px; align-items:stretch; min-height:190px; max-height:200px; }
.zd-area-card  { position:relative; border-radius:10px; border-top:3px solid transparent; overflow:hidden; display:flex; flex-direction:row; flex:0 0 32px; transition:flex-grow .38s cubic-bezier(.4,0,.2,1); cursor:pointer; }
.zd-area-card.zd-open  { flex-grow:1; cursor:default; }
.zd-area-card.zd-is    { background:rgba(30,50,115,0.65);  border-top-color:#4488ff; }
.zd-area-card.zd-ask   { background:rgba(115,25,65,0.65);  border-top-color:#ff5599; }
.zd-area-card.zd-hayat { background:rgba(70,22,135,0.65);  border-top-color:#9955ff; }

.zd-area-hdr { width:32px; flex-shrink:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; padding:12px 0; writing-mode:vertical-rl; transform:rotate(180deg); font-size:1rem; font-weight:700; letter-spacing:1.2px; user-select:none; transition:opacity .2s; white-space:nowrap; cursor:pointer; }
.zd-is    .zd-area-hdr { color:#6aaeff; }
.zd-ask   .zd-area-hdr { color:#ff7ab5; }
.zd-hayat .zd-area-hdr { color:#bb88ff; }
.zd-area-card.zd-open .zd-area-hdr { opacity:.45; }

.zd-area-body { flex:1 1 0; overflow-y:auto; overflow-x:hidden; opacity:0; pointer-events:none; padding:0; transition:opacity .22s .12s; min-width:0; }
.zd-area-card.zd-open .zd-area-body { opacity:1; pointer-events:auto; padding:13px 13px 13px 6px; }

.zd-area-row         { margin-bottom:9px; }
.zd-area-row:last-child { margin-bottom:0; }
.zd-row-label { display:block; font-size:1rem; font-weight:700; letter-spacing:.6px; text-transform:uppercase; margin-bottom:3px; color:rgba(180,150,230,.45); }
.zd-row-val   { display:block; font-size:1rem; color:rgba(200,178,238,.82); line-height:1.55; }

/* ── Uyum sekmesi ── */
.zd-compat-intro { font-size:1rem; color:rgba(160,130,210,.65); margin:12px 0 8px; font-weight:500; }
.zd-compat-grid  { display:grid; grid-template-columns:repeat(6,1fr); gap:5px; margin-bottom:14px; }
.zd-csign        { display:flex; flex-direction:column; align-items:center; padding:7px 3px; background:transparent; border:2px solid var(--sim-border); border-radius:8px; cursor:pointer; transition:all .16s; }
.zd-csign:hover  { border-color:var(--sim-border-h); background:rgba(170,210,255,0.06); transform:translateY(-1px); }
.zd-csign.zd-sel { border-color:var(--sim-border-h); background:rgba(170,210,255,0.10); box-shadow:var(--sim-glow-h); }
.zd-csign-sym    { font-size:1rem; line-height:1.2; }
.zd-csign-name   { font-size:1rem; color:rgba(160,130,210,.6); margin-top:2px; }

.zd-compat-result { animation:zdFadeUp .3s ease; }
@keyframes zdFadeUp { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }

.zd-compat-pair  { text-align:center; font-size:1rem; font-weight:700; color:#c8a8ff; margin-bottom:14px; line-height:1.5; }
.zd-compat-level { display:block; font-size:1rem; font-weight:600; color:rgba(200,170,255,.7); margin-top:4px; letter-spacing:.3px; }

.zd-score-row  { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.zd-score-lbl  { font-size:1rem; color:rgba(170,140,225,.7); width:60px; flex-shrink:0; }
.zd-score-bar  { flex:1; height:6px; background:rgba(40,20,100,.5); border-radius:4px; overflow:hidden; }
.zd-score-fill { height:100%; width:0; border-radius:4px; transition:width .9s cubic-bezier(.4,0,.2,1); }
.zd-fill-is    { background:linear-gradient(90deg,#2266cc,#55aaff); }
.zd-fill-ask   { background:linear-gradient(90deg,#cc1166,#ff5599); }
.zd-fill-hayat { background:linear-gradient(90deg,#7722cc,#bb55ff); }
.zd-score-pct  { font-size:1rem; font-weight:700; color:#a080dd; width:34px; text-align:right; flex-shrink:0; }

.zd-compat-comment { font-size:1rem; color:rgba(175,145,225,.78); line-height:1.62; background:transparent; border:2px solid var(--sim-border); border-left:3px solid var(--sim-border-h); border-radius:9px; padding:11px 14px; margin-top:8px; box-shadow:var(--sim-glow); }

/* ── Modum sekmesi ── */
.zd-mod-intro        { font-size:1rem; color:rgba(170,155,220,.75); margin:14px 0 12px; line-height:1.6; }
.zd-mod-intro small  { font-size:1rem; opacity:.65; }
.zd-mod-input-row    { display:flex; gap:8px; align-items:center; }
.zd-mod-input        { flex:1; background:transparent; border:2px solid var(--sim-border); border-radius:8px; padding:9px 12px; color:#ccc8ee; font-size:.85rem; outline:none; transition:border-color .18s,box-shadow .18s; min-width:0; }
.zd-mod-input::placeholder { color:rgba(130,120,190,.38); }
.zd-mod-input:focus        { border-color:var(--sim-border-h); box-shadow:var(--sim-glow-h); }
.zd-mod-submit { background:transparent; border:2px solid var(--sim-border); border-radius:8px; color:#b8a8ff; font-size:1rem; font-weight:600; padding:9px 14px; cursor:pointer; white-space:nowrap; transition:all .16s; flex-shrink:0; }
.zd-mod-submit:hover { background:rgba(170,210,255,0.08); border-color:var(--sim-border-h); color:#d0c4ff; box-shadow:var(--sim-glow-h); }

.zd-mod-result, .zd-mod-done { animation:zdFadeUp .3s ease; margin-top:16px; }
.zd-mod-done-hdr   { font-size:1rem; color:rgba(160,145,210,.5); text-align:center; margin-bottom:12px; letter-spacing:.4px; }
.zd-mod-badge-row  { display:flex; align-items:center; gap:8px; margin-bottom:10px; }
.zd-mod-badge-lbl  { font-size:1rem; text-transform:uppercase; letter-spacing:.7px; color:rgba(150,135,205,.48); font-weight:700; flex-shrink:0; }
.zd-mod-badge      { background:transparent; border:2px solid var(--sim-border); border-radius:20px; padding:3px 12px; font-size:1rem; font-weight:600; color:#b8a8ff; }
.zd-mod-text       { font-size:1rem; color:rgba(215,200,245,.86); line-height:1.68; background:transparent; border:2px solid var(--sim-border); border-left:3px solid var(--sim-border-h); border-radius:10px; padding:13px 14px; box-shadow:var(--sim-glow); }
.zd-mod-footer     { font-size:1rem; color:rgba(130,115,185,.42); margin-top:10px; text-align:center; letter-spacing:.3px; }
.zd-mod-hint       { margin-top:9px; font-size:1rem; color:rgba(200,170,255,.65); background:transparent; border:2px solid var(--sim-border); border-radius:8px; padding:8px 12px; animation:zdFadeUp .25s ease; }

.zd-daily-link-btn { display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:6px; background:transparent; border:2px solid var(--sim-border); color:rgba(130,170,255,.7); font-size:1rem; text-decoration:none; margin-left:8px; vertical-align:middle; transition:all .18s; flex-shrink:0; }
.zd-daily-link-btn:hover { background:rgba(170,210,255,0.10); border-color:var(--sim-border-h); color:#aaccff; }

.zd-yorum-empty  { text-align:center; padding:28px 16px; color:rgba(160,130,220,.5); font-size:1rem; line-height:1.65; }
.zd-yorum-hint   { display:block; font-size:1rem; color:rgba(130,100,200,.38); margin-top:6px; }
.zd-yorum-date   { font-size:1rem; color:rgba(150,120,220,.55); margin-bottom:12px; letter-spacing:.4px; }
.zd-yorum-text   { font-size:1rem; color:rgba(220,200,255,.85); line-height:1.65; padding:14px 14px 14px 16px; background:transparent; border-left:3px solid var(--sim-border-h); border-radius:0 8px 8px 0; margin-bottom:12px; }
.zd-yorum-footer { font-size:1rem; color:rgba(130,100,200,.45); text-align:right; }

/* ════════════════════════════════════════════════════════════════════════════
   24. KED HAYALLERİ — GOAL BAR & TABLO DÜZELTMELERİ
════════════════════════════════════════════════════════════════════════════ */

/* Hedef gösterge kartı */
.catd-goal-card {
    border-color: rgba(255,180,50,.25) !important;
    background: rgba(30,15,60,.96);
}
.catd-goal-title {
    font-size: clamp(.95rem,2.5vw,1.1rem);
    font-weight: 700;
    color: var(--skyra-gold, #ffd466);
    margin-bottom: 4px;
}
.catd-goal-nums {
    font-size: clamp(1.3rem,3vw,1.7rem);
    font-weight: 800;
    color: var(--skyra-gold, #ffd466);
    line-height: 1.2;
}
.catd-goal-nums .catd-goal-of {
    font-size: .85rem;
    font-weight: 400;
    color: rgba(200,180,240,.45);
    margin: 0 4px;
}
.catd-goal-nums .catd-goal-tgt {
    font-size: 1rem;
    color: rgba(200,180,240,.55);
}
.catd-goal-bar-wrap {
    height: 12px;
    background: rgba(150,80,255,.12);
    border-radius: 12px;
    overflow: hidden;
    margin: 10px 0 6px;
}
.catd-goal-bar {
    height: 100%;
    background: linear-gradient(90deg, #ffaa22, #ff7700);
    border-radius: 12px;
    transition: width .6s ease;
    position: relative;
}
.catd-goal-bar::after {
    content: '';
    position: absolute;
    right: 0; top: 0;
    width: 6px; height: 100%;
    background: rgba(255,255,255,.35);
    border-radius: 0 12px 12px 0;
}
.catd-goal-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: .82rem;
}
.catd-goal-pct   { color: var(--skyra-gold, #ffd466); font-weight: 700; }
.catd-countdown  { color: rgba(200,180,240,.65); }
.catd-countdown.urgent { color: #ff8844; }

/* Hedef ayarla accordion başlığı */
.catd-goal-toggle {
    background: none;
    border: none;
    color: rgba(200,180,240,.55);
    font-size: .82rem;
    cursor: pointer;
    padding: 0;
    transition: color .2s;
}
.catd-goal-toggle:hover { color: #cc99ff; }

/* Section title */
.catd-section-title {
    color: #bb99dd;
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: .75rem;
}
/* Durum metinleri */
.catd-active-txt   { color: rgba(80,200,100,.85); font-size: .88rem; margin-left: 3px; }
.catd-inactive-txt { color: rgba(200,180,240,.38); font-size: .88rem; }

/* Edit satırı */
.catd-edit-row > td {
    background: rgba(150,80,255,.06) !important;
    padding: 8px 12px !important;
    border-bottom: 1px solid rgba(150,80,255,.12) !important;
}

/* ── MoodConfig label görünürlük düzeltmesi ── */
.mood-form-label {
    font-size: .82rem;
    color: rgba(200,180,240,.80);
    margin-bottom: 4px;
    display: block;
}
#resp-cat-label {
    color: #cc99ff !important;
    font-size: .9rem;
}

/* ── CatDreams — Toast bildirimi ── */
.catd-toast {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
    padding: 10px 20px;
    border-radius: 10px;
    font-size: .9rem;
    font-weight: 600;
    box-shadow: 0 4px 20px rgba(0,0,0,.35);
    transition: opacity .3s, transform .3s;
    pointer-events: none;
    max-width: 320px;
}
.catd-toast--ok {
    background: rgba(20,80,40,.95);
    border: 1px solid rgba(40,200,80,.4);
    color: #66ee99;
}
.catd-toast--err {
    background: rgba(80,20,20,.95);
    border: 1px solid rgba(200,60,60,.4);
    color: #ff9999;
}
.catd-toast--hidden {
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
}

/* ── CatDreams — Line-art kedi (walk + sit + dream bubble) ── */
.catd-sitter-host {
    position: relative;
    width: 100%;
    height: 120px;
    margin-bottom: 6px;
    overflow: visible;
    --catd-cat-x: 10%;
}
.catd-cat-svg {
    position: absolute;
    bottom: 0;
    left: var(--catd-cat-x, 10%);
    width: 110px;
    height: 64px;
    transform-origin: center bottom;
    filter: drop-shadow(0 2px 6px rgba(180,130,255,.18));
    will-change: left, transform;
}

/* Bacak sallama (walk) */
.catd-cat-svg.catd-walking .catd-leg {
    transform-origin: top center;
    transform-box: fill-box;
    animation: catd-leg-swing 520ms ease-in-out infinite;
}
.catd-cat-svg.catd-walking .catd-leg-fl { animation-delay:   0ms; }
.catd-cat-svg.catd-walking .catd-leg-fr { animation-delay: 260ms; }
.catd-cat-svg.catd-walking .catd-leg-bl { animation-delay: 260ms; }
.catd-cat-svg.catd-walking .catd-leg-br { animation-delay:   0ms; }
.catd-cat-svg.catd-walking .catd-tail {
    transform-origin: 34px 44px;
    transform-box: fill-box;
    animation: catd-tail-wag 900ms ease-in-out infinite;
}
@keyframes catd-leg-swing {
    0%,100% { transform: rotate(-14deg); }
    50%     { transform: rotate( 14deg); }
}
@keyframes catd-tail-wag {
    0%,100% { transform: rotate(-4deg); }
    50%     { transform: rotate( 8deg); }
}

/* Oturuş (sit) — bacakları sabitle, kuyruk yavaş sallansın */
.catd-cat-svg.catd-sitting {
    transform: translateY(4px) scaleX(var(--catd-facing,1));
}
.catd-cat-svg.catd-sitting .catd-leg { animation: none; transform: none; }
.catd-cat-svg.catd-sitting .catd-tail {
    transform-origin: 34px 44px;
    transform-box: fill-box;
    animation: catd-tail-wag 1800ms ease-in-out infinite;
}

/* Konuşma balonu */
.catd-cat-bubble {
    position: absolute;
    bottom: 72px;
    left: calc(var(--catd-cat-x, 10%) + 55px);
    transform: translateX(-50%) translateY(6px);
    min-width: 120px;
    max-width: 240px;
    padding: 8px 12px;
    background: linear-gradient(180deg, rgba(40,26,70,.96), rgba(24,16,46,.96));
    border: 1px solid rgba(190,150,255,.45);
    border-radius: 12px;
    color: #e8d8ff;
    font-size: .78rem;
    line-height: 1.35;
    text-align: center;
    box-shadow: 0 6px 20px rgba(90,40,160,.28);
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease, transform .25s ease;
    z-index: 2;
    white-space: normal;
}
.catd-cat-bubble.catd-cat-bubble--visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
.catd-cat-bubble-tail {
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 12px;
    height: 12px;
    background: rgba(24,16,46,.96);
    border-right: 1px solid rgba(190,150,255,.45);
    border-bottom: 1px solid rgba(190,150,255,.45);
}
.catd-cat-bubble-text { display: block; }

/* ── CatDreams — Motivasyon metni (admin-only, sadece hedef satırında) ── */
.catd-motiv-txt {
    font-size: .76rem;
    color: rgba(255, 190, 70, 0.72);
    font-style: italic;
    margin-top: 5px;
    letter-spacing: .2px;
    line-height: 1.4;
}

/* ── CatDreams — Başlık düzenleme ── */
.catd-icon-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: .9rem;
    opacity: .45;
    transition: opacity .2s;
    padding: 2px 4px;
    border-radius: 4px;
    line-height: 1;
}
.catd-icon-btn:hover { opacity: 1; background: rgba(150,80,255,.12); }
.catd-title-inp { max-width: 320px; }

/* ── CatDreams — Satır metin düzenleme ── */
.catd-dream-txt { cursor: pointer; }
.catd-dream-txt:hover { color: #ddbbff; }
.catd-edit-wrap { padding-top: 4px; }

/* ── CatDreams — Aktif / Pasif badge ── */
.catd-active-txt   { color: rgba(80,200,100,.85); font-size: .85rem; }
.catd-inactive-txt { color: rgba(200,180,240,.35); font-size: .85rem; }

/* ── CatDreams — Hedef satır vurgusu ── */
.catd-goal-row > td {
    background: rgba(255,170,30,.04) !important;
    border-left: 2px solid rgba(255,170,30,.35) !important;
}
.catd-goal-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: .75rem;
    color: rgba(255,180,50,.85);
    border: 1px solid rgba(255,170,30,.3);
    border-radius: 10px;
    padding: 1px 7px;
    margin-left: 6px;
    vertical-align: middle;
    white-space: nowrap;
}

/* ── CatDreams — Kronoloji timeline ── */
.catd-list-header {
    padding: 12px 16px;
    border-bottom: 1px solid rgba(255,255,255,.07);
}
.catd-tl-wrap {
    max-height: 580px;
    overflow-y: auto;
    padding: 16px 20px 8px 20px;
}
.catd-timeline {
    list-style: none;
    margin: 0;
    padding: 0;
}
.catd-tl-item {
    position: relative;
    padding: 0 0 20px 24px;
    border-left: 2px solid rgba(150,80,255,.18);
    transition: background .15s;
}
.catd-tl-item:last-child {
    border-left: 2px solid transparent;
    padding-bottom: 4px;
}
.catd-tl-dot {
    position: absolute;
    left: -7px;
    top: 4px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(150,80,255,.5);
    border: 2px solid rgba(150,80,255,.85);
    transition: transform .15s;
}
.catd-tl-item:hover .catd-tl-dot { transform: scale(1.25); }
.catd-tl-dot--goal  { background: rgba(255,170,30,.55); border-color: rgba(255,170,30,.9); }
.catd-tl-dot--pasif { background: rgba(200,180,240,.15); border-color: rgba(200,180,240,.3); }
.catd-tl-date {
    font-size: .68rem;
    color: rgba(200,180,240,.38);
    letter-spacing: .3px;
    margin-bottom: 2px;
}
.catd-tl-item--sel {
    background: rgba(150,80,255,.08);
    border-left-color: rgba(150,80,255,.55) !important;
    border-radius: 0 6px 6px 0;
    padding-left: 20px;
}
.catd-tl-item--sel .catd-tl-dot { left: -9px; width: 16px; height: 16px; }
.catd-tl-item--goal {
    border-left-color: rgba(255,170,30,.3) !important;
}
.catd-dream-list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 520px;
    overflow-y: auto;
}
.catd-dream-item {
    padding: 10px 14px;
    border-bottom: 1px solid rgba(255,255,255,.05);
    transition: background .15s;
}
.catd-dream-item:last-child { border-bottom: none; }
.catd-dream-item:hover { background: rgba(150,80,255,.06); }
.catd-dream-item.catd-item-selected {
    background: rgba(150,80,255,.13) !important;
    border-left: 3px solid rgba(150,80,255,.6);
    padding-left: 11px;
}
.catd-dream-item.catd-item-goal {
    background: rgba(255,170,30,.04);
    border-left: 2px solid rgba(255,170,30,.3);
    padding-left: 12px;
}
.catd-dream-item.catd-item-selected.catd-item-goal {
    border-left: 3px solid rgba(150,80,255,.6);
    padding-left: 11px;
}
.catd-dream-txt {
    font-size: .9rem;
    line-height: 1.4;
    word-break: break-word;
}
.catd-badge-inline {
    display: inline-flex;
    align-items: center;
    font-size: .7rem;
    color: rgba(255,180,50,.85);
    border: 1px solid rgba(255,170,30,.3);
    border-radius: 10px;
    padding: 1px 6px;
    margin-left: 5px;
    vertical-align: middle;
    white-space: nowrap;
}

/* ── CatDreams — Panel form etiketleri ── */
.catd-goal-inp-label {
    font-size: .75rem;
    color: rgba(200,180,240,.65);
    margin-bottom: 3px;
}
#catd-right-panel .skyra-input,
#catd-remind-card .skyra-input {
    font-size: .88rem;
}

/* ── CatDreams — Hatırlatma toggle switch ── */
.catd-toggle-wrap {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    cursor: pointer;
    flex-shrink: 0;
}
.catd-toggle-wrap input { opacity: 0; width: 0; height: 0; }
.catd-toggle-slider {
    position: absolute;
    inset: 0;
    background: rgba(200,180,240,.18);
    border-radius: 24px;
    transition: background .25s;
}
.catd-toggle-slider::before {
    content: '';
    position: absolute;
    width: 18px; height: 18px;
    left: 3px; top: 3px;
    background: rgba(200,180,240,.5);
    border-radius: 50%;
    transition: transform .25s, background .25s;
}
.catd-toggle-wrap input:checked + .catd-toggle-slider {
    background: rgba(120,200,100,.35);
}
.catd-toggle-wrap input:checked + .catd-toggle-slider::before {
    transform: translateX(20px);
    background: rgba(80,220,120,.9);
}

/* ── CatDreams — Animasyon seçici (picker) ── */
.catd-anim-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.catd-anim-opt {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 8px 10px;
    background: rgba(150,80,255,.08);
    border: 1px solid rgba(150,80,255,.2);
    border-radius: 10px;
    cursor: pointer;
    transition: background .15s, border-color .15s, transform .12s;
    min-width: 62px;
}
.catd-anim-opt:hover {
    background: rgba(150,80,255,.16);
    border-color: rgba(150,80,255,.45);
    transform: translateY(-2px);
}
.catd-anim-opt--sel {
    background: rgba(150,80,255,.22) !important;
    border-color: rgba(150,80,255,.7) !important;
    box-shadow: 0 0 10px rgba(150,80,255,.25);
}
.catd-anim-opt-icon { font-size: 1.5rem; line-height: 1; }
.catd-anim-opt-label { font-size: .68rem; color: rgba(200,180,240,.7); }

/* ── CatDreams — Overlay animasyon alanı ── */
.catd-nag-anim-area {
    height: 180px;
    position: relative;
    overflow: hidden;
    margin-bottom: 16px;
    border-radius: 10px;
    background: rgba(0,0,0,.25);
}
.catd-nag-anim-area canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
}
/* Zincir başlık (kızgın mod) */
.catd-nag-title--chain {
    color: rgba(255,120,80,.95) !important;
    font-size: 1.05rem;
    animation: catdTitlePulse .6s ease-in-out infinite alternate;
}
@keyframes catdTitlePulse {
    from { text-shadow: none; }
    to   { text-shadow: 0 0 12px rgba(255,100,50,.6); }
}
/* Sallama animasyonu */
.catd-nag-shake {
    animation: catdNagShake .32s ease !important;
}
@keyframes catdNagShake {
    0%,100% { transform: translateX(0); }
    20%     { transform: translateX(-10px) rotate(-1deg); }
    40%     { transform: translateX(10px) rotate(1deg); }
    60%     { transform: translateX(-7px) rotate(-.5deg); }
    80%     { transform: translateX(7px) rotate(.5deg); }
}

/* Animasyon 1: Kedi */
.catd-nag-anim-cat {
    display: block;
    font-size: 3.2rem;
    text-align: center;
    line-height: 80px;
    animation: catdBounce .8s ease-in-out infinite alternate;
}
@keyframes catdBounce {
    from { transform: translateY(0)   scale(1);    }
    to   { transform: translateY(-12px) scale(1.1); }
}

/* Animasyon 2: Roket */
.catd-nag-anim-rocket {
    position: absolute;
    font-size: 1.8rem;
    animation: catdRocketFly 1.7s ease-in forwards;
}
@keyframes catdRocketFly {
    0%   { left: -40px; bottom: 20%; opacity: 1; transform: rotate(-35deg) scale(.8); }
    60%  { opacity: 1; }
    100% { left: 110%;  bottom: 70%; opacity: 0; transform: rotate(-35deg) scale(1.2); }
}

/* Animasyon 3: Konfeti */
.catd-nag-anim-konfeti {
    position: absolute;
    top: -12px;
    animation: catdKonfetifall linear forwards;
}
@keyframes catdKonfetifall {
    0%   { top: -12px; transform: rotate(0deg); opacity: 1; }
    80%  { opacity: .8; }
    100% { top: 110%;  transform: rotate(540deg); opacity: 0; }
}

/* Animasyon 4: Ateş */
.catd-nag-anim-fire {
    position: absolute;
    bottom: -30px;
    font-size: 1.5rem;
    animation: catdFireRise ease-out forwards;
}
@keyframes catdFireRise {
    0%   { bottom: -30px; opacity: 0; transform: scale(.5) translateX(0); }
    30%  { opacity: 1; }
    70%  { transform: scale(1.1) translateX(8px); }
    100% { bottom: 110%; opacity: 0; transform: scale(.7) translateX(-5px); }
}

/* Animasyon 5: Matrix */
.catd-nag-anim-matrix {
    position: absolute;
    top: -20px;
    font-size: .82rem;
    font-family: 'Courier New', monospace;
    color: rgba(80,220,120,.85);
    font-weight: 700;
    text-shadow: 0 0 6px rgba(80,220,120,.6);
    animation: catdMatrixFall linear forwards;
}
@keyframes catdMatrixFall {
    0%   { top: -20px; opacity: 0; }
    15%  { opacity: 1; }
    85%  { opacity: .9; }
    100% { top: 110%; opacity: 0; }
}

/* ── CatDreams — Bildirim overlay (tam ekran sıkıştırma) ── */
.catd-nag-overlay {
    position: fixed;
    inset: 0;
    background: rgba(10,5,25,.82);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: catdNagIn .35s ease;
}
@keyframes catdNagIn {
    from { opacity:0; transform: scale(.95); }
    to   { opacity:1; transform: scale(1);   }
}
.catd-nag-box {
    background: linear-gradient(135deg, rgba(40,20,70,.98) 0%, rgba(25,10,50,.98) 100%);
    border: 1px solid rgba(150,80,255,.4);
    border-radius: 16px;
    padding: 36px 40px;
    max-width: 440px;
    width: 90%;
    text-align: center;
    box-shadow: 0 0 60px rgba(150,80,255,.25);
}
.catd-nag-cat {
    font-size: 3rem;
    display: block;
    margin-bottom: 12px;
    animation: catdNagBounce 1s infinite alternate;
}
@keyframes catdNagBounce {
    from { transform: translateY(0); }
    to   { transform: translateY(-8px); }
}
.catd-nag-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: rgba(220,200,255,.95);
    margin-bottom: 8px;
}
.catd-nag-msg {
    font-size: .92rem;
    color: rgba(200,180,240,.7);
    margin-bottom: 6px;
    line-height: 1.5;
}
.catd-nag-progress {
    font-size: .82rem;
    color: rgba(255,180,50,.8);
    font-style: italic;
    margin-bottom: 20px;
}
.catd-nag-btn {
    background: linear-gradient(135deg,rgba(150,80,255,.8),rgba(100,40,200,.8));
    border: none;
    color: #fff;
    font-size: .95rem;
    font-weight: 600;
    padding: 10px 28px;
    border-radius: 8px;
    cursor: pointer;
    transition: opacity .2s;
    margin: 0 6px;
}
.catd-nag-btn:hover { opacity: .85; }
.catd-nag-btn--skip {
    background: rgba(200,180,240,.1);
    border: 1px solid rgba(200,180,240,.2);
    font-weight: 400;
    font-size: .82rem;
}


/* ════════════════════════════════════════════════════════════════════════════
   MOBILE RESPONSIVE — Modal & Genel Düzeltmeler  (≤ 480px)
════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {

    /* ── Genel modal overlay padding ── */
    .reg-overlay,
    .zodiac-overlay,
    .zodiac-detail,
    .chat-modal-overlay,
    .catd-nag-overlay {
        padding: 8px;
        align-items: flex-end;   /* altta hizala — daha ergonomik */
    }

    /* ── Kayıt / Giriş modalı ── */
    .reg-card {
        padding: 20px 16px 18px;
        border-radius: 16px 16px 0 0;
        max-width: 100%;
        max-height: 92vh;
        overflow-y: auto;
    }
    .reg-logo  { font-size: 1.8rem; }
    .reg-title { font-size: 1.05rem; }
    .reg-sub   { font-size: .82rem; }

    /* ── Chat not modalı ── */
    .chat-modal-box {
        padding: 18px 14px;
        border-radius: 16px 16px 0 0;
        max-width: 100%;
        max-height: 88vh;
        overflow-y: auto;
    }
    .chat-modal-title { font-size: .9rem; margin-bottom: 10px; }

    /* ── Burç listesi paneli ── */
    .zodiac-panel {
        padding: 16px 12px 14px;
        border-radius: 16px 16px 0 0;
        max-width: 100%;
        max-height: 88vh;
    }
    .zodiac-panel-title { font-size: 1rem; }
    .zodiac-grid        { grid-template-columns: repeat(3, 1fr); gap: 6px; }
    .zodiac-card        { padding: 10px 6px 8px; }
    .zodiac-card-sym    { font-size: 1.35rem; }
    .zodiac-card-name   { font-size: .78rem; }
    .zodiac-card-dates  { font-size: .72rem; }

    /* ── Burç detay paneli ── */
    .zodiac-detail-card {
        padding: 18px 14px 16px;
        border-radius: 16px 16px 0 0;
        max-width: 100%;
        max-height: 88vh;
    }

    /* ── CatDreams bildirim modalı ── */
    .catd-nag-box {
        padding: 22px 18px;
        border-radius: 16px 16px 0 0;
        max-width: 100%;
        width: 100%;
        max-height: 85vh;
        overflow-y: auto;
    }
    .catd-nag-cat   { font-size: 2.2rem; }
    .catd-nag-title { font-size: 1rem; }
    .catd-nag-msg   { font-size: .84rem; }

    /* ── Skyra genel kart padding küçültme ── */
    .skyra-card { padding: 14px 12px; }

    /* ── Admin tablo scroll ── */
    .adm-scroll-500,
    .adm-scroll-380,
    .adm-scroll-300 { max-height: 220px; }

    /* ── Tablo font küçültme ── */
    .skyra-table      { font-size: .8rem; }
    .skyra-table th,
    .skyra-table td   { padding: 6px 8px; }
}

/* ════════════════════════════════════════════════════════════════════════════
   APOD — NASA Astronomy Picture of the Day Panel (Simülasyon sayfası)
════════════════════════════════════════════════════════════════════════════ */

.sim-apod-btn {
    background: transparent;
    border: 2px solid var(--sim-border);
    color: #9cd8ff;
    border-radius: 8px;
    padding: 5px 12px;
    font-size: 1rem;
    cursor: pointer;
    transition: all .2s;
    white-space: nowrap;
}
.sim-apod-btn:hover {
    background: rgba(120,180,255,0.08);
    color: #c8e8ff;
    border-color: var(--sim-border-h);
    box-shadow: var(--sim-glow-h);
}

.apod-panel {
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: min(92vw, 560px);
    max-height: 88vh;
    overflow-y: auto;
    background: rgba(4,8,24,0.88);
    border: 2px solid rgba(120,180,255,0.45);
    border-radius: 16px;
    padding: 22px 24px 18px;
    z-index: 55;
    backdrop-filter: blur(8px);
    box-shadow: 0 0 12px rgba(120,180,255,0.35), 0 0 36px rgba(60,120,220,0.20);
    animation: apodIn .22s ease;
    color: rgba(200,220,255,.85);
}
@keyframes apodIn {
    from { opacity: 0; transform: translate(-50%,-50%) scale(.94); }
    to   { opacity: 1; transform: translate(-50%,-50%) scale(1);   }
}
.apod-close {
    position: absolute; top: 10px; right: 14px;
    background: none; border: none;
    color: rgba(150,190,255,.55); font-size: 16px; cursor: pointer;
    transition: color .15s;
}
.apod-close:hover { color: rgba(200,220,255,.95); }

.apod-header   { text-align: center; margin-bottom: 14px; padding-right: 24px; }
.apod-badge    {
    display: inline-block; font-size: .85rem; font-weight: 600;
    color: #9cd8ff; border: 1.5px solid rgba(120,180,255,0.40);
    border-radius: 20px; padding: 2px 10px; margin-bottom: 8px;
    letter-spacing: .02em;
}
.apod-title    {
    font-size: 1.15rem; font-weight: 700;
    color: #c8e8ff; margin: 0 0 4px;
    text-shadow: 0 0 10px rgba(120,180,255,.3);
}
.apod-date     { font-size: .85rem; color: rgba(150,190,255,.55); }

.apod-media    { margin-bottom: 12px; text-align: center; }
.apod-media img,
.apod-media iframe {
    max-width: 100%;
    max-height: 360px;
    border-radius: 10px;
    border: 1.5px solid rgba(120,180,255,0.25);
    box-shadow: 0 0 14px rgba(80,140,220,0.22);
}
.apod-media iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; }

.apod-explanation {
    font-size: .92rem; line-height: 1.55;
    color: rgba(190,210,240,.80);
    margin: 0 0 12px;
    text-align: justify;
}
.apod-footer {
    display: flex; justify-content: space-between; align-items: center;
    gap: 12px; padding-top: 10px;
    border-top: 1px solid rgba(120,180,255,0.15);
    font-size: .85rem;
}
.apod-copyright { color: rgba(150,190,255,.50); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.apod-hd-link {
    color: #9cd8ff; text-decoration: none; font-weight: 600;
    padding: 3px 10px; border-radius: 6px;
    border: 1.5px solid rgba(120,180,255,0.35);
    transition: all .15s;
    white-space: nowrap;
}
.apod-hd-link:hover {
    background: rgba(120,180,255,0.12);
    color: #c8e8ff;
    border-color: rgba(120,180,255,0.60);
}
.apod-hd-link.sim-hidden { display: none !important; }

@media (max-width: 600px) {
    .apod-panel { width: 94vw; padding: 18px 16px 14px; }
    .apod-title { font-size: 1.02rem; }
    .apod-media img, .apod-media iframe { max-height: 260px; }
    .apod-explanation { font-size: .86rem; }
}

/* ════════════════════════════════════════════════════════════════════════════
   ISS Canlı Takip — Widget + Mini Harita Modalı
════════════════════════════════════════════════════════════════════════════ */

.iss-widget {
    position: absolute;
    top: 14px; right: 14px;
    z-index: 12;
    min-width: 168px;
    padding: 8px 12px 9px;
    background: rgba(4,8,24,0.78);
    border: 1.5px solid rgba(120,200,255,0.40);
    border-radius: 12px;
    color: rgba(200,220,255,.88);
    font-size: .82rem;
    text-align: left;
    cursor: pointer;
    transition: all .18s;
    backdrop-filter: blur(4px);
    box-shadow: 0 0 10px rgba(80,160,255,0.20);
}
.iss-widget:hover {
    border-color: rgba(120,200,255,0.75);
    box-shadow: 0 0 14px rgba(80,160,255,0.40);
    transform: translateY(-1px);
}
.iss-widget-head {
    display: flex; align-items: center; gap: 6px;
    font-weight: 700; color: #9cd8ff;
    margin-bottom: 4px;
    font-size: .78rem;
    letter-spacing: .04em;
}
.iss-widget-icon { font-size: 1rem; }
.iss-widget-title { flex: 1; }
.iss-pulse-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: #44ff88; box-shadow: 0 0 6px #44ff88;
    animation: issPulse 1.6s ease-in-out infinite;
}
.iss-pulse-dot.iss-offline { background: #ff6666; box-shadow: 0 0 6px #ff6666; animation: none; }
@keyframes issPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: .4; transform: scale(.75); }
}
.iss-widget-body { line-height: 1.35; }
.iss-coord {
    font-family: 'Consolas', 'Menlo', monospace;
    font-size: .92rem; font-weight: 600;
    color: #c8e8ff;
    margin-bottom: 2px;
}
.iss-stats { font-size: .74rem; color: rgba(170,200,240,.72); }
.iss-sep   { margin: 0 5px; color: rgba(120,180,255,.45); }
.iss-vis   { font-size: .72rem; color: rgba(170,200,240,.56); margin-top: 3px; font-style: italic; }

@media (max-width: 600px) {
    .iss-widget { top: 8px; right: 8px; min-width: 140px; font-size: .76rem; padding: 6px 9px 7px; }
    .iss-coord  { font-size: .84rem; }
}

/* ── ISS modal ── */
.iss-modal {
    position: fixed; inset: 0; z-index: 60;
    background: rgba(2,4,18,0.78);
    backdrop-filter: blur(6px);
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
}
.iss-modal.sim-hidden { display: none !important; }
.iss-modal-inner {
    position: relative;
    width: min(96vw, 680px);
    max-height: 92vh;
    overflow-y: auto;
    background: rgba(4,8,24,0.94);
    border: 2px solid rgba(120,200,255,0.50);
    border-radius: 16px;
    padding: 22px 24px 20px;
    box-shadow: 0 0 18px rgba(80,160,255,0.35), 0 0 48px rgba(60,120,220,0.22);
    animation: issIn .22s ease;
    color: rgba(200,220,255,.88);
}
@keyframes issIn {
    from { opacity: 0; transform: scale(.94); }
    to   { opacity: 1; transform: scale(1);   }
}
.iss-modal-close {
    position: absolute; top: 10px; right: 14px;
    background: none; border: none;
    color: rgba(150,190,255,.55); font-size: 16px; cursor: pointer;
    transition: color .15s;
}
.iss-modal-close:hover { color: rgba(200,220,255,.95); }
.iss-modal-title {
    margin: 0 0 4px; font-size: 1.15rem; font-weight: 700;
    color: #c8e8ff; text-shadow: 0 0 10px rgba(120,180,255,.3);
    padding-right: 24px;
}
.iss-modal-sub {
    font-size: .82rem; color: rgba(150,190,255,.60);
    margin-bottom: 14px;
    font-family: 'Consolas', 'Menlo', monospace;
}
.iss-map {
    display: block;
    width: 100%; height: auto; aspect-ratio: 2 / 1;
    border-radius: 10px;
    border: 1.5px solid rgba(120,180,255,0.25);
    background: #050a1c;
    margin-bottom: 14px;
}
.iss-modal-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px 14px;
    margin-bottom: 12px;
}
.iss-modal-grid > div {
    background: rgba(80,140,220,0.06);
    border: 1px solid rgba(120,180,255,0.18);
    border-radius: 8px;
    padding: 7px 10px;
}
.iss-lbl {
    display: block; font-size: .68rem;
    color: rgba(150,190,255,.55);
    text-transform: uppercase; letter-spacing: .06em;
    margin-bottom: 2px;
}
.iss-modal-grid strong {
    font-size: .92rem; color: #c8e8ff;
    font-family: 'Consolas', 'Menlo', monospace;
    font-weight: 600;
}
.iss-modal-note {
    font-size: .72rem; color: rgba(130,170,220,.45);
    text-align: center; padding-top: 8px;
    border-top: 1px solid rgba(120,180,255,0.12);
    font-style: italic;
}

@media (max-width: 560px) {
    .iss-modal-grid { grid-template-columns: repeat(2, 1fr); }
    .iss-modal-title { font-size: 1rem; }
}

/* ════════════════════════════════════════════════════════════════════════════
   Gezegen Bilgi Paneli
════════════════════════════════════════════════════════════════════════════ */

.planet-panel {
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: min(92vw, 520px);
    max-height: 88vh;
    overflow-y: auto;
    background: rgba(4,8,24,0.92);
    border: 2px solid rgba(180,140,255,0.45);
    border-radius: 16px;
    padding: 22px 26px 18px;
    z-index: 55;
    backdrop-filter: blur(8px);
    box-shadow: 0 0 14px rgba(180,140,255,0.30), 0 0 40px rgba(120,80,220,0.18);
    animation: planetIn .22s ease;
    color: rgba(220,210,240,.88);
}
@keyframes planetIn {
    from { opacity: 0; transform: translate(-50%,-50%) scale(.94); }
    to   { opacity: 1; transform: translate(-50%,-50%) scale(1);   }
}
.planet-close {
    position: absolute; top: 10px; right: 14px;
    background: none; border: none;
    color: rgba(200,180,255,.55); font-size: 16px; cursor: pointer;
    transition: color .15s;
}
.planet-close:hover { color: rgba(220,210,255,.95); }

.planet-head {
    display: flex; align-items: center; gap: 14px;
    margin-bottom: 12px;
    padding-right: 24px;
}
.planet-symbol {
    font-size: 2.2rem; line-height: 1;
    filter: drop-shadow(0 0 10px rgba(180,140,255,.4));
}
.planet-title {
    font-size: 1.35rem; font-weight: 700;
    color: #e0d0ff; margin: 0 0 2px;
    text-shadow: 0 0 10px rgba(180,140,255,.35);
}
.planet-subtitle {
    font-size: .82rem; color: rgba(200,180,255,.55);
    font-family: 'Consolas', 'Menlo', monospace;
    letter-spacing: .02em;
}

.planet-fact {
    font-size: .92rem; line-height: 1.55;
    color: rgba(220,210,240,.82);
    background: rgba(120,80,220,0.08);
    border-left: 3px solid rgba(180,140,255,0.55);
    border-radius: 0 8px 8px 0;
    padding: 10px 14px;
    margin: 0 0 14px;
    font-style: italic;
}

.planet-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px 12px;
    margin-bottom: 12px;
}
.planet-stat {
    background: rgba(120,80,220,0.06);
    border: 1px solid rgba(180,140,255,0.18);
    border-radius: 8px;
    padding: 8px 11px;
}
.planet-stat-lbl {
    display: block; font-size: .68rem;
    color: rgba(200,180,255,.55);
    text-transform: uppercase; letter-spacing: .06em;
    margin-bottom: 3px;
}
.planet-stat-val {
    font-size: .94rem; color: #e0d0ff;
    font-family: 'Consolas', 'Menlo', monospace;
    font-weight: 600;
}

.planet-foot {
    font-size: .72rem; color: rgba(160,140,200,.45);
    text-align: center; padding-top: 10px;
    border-top: 1px solid rgba(180,140,255,0.15);
    font-style: italic;
}

@media (max-width: 560px) {
    .planet-grid { grid-template-columns: 1fr; }
    .planet-title { font-size: 1.15rem; }
    .planet-symbol { font-size: 1.8rem; }
}

/* ── Audit log badges ── */
.skyra-badge.badge-ok     { background: transparent; color: #44cc88; border: 1.5px solid rgba(0,200,100,0.45); padding: 2px 8px; border-radius: 10px; font-size: .78rem; }
.skyra-badge.badge-warn   { background: transparent; color: #ffcc44; border: 1.5px solid rgba(255,180,0,0.45); padding: 2px 8px; border-radius: 10px; font-size: .78rem; }
.skyra-badge.badge-danger { background: transparent; color: #ff6666; border: 1.5px solid rgba(255,80,80,0.45); padding: 2px 8px; border-radius: 10px; font-size: .78rem; }
.skyra-badge.badge-muted  { background: transparent; color: #8899aa; border: 1.5px solid rgba(120,140,160,0.35); padding: 2px 8px; border-radius: 10px; font-size: .78rem; }

/* ════════════════════════════════════════════════════════════════════════════
   Yaklaşan Fırlatmalar — Launches Panel
════════════════════════════════════════════════════════════════════════════ */

.sim-launches-btn {
    background: transparent;
    border: 2px solid var(--sim-border);
    color: #9cff9c;
    border-radius: 8px;
    padding: 5px 12px;
    font-size: 1rem;
    cursor: pointer;
    transition: all .2s;
    white-space: nowrap;
}
.sim-launches-btn:hover {
    background: rgba(120,255,120,0.08);
    color: #c8ffc8;
    border-color: var(--sim-border-h);
    box-shadow: var(--sim-glow-h);
}

.launches-panel {
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: min(94vw, 620px);
    max-height: 88vh;
    overflow-y: auto;
    background: rgba(4,16,8,0.90);
    border: 2px solid rgba(100,220,120,0.45);
    border-radius: 16px;
    padding: 22px 24px 18px;
    z-index: 55;
    backdrop-filter: blur(8px);
    box-shadow: 0 0 14px rgba(100,220,120,0.30), 0 0 40px rgba(60,180,80,0.18);
    animation: launchesIn .22s ease;
    color: rgba(220,240,220,.88);
}
@keyframes launchesIn {
    from { opacity: 0; transform: translate(-50%,-50%) scale(.94); }
    to   { opacity: 1; transform: translate(-50%,-50%) scale(1);   }
}
.launches-close {
    position: absolute; top: 10px; right: 14px;
    background: none; border: none;
    color: rgba(180,240,180,.55); font-size: 16px; cursor: pointer;
    transition: color .15s;
}
.launches-close:hover { color: rgba(220,255,220,.95); }

.launches-header { text-align: center; margin-bottom: 16px; padding-right: 24px; }
.launches-badge {
    display: inline-block; font-size: .85rem; font-weight: 600;
    color: #9cff9c; border: 1.5px solid rgba(100,220,120,0.40);
    border-radius: 20px; padding: 2px 10px; margin-bottom: 8px;
    letter-spacing: .02em;
}
.launches-title {
    font-size: 1.15rem; font-weight: 700;
    color: #c8ffc8; margin: 0;
    text-shadow: 0 0 10px rgba(100,220,120,.3);
}

.launches-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.launches-loading { text-align: center; padding: 20px; color: rgba(180,240,180,.55); font-style: italic; }

/* Launches / APOD — hata & tekrar dene */
.launches-error, .apod-error {
    text-align: center; padding: 24px 16px;
    color: rgba(220,180,180,.8);
    display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.launches-error-icon { font-size: 2rem; margin-bottom: 4px; }
.launches-error-sub, .apod-error-sub { font-size: .78rem; color: rgba(180,160,180,.6); }
.launches-retry-btn, .apod-retry-btn {
    margin-top: 10px;
    padding: 7px 16px;
    background: rgba(80,130,255,.15);
    border: 1px solid rgba(120,170,255,.4);
    border-radius: 8px;
    color: #aaccff;
    font-size: .84rem;
    cursor: pointer;
    transition: all .18s ease;
}
.launches-retry-btn:hover, .apod-retry-btn:hover {
    background: rgba(80,130,255,.28);
    border-color: rgba(150,190,255,.65);
    color: #e0ecff;
}

.launch-item {
    background: rgba(60,180,80,0.06);
    border: 1px solid rgba(100,220,120,0.20);
    border-radius: 10px;
    padding: 12px 14px;
    transition: all .15s;
}
.launch-item:hover {
    background: rgba(60,180,80,0.10);
    border-color: rgba(100,220,120,0.40);
}
.launch-item-head {
    display: flex; justify-content: space-between; align-items: start;
    gap: 10px; margin-bottom: 6px;
}
.launch-name {
    font-size: .94rem; font-weight: 700;
    color: #c8ffc8; flex: 1; line-height: 1.35;
}
.launch-status {
    font-size: .72rem; font-weight: 600;
    padding: 2px 8px; border-radius: 10px;
    white-space: nowrap; flex-shrink: 0;
}
.launch-status.status-go      { color: #44ff88; background: rgba(0,220,80,0.14); border: 1px solid rgba(0,220,80,0.3); }
.launch-status.status-tbd     { color: #ffcc44; background: rgba(255,180,0,0.12); border: 1px solid rgba(255,180,0,0.3); }
.launch-status.status-hold    { color: #ff6666; background: rgba(255,80,80,0.12); border: 1px solid rgba(255,80,80,0.3); }
.launch-status.status-default { color: #aaa; background: rgba(150,150,150,0.10); border: 1px solid rgba(150,150,150,0.25); }

.launch-meta {
    display: flex; flex-wrap: wrap; gap: 6px 14px;
    font-size: .78rem; color: rgba(180,240,180,.72);
    margin-bottom: 6px;
}
.launch-meta-item { display: flex; align-items: center; gap: 4px; }
.launch-net {
    font-family: 'Consolas', 'Menlo', monospace;
    font-size: .85rem; color: #9cff9c; font-weight: 600;
}
.launch-location {
    font-size: .72rem; color: rgba(160,200,170,.56);
    font-style: italic;
}

.launches-footer {
    font-size: .72rem; color: rgba(140,200,160,.45);
    text-align: center; padding-top: 10px;
    border-top: 1px solid rgba(100,220,120,0.15);
    font-style: italic;
}

@media (max-width: 560px) {
    .launches-panel { width: 96vw; padding: 16px 14px 12px; }
    .launch-name { font-size: .88rem; }
}

/* ════════════════════════════════════════════════════════════════════════════
   Achievement Toast Bildirimleri
════════════════════════════════════════════════════════════════════════════ */

.ach-toast-container {
    position: fixed;
    bottom: 80px; right: 20px;
    z-index: 9998;
    display: flex; flex-direction: column;
    gap: 10px; max-width: 340px;
    pointer-events: none;
}

.ach-toast {
    display: flex; align-items: flex-start; gap: 12px;
    background: linear-gradient(135deg, rgba(80,40,180,0.96) 0%, rgba(30,15,90,0.98) 100%);
    border: 2px solid rgba(200,140,255,0.55);
    border-radius: 12px;
    padding: 12px 36px 12px 14px;
    box-shadow: 0 4px 20px rgba(120,60,240,0.45), 0 0 40px rgba(180,100,255,0.20);
    color: #f0e5ff;
    opacity: 0;
    transform: translateX(420px);
    transition: opacity .35s ease, transform .35s cubic-bezier(.25,1.4,.5,1);
    pointer-events: auto;
    position: relative;
}
.ach-toast--in  { opacity: 1; transform: translateX(0); }
.ach-toast--out { opacity: 0; transform: translateX(420px); }

.ach-toast-icon {
    font-size: 2rem; line-height: 1;
    filter: drop-shadow(0 0 8px rgba(200,140,255,.55));
    flex-shrink: 0; margin-top: 2px;
}

.ach-toast-body { flex: 1; min-width: 0; }

.ach-toast-head {
    display: flex; align-items: center; gap: 8px;
    font-size: .72rem; font-weight: 700; letter-spacing: .06em;
    color: #d8b8ff; text-transform: uppercase;
    margin-bottom: 3px;
}
.ach-toast-label { flex: 1; }
.ach-toast-bonus {
    font-size: .72rem; font-weight: 700;
    color: #ffe080; background: rgba(255,220,80,0.18);
    padding: 1px 7px; border-radius: 10px;
    border: 1px solid rgba(255,220,80,0.35);
    letter-spacing: 0;
}
.ach-toast-name {
    font-size: 1rem; font-weight: 700;
    color: #fff; margin-bottom: 2px;
    text-shadow: 0 0 8px rgba(180,100,255,.4);
}
.ach-toast-desc {
    font-size: .78rem; color: rgba(220,200,255,.78); line-height: 1.35;
}

.ach-toast-close {
    position: absolute; top: 6px; right: 8px;
    background: none; border: none;
    color: rgba(220,200,255,.55); font-size: 14px; cursor: pointer;
    padding: 4px 6px; line-height: 1;
    transition: color .15s;
}
.ach-toast-close:hover { color: #fff; }

@media (max-width: 560px) {
    .ach-toast-container { bottom: 60px; right: 10px; left: 10px; max-width: none; }
}

/* ════════════════════════════════════════════════════════════════════════════
   Kozmik Hava Paneli (Ay fazı + Retrogradeler)
════════════════════════════════════════════════════════════════════════════ */

.sim-cw-btn {
    background: transparent;
    border: 2px solid var(--sim-border);
    color: #e0e4ff;
    border-radius: 8px;
    padding: 5px 12px;
    font-size: 1rem;
    cursor: pointer;
    transition: all .2s;
    white-space: nowrap;
}
.sim-cw-btn:hover {
    background: rgba(220,230,255,0.08);
    color: #fff;
    border-color: var(--sim-border-h);
    box-shadow: var(--sim-glow-h);
}

.cw-panel {
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: min(94vw, 540px);
    max-height: 88vh;
    overflow-y: auto;
    background: linear-gradient(180deg, rgba(14,18,36,0.94) 0%, rgba(4,8,24,0.96) 100%);
    border: 2px solid rgba(200,210,240,0.40);
    border-radius: 16px;
    padding: 22px 24px 18px;
    z-index: 55;
    backdrop-filter: blur(8px);
    box-shadow: 0 0 14px rgba(220,230,255,0.25), 0 0 44px rgba(140,160,220,0.18);
    color: rgba(220,230,255,.88);
    animation: cwIn .22s ease;
}
@keyframes cwIn {
    from { opacity: 0; transform: translate(-50%,-50%) scale(.94); }
    to   { opacity: 1; transform: translate(-50%,-50%) scale(1);   }
}
.cw-close {
    position: absolute; top: 10px; right: 14px;
    background: none; border: none;
    color: rgba(200,210,240,.55); font-size: 16px; cursor: pointer;
    transition: color .15s;
}
.cw-close:hover { color: rgba(240,245,255,.95); }

.cw-header { text-align: center; margin-bottom: 14px; padding-right: 24px; }
.cw-badge {
    display: inline-block; font-size: .8rem; font-weight: 600;
    color: #e0e4ff; border: 1.5px solid rgba(220,230,255,0.35);
    border-radius: 20px; padding: 2px 10px; margin-bottom: 6px;
    letter-spacing: .02em;
}
.cw-title {
    font-size: 1.1rem; font-weight: 700;
    color: #fff; margin: 0;
    text-shadow: 0 0 12px rgba(200,210,240,.3);
}

.cw-moon {
    display: flex; align-items: center; gap: 16px;
    background: rgba(100,120,200,0.08);
    border: 1px solid rgba(220,230,255,0.18);
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 14px;
}
.cw-moon-emoji { font-size: 2.8rem; line-height: 1; filter: drop-shadow(0 0 10px rgba(240,240,255,.5)); }
.cw-moon-info { flex: 1; }
.cw-moon-name { font-size: 1.05rem; font-weight: 700; color: #fff; margin-bottom: 2px; }
.cw-moon-stats { font-size: .82rem; color: rgba(200,210,240,.68); font-family: 'Consolas','Menlo',monospace; }

.cw-section { margin-bottom: 12px; }
.cw-section-head {
    font-size: .72rem; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; color: rgba(200,210,240,.55);
    margin-bottom: 6px;
}
.cw-retro-list { display: flex; flex-direction: column; gap: 6px; }

.cw-retro-item {
    display: flex; align-items: center; gap: 10px;
    background: rgba(100,120,200,0.05);
    border: 1px solid rgba(180,200,240,0.14);
    border-radius: 10px;
    padding: 8px 12px;
    transition: all .15s;
}
.cw-retro-item.cw-retro-active {
    background: rgba(255,140,80,0.08);
    border-color: rgba(255,160,100,0.30);
}
.cw-retro-icon { font-size: 1.4rem; width: 28px; text-align: center; }
.cw-retro-body { flex: 1; min-width: 0; }
.cw-retro-name { font-size: .92rem; font-weight: 600; color: rgba(220,230,255,.9); }
.cw-retro-dates { font-size: .72rem; color: rgba(180,200,240,.55); font-family: 'Consolas','Menlo',monospace; }
.cw-retro-countdown {
    font-size: .72rem; font-weight: 600;
    color: rgba(180,200,240,.75);
    font-family: 'Consolas','Menlo',monospace;
    white-space: nowrap;
}
.cw-empty {
    text-align: center; padding: 12px;
    color: rgba(180,200,240,.55); font-style: italic; font-size: .85rem;
}

.cw-footer {
    font-size: .68rem; color: rgba(180,200,240,.42);
    text-align: center; padding-top: 10px; margin-top: 10px;
    border-top: 1px solid rgba(180,200,240,0.12);
    font-style: italic;
}

@media (max-width: 560px) {
    .cw-moon { padding: 12px; }
    .cw-moon-emoji { font-size: 2.2rem; }
}
/* ════════════════════════════════════════════════════════════════════════════
   Admin Sidebar Navigation
════════════════════════════════════════════════════════════════════════════ */
.admin-sidebar {
    position: fixed;
    top: 62px; left: 0; bottom: 0;
    width: 220px;
    background: linear-gradient(180deg, rgba(18,4,48,0.96) 0%, rgba(10,2,30,0.98) 100%);
    border-right: var(--bw-hair) solid rgba(150,80,255,.22);
    overflow-y: auto;
    z-index: 100;
    box-shadow: 2px 0 16px rgba(0,0,0,.35);
}
.admin-sidebar::-webkit-scrollbar { width: 4px; }
.admin-sidebar::-webkit-scrollbar-thumb { background: rgba(150,80,255,.3); border-radius: 2px; }

.as-header {
    display: flex; align-items: center; gap: var(--spc-2);
    padding: var(--spc-4);
    border-bottom: var(--bw-hair) solid rgba(150,80,255,.15);
    color: #cc99ff;
    font-weight: var(--fw-bold);
    position: sticky; top: 0;
    background: rgba(18,4,48,0.98);
    z-index: 1;
}
.as-logo { font-size: 1.2rem; }
.as-title { font-size: var(--fs-md); flex: 1; }
.as-toggle {
    background: none; border: none;
    color: rgba(200,180,240,.55);
    font-size: 14px; cursor: pointer;
    padding: var(--spc-1) var(--spc-2);
    display: none; /* Sadece mobilde */
    border-radius: var(--r-sm);
    transition: color var(--t-fast);
}
.as-toggle:hover { color: #ddbbff; }

.as-nav { padding: var(--spc-3) 0; }
.as-group { margin-bottom: var(--spc-4); }
.as-group-label {
    font-size: var(--fs-xs);
    color: rgba(200,180,240,.40);
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: var(--fw-bold);
    padding: var(--spc-1) var(--spc-4);
    margin-bottom: var(--spc-1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.as-link {
    display: flex; align-items: center; gap: var(--spc-2);
    padding: var(--spc-2) var(--spc-4);
    color: rgba(200,180,240,.72);
    font-size: var(--fs-base);
    font-weight: var(--fw-medium);
    text-decoration: none;
    border-left: 2px solid transparent;
    transition: all var(--t-fast);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.as-link:hover {
    background: rgba(150,80,255,.08);
    color: #eeddff;
    border-left-color: rgba(170,100,255,.45);
}
.as-link.active {
    background: rgba(150,80,255,.14);
    color: #ffffff;
    border-left-color: rgba(180,110,255,.9);
    font-weight: var(--fw-semi);
}

/* Open button (mobile) */
.admin-sidebar-open {
    position: fixed;
    top: 72px; left: 12px;
    z-index: 99;
    background: rgba(25, 0, 60, 0.92);
    border: var(--bw-std) solid var(--skyra-border);
    color: #cc99ff;
    width: 40px; height: 40px;
    border-radius: var(--r-sm);
    font-size: 1.2rem;
    cursor: pointer;
    display: none; /* Sadece sidebar kapalıyken + mobilde */
    align-items: center; justify-content: center;
    box-shadow: var(--sh-md);
}
.admin-sidebar-open:hover { background: rgba(35, 10, 80, 0.94); color: #eeddff; }

/* Admin content with sidebar offset (+ 10px gap) */
.admin-page { padding-left: 230px !important; box-sizing: border-box; transition: padding-left var(--t-base); }

/* Desktop: sidebar transition for smooth collapse */
.admin-sidebar { transition: transform var(--t-base); }

/* Collapsed state (desktop) */
body.admin-sidebar-collapsed .admin-sidebar { transform: translateX(-100%); }
body.admin-sidebar-collapsed .admin-page { padding-left: 10px !important; }
body.admin-sidebar-collapsed .admin-sidebar-open { display: inline-flex !important; }

/* Desktop toggle button — her zaman görünür (JS logic) */
.as-toggle { display: inline-flex !important; align-items: center; justify-content: center; }

@media (max-width: 992px) {
    .admin-sidebar {
        transform: translateX(-100%);
        transition: transform var(--t-base);
    }
    .admin-sidebar.open { transform: translateX(0); }
    .as-toggle { display: inline-flex; align-items: center; justify-content: center; }
    .admin-sidebar-open { display: inline-flex; }
    .admin-sidebar.open ~ .admin-sidebar-open { display: none; }
    .admin-page { padding-left: 0 !important; }
}

/* ── Launch aksiyon butonları (İzle + Detay) ── */
.launch-actions {
    display: flex; gap: var(--spc-2); flex-wrap: wrap;
    margin-top: var(--spc-2);
    padding-top: var(--spc-2);
    border-top: var(--bw-hair) solid rgba(100,220,120,0.12);
}
.launch-action-btn {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 10px;
    font-size: var(--fs-xs);
    font-weight: var(--fw-semi);
    border-radius: var(--r-sm);
    text-decoration: none;
    border: var(--bw-hair) solid;
    transition: all var(--t-fast);
    white-space: nowrap;
}
.launch-watch-btn {
    color: #ff6666;
    background: rgba(255,80,80,0.10);
    border-color: rgba(255,80,80,0.35);
}
.launch-watch-btn:hover {
    background: rgba(255,80,80,0.20);
    color: #ff8888;
    border-color: rgba(255,80,80,0.55);
    transform: translateY(-1px);
}
.launch-info-btn {
    color: rgba(180,240,200,.8);
    background: rgba(100,220,120,0.08);
    border-color: rgba(100,220,120,0.25);
}
.launch-info-btn:hover {
    background: rgba(100,220,120,0.16);
    color: #c8ffc8;
    border-color: rgba(100,220,120,0.45);
    transform: translateY(-1px);
}

/* Status success (başarılı tamamlanan fırlatmalar için) */
.launch-status.status-success { color: #44ff88; background: rgba(0,220,80,0.18); border: 1px solid rgba(0,220,80,0.4); }

/* ── Launch thumbnail + body wrapper ── */
.launch-item {
    display: flex;
    gap: var(--spc-3);
    align-items: stretch;
}
.launch-thumb {
    flex-shrink: 0;
    width: 80px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: var(--r-sm);
    border: var(--bw-hair) solid rgba(100,220,120,0.18);
    position: relative;
    overflow: hidden;
}
.launch-thumb::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(4,16,8,0) 40%, rgba(4,16,8,0.55) 100%);
    pointer-events: none;
}
.launch-body { flex: 1; min-width: 0; }

/* Countdown timer badge */
.launch-countdown {
    display: inline-block;
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    color: #ffcc66;
    background: rgba(255,200,80,0.12);
    border: var(--bw-hair) solid rgba(255,200,80,0.28);
    padding: 1px var(--spc-2);
    border-radius: var(--r-pill);
    margin-left: var(--spc-2);
    font-family: 'Consolas','Menlo',monospace;
    letter-spacing: .02em;
}

@media (max-width: 560px) {
    .launch-item { flex-direction: column; }
    .launch-thumb { width: 100%; height: 90px; }
}

/* ── Bu Gece Gökte — Kozmik Hava visible planets ── */
.cw-visible-list { display: flex; flex-direction: column; gap: 6px; }
.cw-visible-item {
    display: flex; align-items: center; gap: 10px;
    background: rgba(100,120,200,0.05);
    border: var(--bw-hair) solid rgba(180,200,240,0.14);
    border-radius: var(--r-sm);
    padding: var(--spc-2) var(--spc-3);
    transition: all var(--t-fast);
}
.cw-visible-item.cw-visible--night {
    background: rgba(140,170,230,0.08);
    border-color: rgba(180,200,240,0.30);
}
.cw-visible-item.cw-visible--day {
    opacity: 0.65;
}
.cw-visible-icon { font-size: 1.3rem; width: 24px; text-align: center; }
.cw-visible-body { flex: 1; min-width: 0; }
.cw-visible-name { font-size: var(--fs-sm); font-weight: var(--fw-semi); color: rgba(220,230,255,.92); }
.cw-visible-pos {
    display: flex; gap: var(--spc-2); align-items: center;
    font-size: var(--fs-xs); color: rgba(180,200,240,.60);
    font-family: 'Consolas','Menlo',monospace;
}
.cw-visible-alt { color: rgba(180,200,240,.72); }
.cw-visible-dir { color: rgba(200,220,255,.55); }
.cw-visible-badge {
    font-size: var(--fs-xs); font-weight: var(--fw-semi);
    padding: 2px 7px; border-radius: var(--r-pill);
    white-space: nowrap; flex-shrink: 0;
}
.cw-visible-badge--night { color: #c0d4ff; background: rgba(140,170,230,0.15); border: var(--bw-hair) solid rgba(180,200,240,0.28); }
.cw-visible-badge--day { color: #ffcc66; background: rgba(255,180,60,0.10); border: var(--bw-hair) solid rgba(255,200,80,0.25); }

.cw-section-note {
    font-size: var(--fs-xs); color: rgba(180,200,240,.40);
    margin-top: 4px; font-style: italic; text-align: right;
}

/* ════════════════════════════════════════════════════════════════════════════
   Custom Tooltip (data-tt attribute ile)
════════════════════════════════════════════════════════════════════════════ */
[data-tt] { position: relative; cursor: help; }
[data-tt]::before {
    content: attr(data-tt);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    min-width: 180px; max-width: 280px;
    padding: var(--spc-2) var(--spc-3);
    background: rgba(15, 5, 45, 0.98);
    border: var(--bw-hair) solid rgba(180, 110, 255, 0.45);
    border-radius: var(--r-sm);
    color: #eeddff;
    font-size: var(--fs-xs);
    font-weight: var(--fw-medium);
    line-height: 1.45;
    text-align: center;
    white-space: normal;
    box-shadow: var(--sh-md);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--t-base), transform var(--t-base);
    z-index: 1000;
}
[data-tt]::after {
    content: '';
    position: absolute;
    bottom: calc(100% + 2px);
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: rgba(180, 110, 255, 0.45);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--t-base);
    z-index: 1000;
}
[data-tt]:hover::before,
[data-tt]:focus-visible::before {
    opacity: 1;
    transform: translateX(-50%) translateY(-2px);
}
[data-tt]:hover::after,
[data-tt]:focus-visible::after { opacity: 1; }

/* Alt konum varyantı */
[data-tt-pos="bottom"]::before { bottom: auto; top: calc(100% + 8px); }
[data-tt-pos="bottom"]::after  { bottom: auto; top: calc(100% + 2px); border-top-color: transparent; border-bottom-color: rgba(180, 110, 255, 0.45); }

/* Sağda kalan küçük hedefler için: tooltip'i sola kaydır (ok hala hedef merkezinde) */
[data-tt-pos="bottom-left"]::before { bottom: auto; top: calc(100% + 8px); left: auto; right: 0; transform: translateX(0); }
[data-tt-pos="bottom-left"]:hover::before,
[data-tt-pos="bottom-left"]:focus-visible::before { transform: translateX(0) translateY(-2px); }
[data-tt-pos="bottom-left"]::after  { bottom: auto; top: calc(100% + 2px); border-top-color: transparent; border-bottom-color: rgba(180, 110, 255, 0.45); }

/* ── Location modal + change button ── */
.cw-loc-change-btn {
    background: none; border: none; padding: 0;
    color: #9cd8ff; font-size: var(--fs-xs); cursor: pointer;
    text-decoration: underline; font-weight: var(--fw-medium);
    transition: color var(--t-fast);
}
.cw-loc-change-btn:hover { color: #c8e8ff; }

.loc-modal {
    position: fixed; inset: 0; z-index: 1001;
    background: rgba(4, 0, 20, 0.78);
    backdrop-filter: blur(6px);
    display: flex; align-items: center; justify-content: center;
    padding: var(--spc-4);
}
.loc-modal.sim-hidden { display: none; }
.loc-modal-inner {
    position: relative;
    width: min(92vw, 420px);
    max-height: 82vh; overflow-y: auto;
    background: linear-gradient(180deg, rgba(22, 0, 55, 0.96) 0%, rgba(12, 0, 32, 0.98) 100%);
    border: var(--bw-std) solid rgba(180, 110, 255, 0.50);
    border-radius: var(--r-lg);
    padding: var(--spc-6);
    box-shadow: var(--sh-lg);
    animation: astroIn .22s ease;
}
.loc-modal-close {
    position: absolute; top: var(--spc-2); right: var(--spc-3);
    background: none; border: none; font-size: 16px; cursor: pointer;
    color: rgba(200,180,240,.55); padding: var(--spc-1) var(--spc-2);
    border-radius: var(--r-sm); transition: color var(--t-fast);
}
.loc-modal-close:hover { color: #ddbbff; }
.loc-modal-title { font-size: var(--fs-lg); color: #eeddff; margin: 0 0 var(--spc-4); padding-right: 28px; }
.loc-divider {
    text-align: center; font-size: var(--fs-xs);
    color: rgba(200,180,240,.5);
    margin: var(--spc-3) 0;
    text-transform: uppercase; letter-spacing: .06em;
}
.loc-city-list {
    display: flex; flex-wrap: wrap; gap: 6px;
    max-height: 240px; overflow-y: auto;
    padding: var(--spc-2) 0;
}
.loc-city-btn {
    background: rgba(150,80,255,.08);
    border: var(--bw-hair) solid rgba(150,80,255,.25);
    color: rgba(220,200,255,.85);
    padding: 5px var(--spc-3);
    border-radius: var(--r-pill);
    font-size: var(--fs-sm);
    cursor: pointer;
    transition: all var(--t-fast);
    font-family: inherit;
}
.loc-city-btn:hover {
    background: rgba(180,110,255,.18);
    color: #eeddff;
    border-color: rgba(180,110,255,.55);
}

/* ── Categories chip-based keyword UI ── */
.cat-add-row-v2 { display: flex; gap: var(--spc-2); align-items: stretch; }
.cat-add-name { flex: 1; }

.cat-list-v2 { display: flex; flex-direction: column; gap: var(--spc-3); }
.cat-card { padding: var(--spc-4) !important; }
.cat-card-head {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: var(--spc-3);
}
.cat-card-head .cat-name { font-size: var(--fs-lg); font-weight: var(--fw-bold); color: #eeddff; }
.cat-card-head .cat-id { font-size: var(--fs-xs); color: rgba(200,180,240,.45); margin-left: var(--spc-2); font-family: 'Consolas','Menlo',monospace; }

.cat-kw-chips {
    display: flex; flex-wrap: wrap; gap: 6px;
    min-height: 36px;
    padding: var(--spc-2);
    background: rgba(80,30,160,0.10);
    border: var(--bw-hair) dashed rgba(150,80,255,0.25);
    border-radius: var(--r-sm);
    margin-bottom: var(--spc-2);
}
.cat-kw-chip {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px var(--spc-2);
    background: rgba(150,80,255,.18);
    border: var(--bw-hair) solid rgba(180,110,255,.4);
    border-radius: var(--r-pill);
    font-size: var(--fs-xs); color: #eeddff;
}
.cat-kw-remove {
    background: none; border: none;
    color: rgba(220,200,255,.55); font-size: 12px;
    padding: 0 2px; cursor: pointer; line-height: 1;
    transition: color var(--t-fast);
}
.cat-kw-remove:hover { color: #ff6666; }
.cat-kw-empty { font-size: var(--fs-xs); color: rgba(200,180,240,.45); font-style: italic; }

.cat-kw-add-form { display: flex; gap: var(--spc-2); align-items: stretch; }
.cat-kw-new-input { flex: 1; }
.cat-kw-add-btn, .cat-kw-save-btn {
    background: rgba(150,80,255,.14);
    border: var(--bw-hair) solid rgba(150,80,255,.35);
    color: #cc99ff; padding: 7px var(--spc-3);
    border-radius: var(--r-sm);
    font-size: var(--fs-sm); font-weight: var(--fw-semi);
    cursor: pointer; white-space: nowrap;
    transition: all var(--t-fast);
}
.cat-kw-add-btn:hover, .cat-kw-save-btn:hover {
    background: rgba(180,110,255,.24); color: #eeddff;
}
.cat-kw-save-btn { background: rgba(40,200,80,.12); border-color: rgba(40,200,80,.35); color: #44cc88; }
.cat-kw-save-btn:hover { background: rgba(40,200,80,.22); color: #66ff99; }