/* ================================
   SETTINGS BUTTON — SMALL VERSION
   ================================ */
.settings-btn {
    position: fixed;
    bottom: 30px;
    right: 18px;
    width: 45px;          /* smaller */
    height: 45px;         /* smaller */
    background: #ffffff;
    border-radius: 14px;  /* proportionally smaller */
    border: 1px solid rgba(0,0,0,0.05);

    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;

    transition: 
        transform 0.45s cubic-bezier(.25,1.4,.5,1),
        background 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;

    box-shadow: 
        0 3px 8px rgba(0,0,0,0.12),
        0 1px 3px rgba(0,0,0,0.05);

    z-index: 9999;
}

/* Hover */
.settings-btn:hover {
    transform: scale(1.10);
    box-shadow:
        0 6px 18px rgba(0,0,0,0.20),
        0 2px 6px rgba(0,0,0,0.10);

    border-color: rgba(35,146,88,0.25);
}

/* Rotate */
.settings-btn.rotate {
    transform: rotate(225deg) scale(1.04);
}

/* Icon smaller */
.settings-icon {
    width: 22px;   /* reduced */
    height: 22px;  /* reduced */
    pointer-events: none;
}

/* ================================
   SEXY GLASS SETTINGS PANEL — NO BUTTON CHANGES
   ================================ */

.settings-panel {
    position: fixed;
    bottom: 90px;
    right: 22px;
    width: 180px;

    /* Premium glass */
    background: rgba(255, 255, 255, 0.10);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);

    padding: 18px;
    border-radius: 20px;

    border: 1px solid rgba(255,255,255,0.22);
    box-shadow:
        0 20px 40px rgba(0,0,0,0.28),
        0 8px 16px rgba(0,0,0,0.15),
        inset 0 0 35px rgba(255,255,255,0.04);

    opacity: 0;
    transform: translateY(16px) scale(0.96);
    pointer-events: none;

    transition:
        opacity .35s ease,
        transform .45s cubic-bezier(.25,1.4,.45,1),
        backdrop-filter .4s ease;
    z-index: 900;
}

.settings-panel.open {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}


/* ================================
   THEME OPTION BUTTONS (Sexy upgrade)
   ================================ */

.theme-option {
    width: 100%;
    padding: 12px;
    margin-bottom: 12px;

    background: rgba(255,255,255,0.18);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    border: 1px solid rgba(255,255,255,0.25);
    border-radius: 14px;

    font-weight: 600;
    cursor: pointer;

    color: #111;

    display: flex;
    align-items: center;
    gap: 10px;

    transition:
        background .25s ease,
        transform .20s ease,
        box-shadow .25s ease,
        border-color .25s ease;
}

.theme-option:hover {
    background: rgba(255,255,255,0.30);
    transform: translateY(-2px);
    box-shadow:
        0 6px 18px rgba(0,0,0,0.20),
        inset 0 0 12px rgba(255,255,255,0.10);
    border-color: rgba(255,255,255,0.45);
}

.theme-option:active {
    transform: scale(0.95);
}

.theme-option.flash {
    animation: sexyFlash .35s ease forwards;
}

@keyframes sexyFlash {
    0% { background: rgba(35,146,88,0.25); }
    50% { background: rgba(35,146,88,0.12); }
    100% { background: rgba(255,255,255,0.18); }
}


/* ================================
   DARK MODE VERSION
   ================================ */

html.dark .settings-panel {
    background: rgba(15, 15, 15, 0.75);
    border: 1px solid rgba(255,255,255,0.10);
    box-shadow:
        0 25px 50px rgba(0,0,0,0.65),
        0 12px 20px rgba(0,0,0,0.45),
        inset 0 0 38px rgba(255,255,255,0.03);
}

html.dark .theme-option {
    background: rgba(255,255,255,0.08);
    color: #eee;
    border: 1px solid rgba(255,255,255,0.08);
}

html.dark .theme-option:hover {
    background: rgba(255,255,255,0.14);
    border-color: rgba(255,255,255,0.22);
    box-shadow:
        0 6px 18px rgba(0,0,0,0.35),
        inset 0 0 12px rgba(255,255,255,0.08);
}


html.dark .settings-btn {
    background: #0f0f0f !important;     /* deep dark grey/black */
    border-color: rgba(255,255,255,0.08) !important;
    box-shadow:
        0 3px 8px rgba(0,0,0,0.45),
        0 1px 3px rgba(0,0,0,0.25) !important;
}

html.dark .settings-btn:hover {
    border-color: rgba(35,146,88,0.35) !important;
    box-shadow:
        0 6px 18px rgba(0,0,0,0.55),
        0 2px 6px rgba(0,0,0,0.35) !important;
}

html.dark .pubs-title{
    color: #ffffff;
}