/* ========================================
   Theme E - 熱情熊抱哥
   ======================================== */

.theme-e {
    --color-page-bg: #fff4f6;
    --color-surface: #ffffff;
    --color-text: #3f2d32;
    --color-muted: #80666d;

    --color-primary: #e85d83;
    --color-primary-hover: #d94a72;

    --color-border: #f1d4dc;

    --color-primary-soft: #fde8ee;
    --color-primary-soft-2: #f9d7e1;
    --color-shadow: rgba(232, 93, 131, 0.13);

    --color-danger: #c7445f;
    --color-success: #4f8a68;

    --ui-radius-sm: 9px;
    --ui-radius-md: 13px;
    --ui-radius-lg: 18px;

    --ui-shadow-card: 0 5px 18px rgba(232, 93, 131, 0.14);
    --ui-shadow-hover: 0 8px 24px rgba(232, 93, 131, 0.20);

    --ui-button-radius: 14px;

}


/* ========================================
   Theme E - Users Table Desktop Compact
   會員管理桌機版：避免不必要的水平捲動
   ======================================== */

@media (min-width: 901px) {

    .theme-e .users-page {
        max-width: 1800px;
    }

    .theme-e .users-page .users-table {
        width: 100%;
        min-width: 0;
        table-layout: auto;
    }

    .theme-e .users-page .users-table th,
    .theme-e .users-page .users-table td {
        padding: 10px 8px;
        font-size: 14px;
    }

    /* Email */
    .theme-e .users-page .users-table th:nth-child(5) {
        min-width: 150px;
    }

    /* 群組 */
    .theme-e .users-page .users-table th:nth-child(7),
    .theme-e .users-page .users-table td:nth-child(7) {
        min-width: 220px;
        width: 220px;
    }

    /* 日期時間 */
    .theme-e .users-page .users-date {
        min-width: 115px;
    }

    /* IP */
    .theme-e .users-page .users-ip {
        min-width: 105px;
    }

    /* 安全狀態 */
    .theme-e .users-page .users-table th:nth-child(16) {
        min-width: 90px;
    }

    /* 操作 */
    .theme-e .users-page .users-actions {
        min-width: 205px;
    }

    .theme-e .users-page .users-actions > a,
    .theme-e .users-page .users-actions > form {
        margin-right: 4px;
    }

    .theme-e .users-page .users-actions button {
        padding: 5px 8px;
        font-size: 13px;
    }
}


/* ========================================
   Theme E - 熱情熊抱哥 Brand Polish
   Header + Course Hero
   2026-08-20
   ======================================== */


/* ---------- Header：溫暖粉紅品牌感 ---------- */

.theme-e .site-theme-header {
    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #fff8fa 100%
        );

    border-bottom: 1px solid #f1cbd6;
    border-radius: 0 0 22px 22px;

    box-shadow:
        0 4px 18px rgba(232, 93, 131, 0.12);
}


.theme-e .site-brand-mark {
    width: 13px;
    height: 34px;

    background:
        linear-gradient(
            180deg,
            #f27da0 0%,
            #e85d83 100%
        );

    border-radius: 999px;

    box-shadow:
        0 3px 9px rgba(232, 93, 131, 0.22);
}


.theme-e .site-brand-name {
    color: #493238;

    font-weight: 800;
    letter-spacing: 0.035em;
}


.theme-e .site-theme-header .theme-switcher label {
    color: #8c6973;
}


.theme-e .site-theme-header .theme-switcher select {
    background: #ffffff;

    border: 1px solid #efc7d2;
    border-radius: 999px;

    box-shadow:
        0 2px 8px rgba(232, 93, 131, 0.08);
}


.theme-e .site-theme-header .theme-switcher select:hover,
.theme-e .site-theme-header .theme-switcher select:focus {
    border-color: #e85d83;

    box-shadow:
        0 0 0 3px rgba(232, 93, 131, 0.10);
}


.theme-e .site-theme-header .site-header-logout {
    color: #d94a72;
    background: #fffafd;

    border-color: #efc7d2;
    border-radius: 999px;
}


.theme-e .site-theme-header .site-header-logout:hover {
    color: #ffffff;
    background: #e85d83;

    border-color: #e85d83;

    box-shadow:
        0 4px 12px rgba(232, 93, 131, 0.20);
}


/* ---------- 課程內頁 Hero ---------- */

.theme-e .course-hero {
    padding: 28px 30px;

    background:
        linear-gradient(
            135deg,
            #fff9fb 0%,
            #fde8ee 55%,
            #f9d7e1 100%
        );

    border: 1px solid #f0ccd6;
    border-radius: 24px;

    box-shadow:
        0 7px 22px rgba(232, 93, 131, 0.13);
}


.theme-e .course-hero::before {
    content: "";

    position: absolute;
    right: 70px;
    top: -70px;

    width: 135px;
    height: 135px;

    background:
        rgba(255, 255, 255, 0.38);

    border-radius: 50%;

    pointer-events: none;
}


.theme-e .course-hero::after {
    right: -48px;
    bottom: -72px;

    width: 185px;
    height: 185px;

    background:
        rgba(232, 93, 131, 0.10);

    border-radius: 50%;
}


.theme-e .course-hero-content {
    position: relative;
    z-index: 2;
}


.theme-e .course-hero-back {
    position: relative;
    z-index: 2;
}


.theme-e .course-hero-back a {
    color: #d94a72;
    background: rgba(255, 255, 255, 0.82);

    border: 1px solid #efc7d2;
    border-radius: 999px;

    box-shadow:
        0 2px 8px rgba(232, 93, 131, 0.08);
}


.theme-e .course-hero-back a:hover {
    color: #ffffff;
    background: #e85d83;

    border-color: #e85d83;
}


.theme-e .course-hero-label {
    color: #d94a72;

    font-weight: 800;
    letter-spacing: 0.14em;
}


.theme-e .course-hero-title {
    color: #493238;

    font-weight: 800;
}


.theme-e .course-hero-description {
    color: #775b63 !important;
}


/* ---------- Theme E 手機細節 ---------- */

@media (max-width: 640px) {

    .theme-e .site-theme-header {
        border-radius: 0 0 18px 18px;
    }

    .theme-e .course-hero {
        padding: 22px 20px;

        border-radius: 20px;
    }

    .theme-e .course-hero::before {
        right: 25px;
        top: -55px;

        width: 105px;
        height: 105px;
    }

    .theme-e .course-hero::after {
        right: -55px;
        bottom: -75px;

        width: 155px;
        height: 155px;
    }
}