* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family:
        Arial,
        "Microsoft JhengHei",
        sans-serif;

    min-height: 100vh;

    background:
        linear-gradient(
            135deg,
            #edf3f0,
            #f8fafc,
            #dfe9e6
        );

    color: #1f2937;
}

.login-page {
    min-height: 100vh;

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

    padding: 24px;
}

.login-card {
    width: 100%;
    max-width: 420px;

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

    padding: 40px;

    border-radius: 24px;

    box-shadow:
        0 20px 50px rgba(15, 23, 42, 0.12);

    border: 1px solid rgba(255, 255, 255, 0.8);
}

.logo {
    width: 64px;
    height: 64px;

    margin: 0 auto 20px;

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

    border-radius: 18px;

    background:
        linear-gradient(
            135deg,
            #20383b,
            #3b6265
        );

    color: white;
    font-size: 28px;
    font-weight: bold;

    box-shadow:
        0 10px 25px rgba(32, 56, 59, 0.28);
}

h1 {
    text-align: center;
    font-size: 30px;
    margin-bottom: 10px;
}

.subtitle {
    text-align: center;
    color: #64748b;
    margin-bottom: 32px;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;

    margin-bottom: 8px;

    font-size: 18px;
    font-weight: bold;

    color: #334155;
}

.form-group input {
    width: 100%;

    padding: 14px 16px;

    border: 1px solid #cbd5e1;
    border-radius: 12px;

    background: #ffffff;

    font-size: 17px;

    outline: none;

    transition:
        border-color 0.2s,
        box-shadow 0.2s;
}

.form-group input:focus {
    border-color: #20383b;

    box-shadow:
        0 0 0 4px rgba(32, 56, 59, 0.12);
}

.password-box {
    position: relative;
}

.password-box input {
    padding-right: 72px;
}

.password-toggle {
    position: absolute;

    top: 50%;
    right: 12px;

    transform: translateY(-50%);

    border: none;
    background: transparent;

    color: #20383b;

    font-size: 17px;
    font-weight: bold;

    cursor: pointer;
}

.login-options {
    display: flex;
    justify-content: space-between;
    align-items: center;

    gap: 16px;

    margin-bottom: 24px;

    font-size: 17px;
}

.remember-me {
    display: flex;
    align-items: center;
    gap: 8px;

    color: #475569;
}

.remember-me input {
    width: 16px;
    height: 16px;
}

.forgot-password {
    color: #20383b;
    text-decoration: none;
}

.forgot-password:hover {
    text-decoration: underline;
}

.login-button {
    width: 100%;

    padding: 15px;

    border: none;
    border-radius: 12px;

    background:
        linear-gradient(
            135deg,
            #20383b,
            #3b6265
        );

    color: white;

    font-size: 17px;
    font-weight: bold;

    cursor: pointer;

    box-shadow:
        0 10px 24px rgba(32, 56, 59, 0.24);

    transition:
        transform 0.2s,
        box-shadow 0.2s;
}

.login-button:hover {
    transform: translateY(-2px);

    box-shadow:
        0 14px 28px rgba(32, 56, 59, 0.3);
}

.login-button:active {
    transform: translateY(0);
}

.register-text {
    margin-top: 24px;

    text-align: center;

    color: #64748b;

    font-size: 17px;
}

.register-text a {
    color: #20383b;
    font-weight: bold;
    text-decoration: none;
}

.register-text a:hover {
    text-decoration: underline;
}

@media (max-width: 480px) {
    .login-page {
        padding: 16px;
    }

    .login-card {
        padding: 30px 22px;

        border-radius: 18px;
    }

    h1 {
        font-size: 26px;
    }

    .login-options {
        align-items: flex-start;
        flex-direction: column;
        gap: 12px;
    }
}
.member-body {
    min-height: 100vh;
    background: #f1f5f9;
    color: #1e293b;
}

.member-header {
    background: #ffffff;
    border-bottom: 1px solid #e2e8f0;
}

.member-header-inner {
    width: min(1100px, calc(100% - 40px));
    min-height: 72px;
    margin: 0 auto;

    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.website-name {
    color: #20383b;
    font-size: 21px;
    font-weight: bold;
    text-decoration: none;
}

.header-user {
    display: flex;
    align-items: center;
    gap: 18px;
    color: #475569;
    font-size: 17px;
}

.header-logout {
    padding: 9px 15px;
    border-radius: 9px;
    background: #eef4f1;
    color: #20383b;
    font-weight: bold;
    text-decoration: none;
}

.member-container {
    width: min(1100px, calc(100% - 40px));
    margin: 36px auto;
}

.welcome-card {
    display: flex;
    align-items: center;
    gap: 22px;

    padding: 32px;
    margin-bottom: 24px;

    border-radius: 22px;

    background:
        linear-gradient(
            135deg,
            #20383b,
            #3b6265
        );

    color: white;

    box-shadow:
        0 18px 40px rgba(32, 56, 59, 0.2);
}

.member-avatar {
    width: 78px;
    height: 78px;
    flex-shrink: 0;

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

    border-radius: 24px;

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

    border: 1px solid rgba(255, 255, 255, 0.3);

    font-size: 32px;
    font-weight: bold;
}

.welcome-label {
    margin-bottom: 6px;

    color: rgba(255, 255, 255, 0.75);

    font-size: 17px;
    font-weight: bold;
    letter-spacing: 1px;
}

.welcome-card h1 {
    margin-bottom: 8px;

    text-align: left;
    font-size: 30px;
}

.welcome-text {
    color: rgba(255, 255, 255, 0.82);
}

.member-content {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 24px;
}

.profile-card,
.action-card {
    padding: 28px;

    border: 1px solid #e2e8f0;
    border-radius: 20px;

    background: #ffffff;

    box-shadow:
        0 10px 30px rgba(15, 23, 42, 0.06);
}

.card-title-row {
    display: flex;
    justify-content: space-between;
    align-items: center;

    gap: 20px;

    margin-bottom: 22px;
}

.card-label {
    margin-bottom: 5px;

    color: #20383b;

    font-size: 16px;
    font-weight: bold;
    letter-spacing: 1.2px;
}

.profile-card h2,
.action-card h2 {
    font-size: 23px;
}

.edit-button {
    padding: 10px 15px;

    border-radius: 10px;

    background: #20383b;
    color: white;

    font-size: 17px;
    font-weight: bold;
    text-decoration: none;
}

.profile-list {
    border-top: 1px solid #e2e8f0;
}

.profile-item {
    min-height: 62px;

    display: flex;
    justify-content: space-between;
    align-items: center;

    gap: 20px;

    border-bottom: 1px solid #e2e8f0;
}

.profile-title {
    color: #64748b;
    font-size: 17px;
}

.profile-value {
    color: #1e293b;
    font-weight: 600;
    text-align: right;
    overflow-wrap: anywhere;
}

.level-badge {
    padding: 6px 11px;

    border-radius: 999px;

    background: #dcfce7;
    color: #15803d;

    font-size: 17px;
    font-weight: bold;
}

.action-card h2 {
    margin-bottom: 22px;
}

.action-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.action-link {
    display: flex;
    justify-content: space-between;
    align-items: center;

    gap: 14px;

    padding: 16px;

    border: 1px solid #e2e8f0;
    border-radius: 14px;

    color: #1e293b;
    text-decoration: none;

    transition:
        border-color 0.2s,
        background 0.2s,
        transform 0.2s;
}

.action-link:hover {
    border-color: #a9c0bc;
    background: #eef4f1;
    transform: translateY(-2px);
}

.action-link div {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.action-link strong {
    font-size: 18px;
}

.action-link span {
    color: #64748b;
    font-size: 17px;
}

.logout-link:hover {
    border-color: #fecaca;
    background: #fef2f2;
}

.logout-link strong {
    color: #dc2626;
}

@media (max-width: 800px) {
    .member-content {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    .member-header-inner,
    .member-container {
        width: min(100% - 28px, 1100px);
    }

    .header-user > span {
        display: none;
    }

    .member-container {
        margin-top: 22px;
    }

    .welcome-card {
        padding: 24px;
        align-items: flex-start;
    }

    .member-avatar {
        width: 60px;
        height: 60px;
        border-radius: 18px;
        font-size: 25px;
    }

    .welcome-card h1 {
        font-size: 24px;
    }

    .profile-card,
    .action-card {
        padding: 22px;
    }

    .profile-item {
        align-items: flex-start;
        flex-direction: column;
        gap: 7px;
        padding: 15px 0;
    }

    .profile-value {
        text-align: left;
    }
}
.form-page-body {
    min-height: 100vh;
    background:
        radial-gradient(
            circle at top left,
            rgba(74, 116, 118, 0.18),
            transparent 28%
        ),
        radial-gradient(
            circle at bottom right,
            rgba(32, 56, 59, 0.16),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #f1f5f2,
            #eef4f1,
            #ffffff
        );
}

.form-page {
    min-height: 100vh;

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

    padding: 24px;
}

.form-card {
    width: 100%;
    max-width: 520px;

    padding: 40px;

    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 24px;

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

    box-shadow:
        0 24px 60px rgba(15, 23, 42, 0.14);
}

.form-card h1 {
    margin: 22px 0 8px;

    text-align: left;

    font-size: 30px;
}

.form-subtitle {
    margin-bottom: 28px;

    color: #64748b;
}

.back-link {
    color: #29474a;

    font-size: 17px;
    font-weight: bold;
    text-decoration: none;
}

.back-link:hover {
    text-decoration: underline;
}

.success-message {
    margin-bottom: 20px;
    padding: 13px 15px;

    border: 1px solid #bbf7d0;
    border-radius: 12px;

    background: #f0fdf4;
    color: #15803d;

    font-size: 17px;
    text-align: center;
}

.input-note {
    margin-top: 7px;

    color: #94a3b8;

    font-size: 17px;
}

.form-group input:disabled {
    background: #f1f5f9;
    color: #64748b;
    cursor: not-allowed;
}

@media (max-width: 480px) {
    .form-card {
        padding: 30px 22px;
    }

    .form-card h1 {
        font-size: 26px;
    }
}
.login-after-register {
    display: block;

    margin: -6px 0 22px;
    padding: 12px;

    border-radius: 12px;

    background: #ecfdf5;
    color: #15803d;

    font-size: 17px;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
}

.login-after-register:hover {
    background: #dcfce7;
}
.admin-body {
    min-height: 100vh;
    background: #f1f5f9;
    color: #1e293b;
}

.admin-header {
    background: #0f172a;
    color: white;
}

.admin-header-inner {
    width: min(1200px, calc(100% - 40px));
    min-height: 72px;

    margin: 0 auto;

    display: flex;
    justify-content: space-between;
    align-items: center;

    gap: 24px;
}

.admin-logo {
    color: white;

    font-size: 20px;
    font-weight: bold;
    text-decoration: none;
}

.admin-user {
    display: flex;
    align-items: center;

    gap: 18px;

    font-size: 17px;
}

.admin-user a {
    color: #c8d7d4;
    text-decoration: none;
}

.admin-user a:hover {
    color: white;
}

.admin-container {
    width: min(1200px, calc(100% - 40px));
    margin: 36px auto;
}

.admin-title-section {
    display: flex;
    justify-content: space-between;
    align-items: center;

    gap: 24px;

    margin-bottom: 24px;
}

.admin-label {
    margin-bottom: 6px;

    color: #20383b;

    font-size: 16px;
    font-weight: bold;
    letter-spacing: 1.2px;
}

.admin-title-section h1 {
    margin-bottom: 8px;

    text-align: left;

    font-size: 32px;
}

.admin-title-section p {
    color: #64748b;
}

.member-count-card {
    min-width: 160px;

    padding: 20px;

    border-radius: 18px;

    background:
        linear-gradient(
            135deg,
            #20383b,
            #3b6265
        );

    color: white;

    box-shadow:
        0 14px 30px rgba(32, 56, 59, 0.22);
}

.member-count-card span {
    display: block;

    margin-bottom: 6px;

    color: rgba(255, 255, 255, 0.78);

    font-size: 17px;
}

.member-count-card strong {
    font-size: 30px;
}

.admin-panel {
    padding: 26px;

    border: 1px solid #e2e8f0;
    border-radius: 20px;

    background: white;

    box-shadow:
        0 12px 32px rgba(15, 23, 42, 0.07);
}

.admin-search-form {
    display: flex;
    align-items: center;

    gap: 12px;

    margin-bottom: 24px;
}

.admin-search-form input {
    width: 100%;
    max-width: 420px;

    padding: 13px 15px;

    border: 1px solid #cbd5e1;
    border-radius: 11px;

    font-size: 18px;
    outline: none;
}

.admin-search-form input:focus {
    border-color: #20383b;

    box-shadow:
        0 0 0 4px rgba(32, 56, 59, 0.12);
}

.admin-search-form button {
    padding: 13px 22px;

    border: none;
    border-radius: 11px;

    background: #20383b;
    color: white;

    font-size: 18px;
    font-weight: bold;

    cursor: pointer;
}

.clear-search {
    color: #64748b;

    font-size: 17px;
    text-decoration: none;
}

.clear-search:hover {
    color: #20383b;
}

.table-wrapper {
    overflow-x: auto;
}

.member-table {
    width: 100%;

    border-collapse: collapse;

    white-space: nowrap;
}

.member-table th,
.member-table td {
    padding: 15px;

    border-bottom: 1px solid #e2e8f0;

    text-align: left;
}

.member-table th {
    background: #f8fafc;
    color: #475569;

    font-size: 17px;
}

.member-table td {
    color: #334155;

    font-size: 17px;
}

.member-table tbody tr:hover {
    background: #f8fafc;
}

.admin-badge,
.normal-badge {
    display: inline-block;

    padding: 6px 10px;

    border-radius: 999px;

    font-size: 16px;
    font-weight: bold;
}

.admin-badge {
    background: #e6eeeb;
    color: #31565a;
}

.normal-badge {
    background: #dcfce7;
    color: #15803d;
}

.empty-table {
    padding: 40px !important;

    color: #94a3b8 !important;

    text-align: center !important;
}

@media (max-width: 700px) {
    .admin-header-inner {
        padding: 14px 0;

        align-items: flex-start;
        flex-direction: column;
    }

    .admin-user {
        flex-wrap: wrap;
    }

    .admin-title-section {
        align-items: stretch;
        flex-direction: column;
    }

    .member-count-card {
        width: 100%;
    }

    .admin-search-form {
        align-items: stretch;
        flex-direction: column;
    }

    .admin-search-form input {
        max-width: none;
    }

    .admin-search-form button {
        width: 100%;
    }
}
.table-edit-button {
    display: inline-block;

    padding: 7px 12px;

    border-radius: 8px;

    background: #eef4f1;
    color: #20383b;

    font-size: 17px;
    font-weight: bold;
    text-decoration: none;
}

.table-edit-button:hover {
    background: #dfe9e6;
}

.form-select {
    width: 100%;

    padding: 15px 16px;

    border: 1px solid #cbd5e1;
    border-radius: 13px;

    background: #ffffff;
    color: #1e293b;

    font-size: 17px;

    outline: none;
}

.form-select:focus {
    border-color: #31565a;

    box-shadow:
        0 0 0 4px rgba(49, 86, 90, 0.12);
}
.admin-message {
    margin-bottom: 20px;
    padding: 13px 15px;

    border: 1px solid #c8d7d4;
    border-radius: 12px;

    background: #eef4f1;
    color: #20383b;

    font-size: 17px;
    text-align: center;
}

.table-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.delete-form {
    margin: 0;
}

.table-delete-button {
    padding: 7px 12px;

    border: none;
    border-radius: 8px;

    background: #fef2f2;
    color: #dc2626;

    font-size: 17px;
    font-weight: bold;

    cursor: pointer;
}

.table-delete-button:hover {
    background: #fee2e2;
}

.current-admin-label {
    padding: 7px 10px;

    border-radius: 8px;

    background: #f1f5f9;
    color: #64748b;

    font-size: 16px;
    font-weight: bold;
}
.table-password-button {
    display: inline-block;

    padding: 7px 12px;

    border-radius: 8px;

    background: #f1f5f2;
    color: #3b6265;

    font-size: 17px;
    font-weight: bold;
    text-decoration: none;
}

.table-password-button:hover {
    background: #e6eeeb;
}

.reset-member-info {
    margin-bottom: 22px;
    padding: 16px;

    border: 1px solid #e2e8f0;
    border-radius: 13px;

    background: #f8fafc;
}

.reset-member-info p {
    margin-bottom: 8px;

    color: #475569;

    font-size: 17px;
}

.reset-member-info p:last-child {
    margin-bottom: 0;
}

@media (max-width: 700px) {
    .table-actions {
        align-items: flex-start;
        flex-direction: column;
    }
}
.admin-title-actions {
    display: flex;
    align-items: center;
    gap: 16px;
}

.admin-create-button {
    display: inline-block;

    padding: 13px 20px;

    border-radius: 11px;

    background: #ffffff;
    color: #20383b;

    border: 1px solid #c8d7d4;

    font-size: 17px;
    font-weight: bold;
    text-decoration: none;

    box-shadow:
        0 8px 20px rgba(15, 23, 42, 0.06);
}

.admin-create-button:hover {
    background: #eef4f1;
    border-color: #a9c0bc;
}

@media (max-width: 700px) {
    .admin-title-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .admin-create-button {
        text-align: center;
    }
}
.admin-action-link {
    border-color: #d8e4e0;
    background: #f4f7f4;
}

.admin-action-link strong {
    color: #3b6265;
}

.admin-action-link:hover {
    border-color: #bdd0cb;
    background: #e8f0ed;
}
.development-reset-box {
    margin-bottom: 22px;
    padding: 18px;

    border: 1px solid #bdd0cb;
    border-radius: 14px;

    background: #f4f7f4;
    color: #29474a;
}

.development-reset-box strong {
    display: block;
    margin-bottom: 7px;
}

.development-reset-box p {
    margin-bottom: 15px;

    color: #3b6265;
    font-size: 17px;
}

.reset-link-button {
    display: block;

    width: 100%;
    margin-top: 15px;
    padding: 15px;

    border-radius: 14px;

    background: linear-gradient(135deg, #31565a, #20383b);

    color: #fff;

    font-size: 17px;
    font-weight: bold;

    text-align: center;
    text-decoration: none;

    transition: all .25s ease;
}

.reset-link-button:hover {
    transform: translateY(-2px);

    box-shadow: 0 10px 25px rgba(37,99,235,.25);
}

/* =========================
   手機版 RWD
   ========================= */

img {
    max-width: 100%;
    height: auto;
}

/* 平板以下 */
@media (max-width: 900px) {
    .member-content {
        grid-template-columns: 1fr;
    }

    .admin-title-section {
        align-items: stretch;
        flex-direction: column;
    }

    .admin-title-actions {
        width: 100%;
        align-items: stretch;
        flex-direction: column;
    }

    .member-count-card {
        width: 100%;
    }

    .admin-create-button {
        width: 100%;
        text-align: center;
    }
}

/* 手機版 */
@media (max-width: 600px) {
    body {
        overflow-x: hidden;
    }

    /* 共用寬度 */
    .login-page,
    .form-page {
        padding: 16px;
    }

    .member-header-inner,
    .member-container,
    .admin-header-inner,
    .admin-container {
        width: calc(100% - 28px);
    }

    /* 登入頁 */
    .login-card {
        max-width: none;
        padding: 30px 22px;
        border-radius: 20px;
    }

    .logo {
        width: 60px;
        height: 60px;
        border-radius: 18px;
        font-size: 26px;
    }

    .login-card h1 {
        font-size: 27px;
    }

    .subtitle {
        margin-bottom: 24px;
        font-size: 17px;
    }

    .form-group input,
    .form-select {
        min-height: 50px;
        font-size: 17px;
    }

    .login-options {
        align-items: flex-start;
        flex-direction: column;
        gap: 12px;
    }

    .login-button,
    .reset-link-button {
        min-height: 50px;
        font-size: 17px;
    }

    /* 一般表單頁 */
    .form-card {
        max-width: none;
        padding: 28px 22px;
        border-radius: 20px;
    }

    .form-card h1 {
        margin-top: 18px;
        font-size: 26px;
    }

    /* 會員中心導覽列 */
    .member-header-inner {
        min-height: auto;
        padding: 14px 0;
    }

    .website-name {
        font-size: 18px;
    }

    .header-user > span {
        display: none;
    }

    .header-logout {
        padding: 9px 13px;
    }

    .member-container {
        margin: 22px auto;
    }

    /* 歡迎區塊 */
    .welcome-card {
        align-items: flex-start;
        flex-direction: column;
        gap: 16px;

        padding: 24px;
        border-radius: 18px;
    }

    .member-avatar {
        width: 62px;
        height: 62px;
        border-radius: 18px;
        font-size: 25px;
    }

    .welcome-card h1 {
        font-size: 25px;
    }

    .welcome-text {
        line-height: 1.7;
    }

    /* 會員資料卡 */
    .profile-card,
    .action-card {
        padding: 22px;
        border-radius: 17px;
    }

    .card-title-row {
        align-items: flex-start;
        flex-direction: column;
        gap: 14px;
    }

    .edit-button {
        width: 100%;
        text-align: center;
    }

    .profile-item {
        align-items: flex-start;
        flex-direction: column;
        gap: 7px;

        padding: 15px 0;
    }

    .profile-value {
        width: 100%;
        text-align: left;
    }

    .action-link {
        min-height: 70px;
    }

    /* 管理員頂部 */
    .admin-header-inner {
        min-height: auto;
        padding: 16px 0;

        align-items: flex-start;
        flex-direction: column;
    }

    .admin-user {
        width: 100%;
        flex-wrap: wrap;
        gap: 12px;
    }

    .admin-container {
        margin: 22px auto;
    }

    .admin-title-section h1 {
        font-size: 27px;
    }

    .admin-panel {
        padding: 18px;
        border-radius: 16px;
    }

    /* 搜尋列 */
    .admin-search-form {
        align-items: stretch;
        flex-direction: column;
    }

    .admin-search-form input {
        max-width: none;
        min-height: 48px;
    }

    .admin-search-form button,
    .clear-search {
        width: 100%;
        min-height: 46px;
        text-align: center;
    }

    .clear-search {
        display: flex;
        justify-content: center;
        align-items: center;

        padding: 10px;
        border-radius: 10px;
        background: #f1f5f9;
    }

    /* 管理員表格保留水平滑動 */
    .table-wrapper {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .member-table {
        min-width: 900px;
    }

    .member-table th,
    .member-table td {
        padding: 12px;
    }

    .table-actions {
        align-items: stretch;
        flex-direction: column;
        min-width: 110px;
    }

    .table-edit-button,
    .table-password-button,
    .table-delete-button,
    .current-admin-label {
        width: 100%;
        text-align: center;
    }

    /* 忘記密碼測試區塊 */
    .development-reset-box {
        padding: 16px;
    }
}

/* 小尺寸手機 */
@media (max-width: 380px) {
    .login-card,
    .form-card,
    .profile-card,
    .action-card {
        padding-left: 18px;
        padding-right: 18px;
    }

    .login-card h1,
    .form-card h1 {
        font-size: 24px;
    }

    .welcome-card h1 {
        font-size: 22px;
    }

    .member-header-inner,
    .member-container,
    .admin-header-inner,
    .admin-container {
        width: calc(100% - 20px);
    }
}

.form-textarea {
    width: 100%;
    min-height: 110px;
    padding: 15px 16px;

    border: 1px solid #cbd5e1;
    border-radius: 13px;

    background: #ffffff;
    color: #1e293b;

    font-family: inherit;
    font-size: 17px;
    line-height: 1.6;

    resize: vertical;
    outline: none;
}

.form-textarea:focus {
    border-color: #31565a;

    box-shadow:
        0 0 0 4px rgba(49, 86, 90, 0.12);
}

.address-cell {
    min-width: 220px;
    max-width: 320px;

    white-space: normal;
    overflow-wrap: anywhere;
}

.plans-body {
    min-height: 100vh;
    background: #f1f5f9;
    color: #1e293b;
}

.plans-container {
    width: min(1100px, calc(100% - 40px));
    margin: 38px auto;
}

.plans-heading {
    margin-bottom: 28px;
    text-align: center;
}

.plans-heading h1 {
    margin-bottom: 10px;
    font-size: 34px;
}

.plans-heading > p:last-child {
    color: #64748b;
}

.plans-grid {
    display: grid;
    grid-template-columns:
        repeat(auto-fit, minmax(240px, 1fr));
    gap: 22px;
}

.plan-card {
    display: flex;
    flex-direction: column;

    padding: 28px;

    border: 1px solid #e2e8f0;
    border-radius: 22px;

    background: #ffffff;

    box-shadow:
        0 12px 30px rgba(15, 23, 42, 0.07);

    transition:
        transform 0.2s,
        box-shadow 0.2s,
        border-color 0.2s;
}

.plan-card:hover {
    transform: translateY(-5px);
    border-color: #bdd0cb;

    box-shadow:
        0 18px 38px rgba(41, 71, 74, 0.13);
}

.plan-card-top {
    margin-bottom: 20px;
}

.plan-card h2 {
    margin-bottom: 18px;
    font-size: 23px;
}

.plan-price {
    display: flex;
    align-items: flex-start;
    gap: 5px;

    color: #29474a;
}

.plan-price span {
    margin-top: 7px;
    font-size: 17px;
    font-weight: bold;
}

.plan-price strong {
    font-size: 40px;
    line-height: 1;
}

.plan-description {
    flex-grow: 1;

    margin-bottom: 20px;

    color: #64748b;
    line-height: 1.7;
}

.plan-duration {
    margin-bottom: 22px;
    padding: 13px 15px;

    border-radius: 12px;

    background: #f8fafc;
    color: #475569;

    font-size: 17px;
}

.plan-subscribe-button {
    display: block;

    width: 100%;
    padding: 14px;

    border-radius: 12px;

    background:
        linear-gradient(
            135deg,
            #4a7476,
            #20383b
        );

    color: #ffffff;

    font-size: 18px;
    font-weight: bold;
    text-align: center;
    text-decoration: none;

    transition:
        transform 0.2s,
        box-shadow 0.2s;
}

.plan-subscribe-button:hover {
    transform: translateY(-2px);

    box-shadow:
        0 12px 24px rgba(41, 71, 74, 0.25);
}

.empty-plans {
    padding: 40px;

    border: 1px solid #e2e8f0;
    border-radius: 18px;

    background: #ffffff;
    color: #64748b;

    text-align: center;
}

@media (max-width: 600px) {
    .plans-container {
        width: calc(100% - 28px);
        margin: 24px auto;
    }

    .plans-heading h1 {
        font-size: 28px;
    }

    .plans-grid {
        grid-template-columns: 1fr;
    }

    .plan-card {
        padding: 23px;
    }
}

.subscription-action-link {
    border-color: #c8d7d4;
    background: #eef4f1;
}

.subscription-action-link strong {
    color: #20383b;
}

.subscription-action-link:hover {
    border-color: #a9c0bc;
    background: #dfe9e6;
}

.subscribe-confirm-card {
    max-width: 560px;
}

.subscribe-plan-summary {
    margin-bottom: 24px;
    padding: 24px;

    border: 1px solid #d8e4e0;
    border-radius: 18px;

    background: #f4f7f4;
}

.subscribe-plan-summary h2 {
    margin-bottom: 16px;
    font-size: 25px;
}

.subscribe-price {
    display: flex;
    align-items: flex-start;
    gap: 5px;

    margin-bottom: 18px;

    color: #29474a;
}

.subscribe-price span {
    margin-top: 8px;
    font-size: 17px;
    font-weight: bold;
}

.subscribe-price strong {
    font-size: 42px;
    line-height: 1;
}

.subscribe-description {
    margin-bottom: 20px;

    color: #64748b;
    line-height: 1.7;
}

.subscribe-detail-list {
    border-top: 1px solid #d8e4e0;
}

.subscribe-detail-list div {
    display: flex;
    justify-content: space-between;
    gap: 20px;

    padding: 14px 0;

    border-bottom: 1px solid #d8e4e0;
}

.subscribe-detail-list span {
    color: #64748b;
}

.subscribe-detail-list strong {
    color: #1e293b;
    text-align: right;
}

@media (max-width: 480px) {
    .subscribe-plan-summary {
        padding: 19px;
    }

    .subscribe-detail-list div {
        align-items: flex-start;
        flex-direction: column;
        gap: 6px;
    }

    .subscribe-detail-list strong {
        text-align: left;
    }
}

.subscription-container {
    width: min(820px, calc(100% - 40px));
    margin: 38px auto;
}

.subscription-heading {
    margin-bottom: 26px;
    text-align: center;
}

.subscription-heading h1 {
    margin-bottom: 9px;
    font-size: 34px;
}

.subscription-heading > p:last-child {
    color: #64748b;
}

.no-subscription-card,
.current-subscription-card {
    padding: 30px;

    border: 1px solid #e2e8f0;
    border-radius: 22px;

    background: #ffffff;

    box-shadow:
        0 14px 36px rgba(15, 23, 42, 0.08);
}

.no-subscription-card {
    text-align: center;
}

.no-subscription-icon {
    width: 70px;
    height: 70px;

    margin: 0 auto 20px;

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

    border-radius: 22px;

    background:
        linear-gradient(
            135deg,
            #4a7476,
            #20383b
        );

    color: #ffffff;
    font-size: 30px;
}

.no-subscription-card h2 {
    margin-bottom: 10px;
    font-size: 25px;
}

.no-subscription-card p {
    margin-bottom: 24px;
    color: #64748b;
}

.subscription-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;

    gap: 20px;

    margin-bottom: 24px;
}

.subscription-card-header h2 {
    font-size: 28px;
}

.subscription-status-active,
.subscription-status-expired,
.subscription-status-cancelled {
    display: inline-block;

    padding: 7px 12px;

    border-radius: 999px;

    font-size: 17px;
    font-weight: bold;
}

.subscription-status-active {
    background: #dcfce7;
    color: #15803d;
}

.subscription-status-expired {
    background: #fef3c7;
    color: #b45309;
}

.subscription-status-cancelled {
    background: #fee2e2;
    color: #b91c1c;
}

.subscription-price-box {
    margin-bottom: 20px;
    padding: 20px;

    border-radius: 16px;

    background:
        linear-gradient(
            135deg,
            #edf3f0,
            #eef4f1
        );
}

.subscription-price-box span {
    display: block;

    margin-bottom: 6px;

    color: #64748b;
    font-size: 17px;
}

.subscription-price-box strong {
    color: #29474a;
    font-size: 32px;
}

.subscription-description {
    margin-bottom: 22px;

    color: #64748b;
    line-height: 1.7;
}

.subscription-details {
    border-top: 1px solid #e2e8f0;
}

.subscription-detail-item {
    display: flex;
    justify-content: space-between;
    align-items: center;

    gap: 20px;

    padding: 16px 0;

    border-bottom: 1px solid #e2e8f0;
}

.subscription-detail-item span {
    color: #64748b;
}

.subscription-detail-item strong {
    text-align: right;
}

.subscription-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;

    gap: 14px;

    margin-top: 26px;
}

.subscription-primary-button,
.subscription-secondary-button {
    display: block;

    padding: 14px;

    border-radius: 12px;

    font-size: 18px;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
}

.subscription-primary-button {
    background:
        linear-gradient(
            135deg,
            #4a7476,
            #20383b
        );

    color: #ffffff;
}

.subscription-secondary-button {
    border: 1px solid #cbd5e1;

    background: #ffffff;
    color: #475569;
}

.subscription-primary-button:hover,
.subscription-secondary-button:hover {
    transform: translateY(-2px);
}

@media (max-width: 600px) {
    .subscription-container {
        width: calc(100% - 28px);
        margin: 24px auto;
    }

    .subscription-heading h1 {
        font-size: 28px;
    }

    .no-subscription-card,
    .current-subscription-card {
        padding: 23px;
    }

    .subscription-card-header {
        flex-direction: column;
        gap: 14px;
    }

    .subscription-detail-item {
        align-items: flex-start;
        flex-direction: column;
        gap: 7px;
    }

    .subscription-detail-item strong {
        text-align: left;
    }

    .subscription-actions {
        grid-template-columns: 1fr;
    }
}

.subscription-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(110px, 1fr));
    gap: 12px;
}

.subscription-stat-card {
    min-width: 120px;
    padding: 18px;

    border: 1px solid #e2e8f0;
    border-radius: 16px;

    background: #ffffff;

    box-shadow:
        0 8px 20px rgba(15, 23, 42, 0.06);
}

.subscription-stat-card span {
    display: block;

    margin-bottom: 6px;

    color: #64748b;
    font-size: 17px;
}

.subscription-stat-card strong {
    color: #29474a;
    font-size: 27px;
}

.subscription-admin-table {
    min-width: 1050px;
}

@media (max-width: 800px) {
    .subscription-stat-grid {
        grid-template-columns: 1fr 1fr;
        width: 100%;
    }
}

@media (max-width: 420px) {
    .subscription-stat-grid {
        grid-template-columns: 1fr;
    }
}

.plan-admin-table {
    min-width: 1050px;
}

.plan-description-cell {
    min-width: 220px;
    max-width: 320px;

    white-space: normal;
    overflow-wrap: anywhere;
}

.plan-status-active,
.plan-status-disabled {
    display: inline-block;

    padding: 6px 10px;

    border-radius: 999px;

    font-size: 16px;
    font-weight: bold;
}

.plan-status-active {
    background: #dcfce7;
    color: #15803d;
}

.plan-status-disabled {
    background: #f1f5f9;
    color: #64748b;
}

.plan-enable-button,
.plan-disable-button {
    padding: 7px 12px;

    border: none;
    border-radius: 8px;

    font-size: 17px;
    font-weight: bold;

    cursor: pointer;
}

.plan-enable-button {
    background: #ecfdf5;
    color: #15803d;
}

.plan-enable-button:hover {
    background: #dcfce7;
}

.plan-disable-button {
    background: #fff7ed;
    color: #c2410c;
}

.plan-disable-button:hover {
    background: #ffedd5;
}

.plan-status-checkbox {
    display: flex;
    align-items: center;
    gap: 10px;

    padding: 14px 16px;

    border: 1px solid #e2e8f0;
    border-radius: 12px;

    background: #f8fafc;
    color: #334155;

    cursor: pointer;
}

.plan-status-checkbox input {
    width: 18px;
    height: 18px;

    accent-color: #31565a;
}

.cancel-subscription-form {
    margin: 0;
}

.subscription-cancel-button {
    display: block;

    width: 100%;
    padding: 14px;

    border: 1px solid #fecaca;
    border-radius: 12px;

    background: #fef2f2;
    color: #dc2626;

    font-family: inherit;
    font-size: 18px;
    font-weight: bold;

    cursor: pointer;
}

.subscription-cancel-button:hover {
    background: #fee2e2;
    transform: translateY(-2px);
}

/*
 * 有三個操作按鈕時，使用三欄。
 */
.subscription-actions:has(
    .cancel-subscription-form
) {
    grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 700px) {
    .subscription-actions:has(
        .cancel-subscription-form
    ) {
        grid-template-columns: 1fr;
    }
}

.history-container {
    width: min(850px, calc(100% - 40px));
    margin: 38px auto;
}

.history-heading {
    margin-bottom: 26px;
    text-align: center;
}

.history-heading h1 {
    margin-bottom: 9px;
    font-size: 34px;
}

.history-heading > p:last-child {
    color: #64748b;
}

.history-list {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.history-card {
    padding: 25px;

    border: 1px solid #e2e8f0;
    border-radius: 20px;

    background: #ffffff;

    box-shadow:
        0 10px 28px rgba(15, 23, 42, 0.07);
}

.history-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;

    gap: 20px;

    margin-bottom: 20px;
}

.history-number {
    display: block;

    margin-bottom: 6px;

    color: #64748b;
    font-size: 17px;
}

.history-card h2 {
    font-size: 23px;
}

.history-details {
    display: grid;
    grid-template-columns: 1fr 1fr;

    border-top: 1px solid #e2e8f0;
}

.history-details div {
    display: flex;
    justify-content: space-between;
    gap: 15px;

    padding: 15px;

    border-bottom: 1px solid #e2e8f0;
}

.history-details div:nth-child(odd) {
    border-right: 1px solid #e2e8f0;
}

.history-details span {
    color: #64748b;
    font-size: 17px;
}

.history-details strong {
    color: #1e293b;
    text-align: right;
}

@media (max-width: 600px) {
    .history-container {
        width: calc(100% - 28px);
        margin: 24px auto;
    }

    .history-heading h1 {
        font-size: 28px;
    }

    .history-card {
        padding: 21px;
    }

    .history-card-header {
        flex-direction: column;
        gap: 13px;
    }

    .history-details {
        grid-template-columns: 1fr;
    }

    .history-details div:nth-child(odd) {
        border-right: none;
    }

    .history-details div {
        align-items: flex-start;
        flex-direction: column;
        gap: 6px;
    }

    .history-details strong {
        text-align: left;
    }
}

.history-link-button {
    display: inline-block;

    margin-top: 16px;
    padding: 10px 16px;

    border: 1px solid #bdd0cb;
    border-radius: 10px;

    background: #f4f7f4;
    color: #31565a;

    font-size: 17px;
    font-weight: bold;
    text-decoration: none;
}

.history-link-button:hover {
    background: #e8f0ed;
}

.payment-card {
    max-width: 580px;
}

.payment-order-box {
    margin-bottom: 22px;

    border: 1px solid #e2e8f0;
    border-radius: 16px;

    background: #ffffff;

    overflow: hidden;
}

.payment-order-row {
    display: flex;
    justify-content: space-between;
    align-items: center;

    gap: 20px;

    padding: 16px 18px;

    border-bottom: 1px solid #e2e8f0;
}

.payment-order-row:last-child {
    border-bottom: none;
}

.payment-order-row span {
    color: #64748b;
    font-size: 17px;
}

.payment-order-row strong {
    text-align: right;
    overflow-wrap: anywhere;
}

.payment-total {
    color: #29474a;
    font-size: 22px;
}

.development-payment-note {
    margin-bottom: 18px;
    padding: 13px 15px;

    border: 1px solid #fde68a;
    border-radius: 12px;

    background: #fffbeb;
    color: #b45309;

    font-size: 17px;
    text-align: center;
}

@media (max-width: 480px) {
    .payment-order-row {
        align-items: flex-start;
        flex-direction: column;
        gap: 7px;
    }

    .payment-order-row strong {
        text-align: left;
    }
}

.orders-container {
    width: min(880px, calc(100% - 40px));
    margin: 38px auto;
}

.orders-heading {
    margin-bottom: 26px;
    text-align: center;
}

.orders-heading h1 {
    margin-bottom: 9px;
    font-size: 34px;
}

.orders-heading > p:last-child {
    color: #64748b;
}

.orders-list {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.order-card {
    padding: 25px;

    border: 1px solid #e2e8f0;
    border-radius: 20px;

    background: #ffffff;

    box-shadow:
        0 10px 28px rgba(15, 23, 42, 0.07);
}

.order-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;

    gap: 20px;

    margin-bottom: 20px;
}

.order-number {
    display: block;

    margin-bottom: 6px;

    color: #64748b;
    font-size: 17px;
}

.order-card h2 {
    font-size: 23px;
}

.order-status-paid,
.order-status-pending,
.order-status-failed,
.order-status-cancelled {
    display: inline-block;

    padding: 7px 12px;

    border-radius: 999px;

    font-size: 17px;
    font-weight: bold;
}

.order-status-paid {
    background: #dcfce7;
    color: #15803d;
}

.order-status-pending {
    background: #fef3c7;
    color: #b45309;
}

.order-status-failed {
    background: #fee2e2;
    color: #b91c1c;
}

.order-status-cancelled {
    background: #f1f5f9;
    color: #64748b;
}

.order-details {
    display: grid;
    grid-template-columns: 1fr 1fr;

    border-top: 1px solid #e2e8f0;
}

.order-details div {
    display: flex;
    justify-content: space-between;

    gap: 15px;

    padding: 15px;

    border-bottom: 1px solid #e2e8f0;
}

.order-details div:nth-child(odd) {
    border-right: 1px solid #e2e8f0;
}

.order-details span {
    color: #64748b;
    font-size: 17px;
}

.order-details strong {
    text-align: right;
}

.order-actions {
    display: grid;
    grid-template-columns:
        repeat(auto-fit, minmax(160px, 1fr));

    gap: 12px;

    margin-top: 22px;
}

.cancel-order-form {
    margin: 0;
}

@media (max-width: 600px) {
    .orders-container {
        width: calc(100% - 28px);
        margin: 24px auto;
    }

    .orders-heading h1 {
        font-size: 28px;
    }

    .order-card {
        padding: 21px;
    }

    .order-card-header {
        flex-direction: column;
        gap: 13px;
    }

    .order-details {
        grid-template-columns: 1fr;
    }

    .order-details div:nth-child(odd) {
        border-right: none;
    }

    .order-details div {
        align-items: flex-start;
        flex-direction: column;
        gap: 6px;
    }

    .order-details strong {
        text-align: left;
    }
}

.order-stat-grid {
    display: grid;

    grid-template-columns:
        repeat(6, minmax(120px, 1fr));

    gap: 14px;

    margin-bottom: 24px;
}

.order-stat-card {
    padding: 18px;

    border: 1px solid #e2e8f0;
    border-radius: 16px;

    background: #ffffff;

    box-shadow:
        0 8px 22px rgba(15, 23, 42, 0.06);
}

.order-stat-card span {
    display: block;

    margin-bottom: 7px;

    color: #64748b;
    font-size: 17px;
}

.order-stat-card strong {
    color: #29474a;
    font-size: 28px;
}

.admin-order-filter {
    display: grid;

    grid-template-columns:
        minmax(240px, 1fr)
        minmax(150px, 220px)
        auto
        auto;

    align-items: center;
    gap: 12px;

    margin-bottom: 24px;
}

.admin-order-filter input {
    width: 100%;
    padding: 13px 15px;

    border: 1px solid #cbd5e1;
    border-radius: 11px;

    font-size: 18px;
    outline: none;
}

.admin-order-filter input:focus {
    border-color: #20383b;

    box-shadow:
        0 0 0 4px rgba(32, 56, 59, 0.12);
}

.admin-order-filter .form-select {
    padding: 13px 15px;
}

.admin-order-filter button {
    padding: 13px 22px;

    border: none;
    border-radius: 11px;

    background: #20383b;
    color: #ffffff;

    font-size: 18px;
    font-weight: bold;

    cursor: pointer;
}

.order-admin-table {
    min-width: 1150px;
}

@media (max-width: 900px) {
    .order-stat-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }

    .admin-order-filter {
        grid-template-columns: 1fr;
    }

    .admin-order-filter button,
    .admin-order-filter .clear-search {
        width: 100%;
        text-align: center;
    }
}

@media (max-width: 450px) {
    .order-stat-grid {
        grid-template-columns: 1fr;
    }
}

.admin-detail-container {
    width: min(1100px, calc(100% - 40px));
    margin: 36px auto;
}

.admin-detail-heading {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;

    gap: 24px;

    margin: 22px 0 26px;
}

.admin-detail-heading h1 {
    margin-bottom: 8px;
    font-size: 32px;
    text-align: left;
}

.admin-detail-heading p:last-child {
    color: #64748b;
    overflow-wrap: anywhere;
}

.admin-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
}

.admin-detail-card {
    padding: 25px;

    border: 1px solid #e2e8f0;
    border-radius: 20px;

    background: #ffffff;

    box-shadow:
        0 10px 28px rgba(15, 23, 42, 0.07);
}

.admin-detail-card h2 {
    margin-bottom: 20px;
    font-size: 22px;
}

.admin-detail-list {
    border-top: 1px solid #e2e8f0;
}

.admin-detail-list > div {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;

    gap: 20px;

    padding: 14px 0;

    border-bottom: 1px solid #e2e8f0;
}

.admin-detail-list span {
    flex-shrink: 0;

    color: #64748b;
    font-size: 17px;
}

.admin-detail-list strong {
    text-align: right;
    overflow-wrap: anywhere;
}

.admin-detail-description strong {
    max-width: 65%;
    line-height: 1.6;
}

.admin-detail-empty {
    padding: 22px;

    border-radius: 13px;

    background: #f8fafc;
    color: #64748b;

    text-align: center;
}

@media (max-width: 760px) {
    .admin-detail-grid {
        grid-template-columns: 1fr;
    }

    .admin-detail-heading {
        flex-direction: column;
        gap: 14px;
    }
}

/* PWA：加入手機主畫面提示 */
.pwa-install-banner[hidden],
.pwa-install-modal[hidden] {
    display: none !important;
}

.pwa-install-banner {
    position: fixed;
    z-index: 9200;
    left: 22px;
    bottom: 22px;
    width: min(430px, calc(100vw - 32px));
    padding: 19px 54px 19px 19px;
    display: grid;
    grid-template-columns: 50px minmax(0, 1fr);
    gap: 14px;
    border: 1px solid rgba(21, 50, 53, 0.16);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.97);
    box-shadow: 0 20px 54px rgba(21, 50, 53, 0.2);
    color: #153235;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.pwa-install-logo {
    width: 50px;
    height: 50px;
    border: 1px solid #e1e8e5;
    border-radius: 14px;
    object-fit: cover;
    background: #ffffff;
}

.pwa-install-copy {
    min-width: 0;
}

.pwa-install-copy strong {
    display: block;
    margin: 0 0 3px;
    color: #153235;
    font-size: 18px;
    line-height: 1.35;
}

.pwa-install-copy p {
    margin: 0 0 12px;
    color: #526a6b;
    font-size: 15px;
    line-height: 1.55;
}

.pwa-install-action {
    min-height: 44px;
    padding: 10px 16px;
    border: 0;
    border-radius: 12px;
    background: #17383b;
    color: #ffffff;
    font-size: 16px;
    font-weight: 900;
    cursor: pointer;
}

.pwa-install-action:hover {
    background: #244d50;
}

.pwa-install-dismiss {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 34px;
    height: 34px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 999px;
    background: #edf3f1;
    color: #395557;
    font-size: 22px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
}

.pwa-install-modal {
    position: fixed;
    z-index: 9300;
    inset: 0;
    padding: 20px;
    display: grid;
    place-items: center;
    background: rgba(10, 30, 32, 0.58);
}

.pwa-install-modal-card {
    width: min(520px, 100%);
    max-height: min(720px, calc(100vh - 40px));
    overflow-y: auto;
    padding: clamp(24px, 5vw, 34px);
    border-radius: 26px;
    background: #ffffff;
    box-shadow: 0 26px 70px rgba(8, 28, 30, 0.32);
    color: #153235;
}

.pwa-install-modal-card h2 {
    margin: 0 0 10px;
    color: #153235;
    font-size: clamp(25px, 5vw, 32px);
    line-height: 1.3;
}

.pwa-install-modal-card > p {
    margin: 0 0 18px;
    color: #526a6b;
    font-size: 17px;
    line-height: 1.65;
}

.pwa-install-steps {
    margin: 0 0 22px;
    padding: 0;
    display: grid;
    gap: 11px;
    list-style: none;
    counter-reset: pwa-step;
}

.pwa-install-steps li {
    position: relative;
    min-height: 46px;
    padding: 11px 13px 11px 58px;
    border: 1px solid #dce6e2;
    border-radius: 14px;
    background: #f7faf9;
    color: #29494b;
    font-size: 16px;
    font-weight: 750;
    line-height: 1.5;
    counter-increment: pwa-step;
}

.pwa-install-steps li::before {
    content: counter(pwa-step);
    position: absolute;
    top: 10px;
    left: 12px;
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: #17383b;
    color: #ffffff;
    font-size: 15px;
    font-weight: 900;
}

.pwa-install-modal-close {
    width: 100%;
    min-height: 48px;
    padding: 11px 16px;
    border: 0;
    border-radius: 13px;
    background: #17383b;
    color: #ffffff;
    font-size: 17px;
    font-weight: 900;
    cursor: pointer;
}

@media (max-width: 760px) {
    .pwa-install-banner {
        right: 16px;
        bottom: max(84px, calc(68px + env(safe-area-inset-bottom)));
        left: 16px;
        width: auto;
        padding: 16px 48px 16px 15px;
        grid-template-columns: 44px minmax(0, 1fr);
        gap: 11px;
        border-radius: 19px;
    }

    .pwa-install-logo {
        width: 44px;
        height: 44px;
        border-radius: 12px;
    }

    .pwa-install-copy strong {
        font-size: 17px;
    }

    .pwa-install-copy p {
        font-size: 14px;
    }

    .pwa-install-modal {
        padding: 14px;
    }
}

@media (max-width: 500px) {
    .admin-detail-container {
        width: calc(100% - 28px);
        margin: 24px auto;
    }

    .admin-detail-heading h1 {
        font-size: 27px;
    }

    .admin-detail-card {
        padding: 21px;
    }

    .admin-detail-list > div {
        flex-direction: column;
        gap: 6px;
    }

    .admin-detail-list strong,
    .admin-detail-description strong {
        max-width: none;
        text-align: left;
    }
}

.dashboard-container {
    width: min(1200px, calc(100% - 40px));
    margin: 36px auto;
}

.dashboard-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;

    gap: 24px;

    margin-bottom: 26px;
}

.dashboard-heading h1 {
    margin-bottom: 8px;

    text-align: left;
    font-size: 32px;
}

.dashboard-heading p:last-child {
    color: #64748b;
}

.dashboard-date {
    padding: 11px 16px;

    border: 1px solid #e2e8f0;
    border-radius: 11px;

    background: #ffffff;
    color: #475569;

    font-size: 17px;
    font-weight: bold;
}

.dashboard-stat-grid {
    display: grid;
    grid-template-columns:
        repeat(5, minmax(150px, 1fr));

    gap: 16px;

    margin-bottom: 24px;
}

.dashboard-stat-card {
    padding: 20px;

    border: 1px solid #e2e8f0;
    border-radius: 18px;

    background: #ffffff;

    box-shadow:
        0 10px 26px rgba(15, 23, 42, 0.06);
}

.dashboard-stat-card > span {
    display: block;

    margin-bottom: 8px;

    color: #64748b;
    font-size: 17px;
}

.dashboard-stat-card > strong {
    display: block;

    margin-bottom: 7px;

    color: #29474a;
    font-size: 29px;
}

.dashboard-stat-card small {
    color: #94a3b8;
    font-size: 16px;
}

.revenue-card {
    background:
        linear-gradient(
            135deg,
            #29474a,
            #20383b
        );

    color: #ffffff;
}

.revenue-card > span,
.revenue-card small {
    color: rgba(255, 255, 255, 0.76);
}

.revenue-card > strong {
    color: #ffffff;
}

.dashboard-content-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;

    gap: 22px;

    margin-bottom: 22px;
}

.dashboard-panel {
    padding: 24px;

    border: 1px solid #e2e8f0;
    border-radius: 20px;

    background: #ffffff;

    box-shadow:
        0 10px 28px rgba(15, 23, 42, 0.06);
}

.dashboard-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;

    gap: 20px;

    margin-bottom: 20px;
}

.dashboard-panel-header h2 {
    font-size: 22px;
}

.dashboard-panel-header > a {
    color: #20383b;

    font-size: 17px;
    font-weight: bold;
    text-decoration: none;
}

.dashboard-list {
    display: flex;
    flex-direction: column;
}

.dashboard-list-item {
    display: flex;
    justify-content: space-between;
    align-items: center;

    gap: 18px;

    padding: 15px 0;

    border-bottom: 1px solid #e2e8f0;

    color: #1e293b;
    text-decoration: none;
}

.dashboard-list-item:last-child {
    border-bottom: none;
}

.dashboard-list-item:hover {
    background: #f8fafc;
}

.dashboard-list-item > div:first-child {
    min-width: 0;

    display: flex;
    flex-direction: column;
    gap: 5px;
}

.dashboard-list-item strong {
    overflow-wrap: anywhere;
}

.dashboard-list-item span:not(
    .order-status-paid,
    .order-status-pending,
    .order-status-failed,
    .order-status-cancelled,
    .admin-badge,
    .normal-badge
) {
    color: #64748b;
    font-size: 17px;
    overflow-wrap: anywhere;
}

.dashboard-list-right {
    flex-shrink: 0;

    display: flex;
    align-items: flex-end;
    flex-direction: column;

    gap: 7px;
}

.dashboard-list-right small {
    color: #94a3b8;
}

.dashboard-empty {
    padding: 28px;

    border-radius: 13px;

    background: #f8fafc;
    color: #64748b;

    text-align: center;
}

.dashboard-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);

    gap: 16px;
}

.dashboard-summary-card {
    display: flex;
    justify-content: space-between;
    align-items: center;

    gap: 20px;

    padding: 18px 20px;

    border: 1px solid #e2e8f0;
    border-radius: 16px;

    background: #ffffff;
}

.dashboard-summary-card span {
    color: #64748b;
}

.dashboard-summary-card strong {
    color: #29474a;
    font-size: 24px;
}

@media (max-width: 1050px) {
    .dashboard-stat-grid {
        grid-template-columns:
            repeat(3, 1fr);
    }
}

@media (max-width: 780px) {
    .dashboard-content-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-stat-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 560px) {
    .dashboard-container {
        width: calc(100% - 28px);
        margin: 24px auto;
    }

    .dashboard-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .dashboard-heading h1 {
        font-size: 27px;
    }

    .dashboard-date {
        width: 100%;
        text-align: center;
    }

    .dashboard-stat-grid,
    .dashboard-summary-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-panel {
        padding: 20px;
    }

    .dashboard-list-item {
        align-items: flex-start;
        flex-direction: column;
    }

    .dashboard-list-right {
        width: 100%;

        align-items: flex-start;
        flex-direction: row;
        justify-content: space-between;
    }
}

.premium-container {
    width: min(1000px, calc(100% - 40px));
    margin: 38px auto;
}

.premium-hero {
    margin-bottom: 24px;
    padding: 45px 30px;

    border-radius: 24px;

    background:
        linear-gradient(
            135deg,
            #312e81,
            #29474a,
            #20383b
        );

    color: #ffffff;
    text-align: center;

    box-shadow:
        0 20px 45px rgba(41, 71, 74, 0.22);
}

.premium-icon {
    width: 70px;
    height: 70px;

    margin: 0 auto 18px;

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

    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 22px;

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

    font-size: 30px;
}

.premium-label {
    margin-bottom: 8px;

    color: rgba(255, 255, 255, 0.75);

    font-size: 16px;
    font-weight: bold;
    letter-spacing: 1.5px;
}

.premium-hero h1 {
    margin-bottom: 10px;
    font-size: 34px;
}

.premium-hero > p:last-child {
    color: rgba(255, 255, 255, 0.82);
}

.premium-info-card {
    display: grid;
    grid-template-columns: 1fr 1fr;

    margin-bottom: 24px;

    border: 1px solid #e2e8f0;
    border-radius: 18px;

    background: #ffffff;

    box-shadow:
        0 10px 28px rgba(15, 23, 42, 0.06);

    overflow: hidden;
}

.premium-info-card > div {
    padding: 20px;
}

.premium-info-card > div:first-child {
    border-right: 1px solid #e2e8f0;
}

.premium-info-card span {
    display: block;

    margin-bottom: 7px;

    color: #64748b;
    font-size: 17px;
}

.premium-info-card strong {
    color: #29474a;
    font-size: 18px;
}

.premium-content-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.premium-content-card {
    padding: 25px;

    border: 1px solid #e2e8f0;
    border-radius: 20px;

    background: #ffffff;

    box-shadow:
        0 10px 28px rgba(15, 23, 42, 0.06);
}

.premium-content-number {
    display: inline-block;

    margin-bottom: 20px;

    color: #818cf8;

    font-size: 17px;
    font-weight: bold;
}

.premium-content-card h2 {
    margin-bottom: 12px;
    font-size: 21px;
}

.premium-content-card p {
    color: #64748b;
    line-height: 1.7;
}

@media (max-width: 760px) {
    .premium-content-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    .premium-container {
        width: calc(100% - 28px);
        margin: 24px auto;
    }

    .premium-hero {
        padding: 34px 22px;
        border-radius: 20px;
    }

    .premium-hero h1 {
        font-size: 27px;
    }

    .premium-info-card {
        grid-template-columns: 1fr;
    }

    .premium-info-card > div:first-child {
        border-right: none;
        border-bottom: 1px solid #e2e8f0;
    }

    .premium-content-card {
        padding: 22px;
    }
}

.premium-action-link {
    border-color: #bdd0cb;
    background: #f4f7f4;
}

.premium-action-link strong {
    color: #31565a;
}

.premium-action-link:hover {
    border-color: #a78bfa;
    background: #e8f0ed;
}

.member-subscription-summary {
    margin-bottom: 24px;
    padding: 25px;

    border: 1px solid #d8e4e0;
    border-radius: 20px;

    background:
        linear-gradient(
            135deg,
            #ffffff,
            #f4f7f4
        );

    box-shadow:
        0 12px 30px rgba(41, 71, 74, 0.08);
}

.member-subscription-heading {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;

    gap: 20px;
    margin-bottom: 21px;
}

.member-subscription-heading h2 {
    font-size: 23px;
}

.subscription-summary-link {
    color: #31565a;
    font-size: 17px;
    font-weight: bold;
    text-decoration: none;
}

.subscription-summary-main {
    display: flex;
    justify-content: space-between;
    align-items: center;

    gap: 20px;
    margin-bottom: 20px;
}

.subscription-summary-label {
    display: block;
    margin-bottom: 5px;

    color: #64748b;
    font-size: 17px;
}

.subscription-summary-plan {
    color: #29474a;
    font-size: 26px;
}

.subscription-summary-details {
    display: grid;
    grid-template-columns: repeat(3, 1fr);

    margin-bottom: 21px;

    border: 1px solid #e2e8f0;
    border-radius: 14px;

    background: #ffffff;
    overflow: hidden;
}

.subscription-summary-details > div {
    padding: 16px;
    border-right: 1px solid #e2e8f0;
}

.subscription-summary-details > div:last-child {
    border-right: none;
}

.subscription-summary-details span {
    display: block;
    margin-bottom: 6px;

    color: #64748b;
    font-size: 17px;
}

.subscription-summary-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;

    gap: 12px;
}

.subscription-summary-primary,
.subscription-summary-secondary {
    display: block;
    padding: 13px 16px;

    border-radius: 11px;

    font-size: 17px;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
}

.subscription-summary-primary {
    background:
        linear-gradient(
            135deg,
            #4a7476,
            #20383b
        );

    color: #ffffff;
}

.subscription-summary-secondary {
    border: 1px solid #bdd0cb;

    background: #ffffff;
    color: #31565a;
}

.subscription-summary-empty {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;

    gap: 18px;
}

.subscription-summary-empty-icon {
    width: 54px;
    height: 54px;

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

    border-radius: 17px;

    background: #e6eeeb;
    color: #31565a;

    font-size: 23px;
}

.subscription-summary-empty strong {
    display: block;
    margin-bottom: 5px;
}

.subscription-summary-empty p {
    color: #64748b;
    font-size: 17px;
}

@media (max-width: 650px) {
    .member-subscription-summary {
        padding: 21px;
    }

    .member-subscription-heading,
    .subscription-summary-main {
        align-items: flex-start;
        flex-direction: column;
    }

    .subscription-summary-details {
        grid-template-columns: 1fr;
    }

    .subscription-summary-details > div {
        border-right: none;
        border-bottom: 1px solid #e2e8f0;
    }

    .subscription-summary-details > div:last-child {
        border-bottom: none;
    }

    .subscription-summary-actions {
        grid-template-columns: 1fr;
    }

    .subscription-summary-empty {
        grid-template-columns: 1fr;
    }
}

.bank-transfer-card {
    max-width: 620px;
}

.transfer-order-box,
.bank-information-box {
    margin-bottom: 22px;

    border: 1px solid #e2e8f0;
    border-radius: 17px;

    background: #ffffff;
    overflow: hidden;
}

.bank-information-box {
    padding-top: 20px;

    border-color: #c7d2fe;
    background: #f8faff;
}

.bank-information-box > .card-label,
.bank-information-box > h2 {
    margin-left: 20px;
    margin-right: 20px;
}

.bank-information-box > h2 {
    margin-bottom: 16px;
    font-size: 21px;
}

.transfer-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;

    gap: 20px;
    padding: 15px 18px;

    border-bottom: 1px solid #e2e8f0;
}

.transfer-row:last-child {
    border-bottom: none;
}

.transfer-row span {
    flex-shrink: 0;

    color: #64748b;
    font-size: 17px;
}

.transfer-row strong {
    color: #1e293b;
    text-align: right;
    overflow-wrap: anywhere;
}

.transfer-amount-row {
    background: #edf3f0;
}

.transfer-amount-row strong {
    color: #29474a;
    font-size: 25px;
}

.bank-account-number {
    color: #29474a !important;
    font-size: 20px;
    letter-spacing: 1px;
}

.transfer-notice {
    margin-bottom: 20px;
    padding: 15px 17px;

    border: 1px solid #fde68a;
    border-radius: 13px;

    background: #fffbeb;
    color: #92400e;

    font-size: 17px;
    line-height: 1.7;
}

.transfer-review-box {
    margin-bottom: 20px;
    padding: 19px;

    border: 1px solid #c8d7d4;
    border-radius: 14px;

    background: #eef4f1;
    color: #20383b;
}

.transfer-review-box strong {
    display: block;
    margin-bottom: 10px;
    font-size: 18px;
}

.transfer-review-box p {
    margin-bottom: 7px;
    line-height: 1.6;
}

.transfer-review-box p:last-child {
    margin-bottom: 0;
}

@media (max-width: 500px) {
    .transfer-row {
        flex-direction: column;
        gap: 6px;
    }

    .transfer-row strong {
        text-align: left;
    }
}

.order-status-review {
    display: inline-block;

    padding: 7px 12px;

    border-radius: 999px;

    background: #dfe9e6;
    color: #20383b;

    font-size: 17px;
    font-weight: bold;
}

.transfer-review-admin-card {
    margin-top: 22px;
    padding: 25px;

    border: 1px solid #c8d7d4;
    border-radius: 20px;

    background: #ffffff;

    box-shadow:
        0 10px 28px rgba(15, 23, 42, 0.07);
}

.transfer-review-admin-card h2 {
    margin-bottom: 20px;
    font-size: 22px;
}

.transfer-last5-value {
    color: #20383b;
    font-size: 22px;
    letter-spacing: 3px;
}

.transfer-review-admin-form {
    margin-top: 24px;
}

.transfer-review-admin-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;

    gap: 12px;
}

.transfer-approve-button,
.transfer-reject-button {
    width: 100%;
    padding: 14px;

    border: none;
    border-radius: 12px;

    font-family: inherit;
    font-size: 18px;
    font-weight: bold;

    cursor: pointer;
}

.transfer-approve-button {
    background: #16a34a;
    color: #ffffff;
}

.transfer-approve-button:hover {
    background: #15803d;
}

.transfer-reject-button {
    border: 1px solid #fecaca;

    background: #fef2f2;
    color: #dc2626;
}

.transfer-reject-button:hover {
    background: #fee2e2;
}

@media (max-width: 600px) {
    .transfer-review-admin-card {
        padding: 21px;
    }

    .transfer-review-admin-actions {
        grid-template-columns: 1fr;
    }
}

.review-stat-card {
    border-color: #c8d7d4;
    background: #eef4f1;
}

.review-stat-card strong {
    color: #20383b;
}

.admin-transfer-last5 {
    display: inline-block;

    padding: 6px 10px;

    border-radius: 8px;

    background: #eef4f1;
    color: #20383b;

    font-size: 17px;
    letter-spacing: 2px;
}

.order-stat-link {
    display: block;
    color: inherit;
    text-decoration: none;
    transition:
        transform 0.2s,
        box-shadow 0.2s;
}

.order-stat-link:hover {
    transform: translateY(-3px);

    box-shadow:
        0 14px 30px rgba(32, 56, 59, 0.14);
}

.order-stat-link small {
    display: block;
    margin-top: 7px;

    color: #64748b;
    font-size: 15px;
}

.review-order-row {
    background: #eef4f1;
}

.review-order-row:hover {
    background: #dfe9e6;
}

.copy-area{

    display:flex;

    align-items:center;

    gap:12px;

}

.copy-button{

    padding:8px 14px;

    border:none;

    border-radius:8px;

    background:#29474a;

    color:#fff;

    font-size: 17px;

    cursor:pointer;

    transition:.2s;

}

.copy-button:hover{

    background:#4338ca;

}

@media (max-width:600px){

    .copy-area{

        flex-direction:column;

        align-items:flex-start;

    }

}

.copy-button {
    min-width: 105px;
    padding: 8px 14px;

    border: none;
    border-radius: 8px;

    background: #29474a;
    color: #ffffff;

    font-family: inherit;
    font-size: 17px;
    font-weight: bold;

    cursor: pointer;

    transition:
        background 0.2s,
        transform 0.2s,
        opacity 0.2s;
}

.copy-button:hover {
    background: #4338ca;
    transform: translateY(-1px);
}

.copy-button:disabled {
    cursor: default;
    opacity: 1;
}

.copy-button-success,
.copy-button-success:hover {
    background: #16a34a;
    transform: none;
}

.copy-button-error,
.copy-button-error:hover {
    background: #dc2626;
    transform: none;
}

.terms-agreement {
    margin: 18px 0;
    padding: 14px;
    background-color: #f5f6f8;
    border: 1px solid #dddddd;
    border-radius: 8px;
    font-size: 17px;
    line-height: 1.6;
}

.terms-agreement label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
}

.terms-agreement input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin-top: 3px;
    flex-shrink: 0;
}

.terms-agreement a {
    color: #0066cc;
    font-weight: bold;
    text-decoration: underline;
}

/* =========================
   訂閱排程設定頁
========================= */

.schedule-form-card {
    width: min(760px, 100%);
}

.selected-plan-box {
    margin: 24px 0;
    padding: 20px;
    background-color: #f6f8fb;
    border: 1px solid #dde3eb;
    border-radius: 12px;
}

.selected-plan-box h2 {
    margin: 10px 0;
}

.selected-plan-category {
    display: inline-block;
    padding: 5px 10px;
    background-color: #e9f1ff;
    border-radius: 999px;
    color: #24599c;
    font-size: 17px;
    font-weight: bold;
}

.selected-plan-price {
    margin: 12px 0;
    font-size: 28px;
    font-weight: bold;
}

.selected-plan-details {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 24px;
    margin: 12px 0;
    color: #555555;
}

.form-help-text {
    display: block;
    margin-top: 6px;
    color: #777777;
    line-height: 1.5;
}

.schedule-section {
    margin-top: 30px;
}

.schedule-section > h2 {
    margin-bottom: 8px;
}

.schedule-section-note {
    margin-top: 0;
    color: #666666;
}

.schedule-row {
    margin: 18px 0;
    padding: 18px;
    background-color: #fafafa;
    border: 1px solid #e4e4e4;
    border-radius: 10px;
}

.schedule-row h3 {
    margin: 0 0 15px;
    font-size: 18px;
}

.schedule-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.schedule-fields .form-group {
    margin-bottom: 0;
}

.schedule-fields select {
    width: 100%;
    min-height: 46px;
    padding: 10px;
    border: 1px solid #cccccc;
    border-radius: 7px;
    background-color: #ffffff;
    font-size: 17px;
}

.subscription-terms-agreement {
    margin: 25px 0;
    padding: 15px;
    background-color: #fff9e8;
    border: 1px solid #eadba8;
    border-radius: 9px;
}

.subscription-terms-agreement label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    line-height: 1.7;
}

.subscription-terms-agreement input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin-top: 4px;
    flex-shrink: 0;
}

.subscription-terms-agreement a {
    color: #0066cc;
    font-weight: bold;
    text-decoration: underline;
}

@media (max-width: 600px) {
    .schedule-fields {
        grid-template-columns: 1fr;
    }

    .selected-plan-details {
        flex-direction: column;
        gap: 5px;
    }
}

/* =========================
   訂閱確認頁
========================= */

.subscribe-confirm-card {
    width: min(720px, 100%);
}

.confirm-plan-category {
    display: inline-block;
    margin-bottom: 8px;
    padding: 5px 10px;
    background-color: #e9f1ff;
    border-radius: 999px;
    color: #24599c;
    font-size: 17px;
    font-weight: bold;
}

.confirm-schedule-section {
    margin: 26px 0;
}

.confirm-schedule-section h2 {
    margin-bottom: 14px;
    font-size: 21px;
}

.confirm-schedule-list {
    display: grid;
    gap: 12px;
}

.confirm-schedule-item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 14px;
    padding: 15px;
    background-color: #f7f8fa;
    border: 1px solid #e1e4e8;
    border-radius: 9px;
}

.schedule-number {
    display: inline-block;
    padding: 4px 9px;
    background-color: #e9edf3;
    border-radius: 999px;
    color: #555555;
    font-size: 17px;
}

.confirmed-terms-box {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 25px 0;
    padding: 16px;
    background-color: #edf9f0;
    border: 1px solid #b9dfc1;
    border-radius: 9px;
}

.confirmed-check {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    background-color: #24863b;
    border-radius: 50%;
    color: #ffffff;
    font-weight: bold;
}

.confirmed-terms-box p {
    margin: 4px 0 0;
    color: #5d665f;
    font-size: 17px;
}

.confirmed-terms-box a {
    color: #1268b3;
    font-weight: bold;
}

.confirm-payment-note {
    margin: 16px 0 0;
    color: #777777;
    font-size: 17px;
    line-height: 1.7;
    text-align: center;
}

#confirm-subscription-button:disabled {
    cursor: not-allowed;
    opacity: 0.65;
}

@media (max-width: 560px) {
    .confirm-schedule-item {
        grid-template-columns: 1fr;
        gap: 7px;
    }

    .schedule-number {
        width: fit-content;
    }
}

/* =========================
   管理員訂單收運排程
========================= */

.admin-schedule-list {
    display: grid;
    gap: 12px;
}

.admin-schedule-item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 14px;
    background-color: #f7f8fa;
    border: 1px solid #e1e4e8;
    border-radius: 9px;
}

.admin-schedule-item small {
    grid-column: 1 / -1;
    color: #777777;
    line-height: 1.5;
}

.admin-schedule-number {
    display: inline-block;
    width: fit-content;
    padding: 4px 9px;
    background-color: #e9edf3;
    border-radius: 999px;
    color: #555555;
    font-size: 17px;
}

@media (max-width: 600px) {
    .admin-schedule-item {
        grid-template-columns: 1fr;
    }

    .admin-schedule-item small {
        grid-column: auto;
    }
}

/* =========================
   會員中心收運排程
========================= */

.member-plan-category {
    display: block;
    margin-top: 6px;
    color: #777777;
    font-size: 17px;
}

.subscription-status-upcoming {
    display: inline-block;
    padding: 6px 12px;
    background-color: #fff4d6;
    border-radius: 999px;
    color: #946600;
    font-size: 17px;
    font-weight: bold;
}

.member-schedule-summary {
    margin-top: 22px;
    padding-top: 20px;
    border-top: 1px solid #e7e7e7;
}

.member-schedule-summary h3 {
    margin: 0 0 14px;
    font-size: 18px;
}

.member-schedule-list {
    display: grid;
    gap: 10px;
}

.member-schedule-item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 13px 14px;
    background-color: #f7f8fa;
    border: 1px solid #e2e5e9;
    border-radius: 9px;
}

.member-schedule-number {
    display: inline-block;
    width: fit-content;
    padding: 4px 9px;
    background-color: #e9edf3;
    border-radius: 999px;
    color: #555555;
    font-size: 17px;
}

.member-schedule-empty {
    margin: 0;
    color: #777777;
}

@media (max-width: 600px) {
    .member-schedule-item {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .subscription-summary-actions {
        flex-direction: column;
    }
}

/* =========================
   我的訂閱完整資料
========================= */

.pending-order-card {
    margin-bottom: 24px;
    padding: 24px;
    background-color: #ffffff;
    border: 1px solid #e2e5e9;
    border-radius: 14px;
    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.05);
}

.pending-order-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 20px;
}

.pending-order-heading h2 {
    margin: 4px 0 0;
}

.pending-order-status-payment,
.pending-order-status-review {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 17px;
    font-weight: bold;
}

.pending-order-status-payment {
    background-color: #fff4d6;
    color: #8d6500;
}

.pending-order-status-review {
    background-color: #eaf2ff;
    color: #24599c;
}

.pending-order-details {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.pending-order-details div {
    padding: 14px;
    background-color: #f7f8fa;
    border-radius: 9px;
}

.pending-order-details span {
    display: block;
    margin-bottom: 5px;
    color: #777777;
    font-size: 17px;
}

.pending-order-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 20px;
}

.subscription-plan-category {
    display: inline-block;
    margin-top: 8px;
    padding: 4px 9px;
    background-color: #edf3ff;
    border-radius: 999px;
    color: #24599c;
    font-size: 17px;
    font-weight: bold;
}

.subscription-schedule-section {
    margin-top: 26px;
    padding-top: 22px;
    border-top: 1px solid #e6e6e6;
}

.subscription-schedule-section h3 {
    margin: 0 0 15px;
    font-size: 20px;
}

.subscription-schedule-list {
    display: grid;
    gap: 11px;
}

.subscription-schedule-item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 14px;
    background-color: #f7f8fa;
    border: 1px solid #e1e4e8;
    border-radius: 9px;
}

.subscription-schedule-number {
    display: inline-block;
    width: fit-content;
    padding: 4px 9px;
    background-color: #e9edf3;
    border-radius: 999px;
    color: #555555;
    font-size: 17px;
}

.subscription-schedule-empty {
    padding: 16px;
    background-color: #f7f8fa;
    border-radius: 9px;
    color: #777777;
}

.subscription-terms-record {
    margin-top: 22px;
    padding: 16px;
    background-color: #edf9f0;
    border: 1px solid #b9dfc1;
    border-radius: 9px;
}

.subscription-terms-record p {
    margin: 6px 0 0;
    color: #59645c;
}

.subscription-terms-record a {
    color: #1268b3;
    font-weight: bold;
}

@media (max-width: 650px) {
    .pending-order-heading {
        flex-direction: column;
    }

    .pending-order-details {
        grid-template-columns: 1fr;
    }

    .subscription-schedule-item {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .pending-order-actions,
    .subscription-actions {
        flex-direction: column;
    }
}

/* =========================
   訂閱歷史完整資料
========================= */

.history-plan-category {
    display: inline-block;
    margin-top: 7px;
    padding: 4px 9px;
    background-color: #edf3ff;
    border-radius: 999px;
    color: #24599c;
    font-size: 17px;
    font-weight: bold;
}

.history-payment-paid,
.history-payment-review,
.history-payment-pending,
.history-payment-other {
    display: inline-block;
    width: fit-content;
    padding: 4px 9px;
    border-radius: 999px;
    font-size: 17px;
}

.history-payment-paid {
    background-color: #e7f7eb;
    color: #25733a;
}

.history-payment-review {
    background-color: #eaf2ff;
    color: #24599c;
}

.history-payment-pending {
    background-color: #fff4d6;
    color: #8d6500;
}

.history-payment-other {
    background-color: #eeeeee;
    color: #666666;
}

.history-description {
    margin-top: 18px;
    padding: 15px;
    background-color: #f7f8fa;
    border-radius: 9px;
}

.history-description span {
    display: block;
    margin-bottom: 5px;
    color: #777777;
    font-size: 17px;
}

.history-description p {
    margin: 0;
    line-height: 1.7;
}

.history-schedule-section {
    margin-top: 22px;
    padding-top: 20px;
    border-top: 1px solid #e6e6e6;
}

.history-schedule-section h3 {
    margin: 0 0 14px;
    font-size: 18px;
}

.history-schedule-list {
    display: grid;
    gap: 10px;
}

.history-schedule-item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 13px 14px;
    background-color: #f7f8fa;
    border: 1px solid #e1e4e8;
    border-radius: 9px;
}

.history-schedule-number {
    display: inline-block;
    width: fit-content;
    padding: 4px 9px;
    background-color: #e9edf3;
    border-radius: 999px;
    color: #555555;
    font-size: 17px;
}

.history-schedule-empty {
    padding: 15px;
    background-color: #f7f8fa;
    border-radius: 9px;
    color: #777777;
}

.history-terms-record {
    margin-top: 18px;
    padding: 15px;
    background-color: #edf9f0;
    border: 1px solid #b9dfc1;
    border-radius: 9px;
}

.history-terms-record p {
    margin: 5px 0 0;
    color: #59645c;
}

.history-terms-record a {
    color: #1268b3;
    font-weight: bold;
}

@media (max-width: 650px) {
    .history-schedule-item {
        grid-template-columns: 1fr;
        gap: 6px;
    }
}


/* =========================
   每日收運排程
========================= */

.collection-container {
    width: min(1180px, calc(100% - 30px));
    margin: 0 auto;
    padding: 40px 0 60px;
}

.collection-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 25px;
    margin-bottom: 25px;
}

.collection-heading h1 {
    margin: 5px 0 8px;
}

.collection-heading p {
    margin-bottom: 0;
    color: #666666;
}

.collection-filter-card {
    margin-bottom: 22px;
    padding: 20px;
    background-color: #ffffff;
    border: 1px solid #e1e4e8;
    border-radius: 12px;
}

.collection-filter-card form {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}

.collection-filter-card .form-group {
    min-width: 220px;
    margin: 0;
}

.collection-search-button,
.collection-today-button {
    min-height: 44px;
    padding: 11px 18px;
    border-radius: 7px;
    font-size: 18px;
    font-weight: bold;
}

.collection-search-button {
    border: 0;
    background-color: #222222;
    color: #ffffff;
    cursor: pointer;
}

.collection-today-button {
    display: inline-flex;
    align-items: center;
    background-color: #eeeeee;
    color: #333333;
    text-decoration: none;
}

.collection-date-summary {
    display: grid;
    grid-template-columns:
        repeat(5, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 30px;
}

.collection-date-summary div {
    padding: 18px;
    background-color: #ffffff;
    border: 1px solid #e1e4e8;
    border-radius: 11px;
}

.collection-date-summary span {
    display: block;
    margin-bottom: 7px;
    color: #777777;
    font-size: 17px;
}

.collection-date-summary strong {
    font-size: 20px;
}

.collection-time-section {
    margin-bottom: 35px;
}

.collection-time-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 16px;
}

.collection-time-heading h2 {
    margin: 4px 0;
}

.collection-time-heading p {
    margin: 0;
    color: #777777;
}

.collection-count-badge {
    padding: 6px 12px;
    background-color: #edf3ff;
    border-radius: 999px;
    color: #24599c;
    font-size: 17px;
    font-weight: bold;
}

.collection-list {
    display: grid;
    gap: 16px;
}

.collection-card {
    display: grid;
    grid-template-columns: 46px 1fr;
    gap: 16px;
    padding: 20px;
    background-color: #ffffff;
    border: 1px solid #e1e4e8;
    border-radius: 13px;
    box-shadow:
        0 6px 20px rgba(0, 0, 0, 0.04);
}

.collection-card-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    background-color: #222222;
    border-radius: 50%;
    color: #ffffff;
    font-weight: bold;
}

.collection-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

.collection-card-header h3 {
    margin: 0 0 7px;
    font-size: 21px;
}

.collection-plan-category,
.collection-time-badge {
    display: inline-block;
    padding: 5px 10px;
    border-radius: 999px;
    font-size: 17px;
    font-weight: bold;
}

.collection-plan-category {
    background-color: #edf3ff;
    color: #24599c;
}

.collection-time-badge {
    background-color: #fff4d6;
    color: #8d6500;
}

.collection-information-grid {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 18px;
}

.collection-information-grid div {
    padding: 13px;
    background-color: #f7f8fa;
    border-radius: 8px;
}

.collection-information-grid span {
    display: block;
    margin-bottom: 5px;
    color: #777777;
    font-size: 17px;
}

.collection-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 17px;
}

.collection-card-actions a {
    color: #1769aa;
    font-weight: bold;
    text-decoration: none;
}

.collection-empty {
    padding: 28px;
    background-color: #ffffff;
    border: 1px dashed #cccccc;
    border-radius: 11px;
    color: #777777;
    text-align: center;
}

/* 儀表板快捷入口 */

.dashboard-quick-actions {
    margin: 30px 0;
}

.dashboard-quick-action-grid {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.dashboard-quick-action-card {
    display: flex;
    flex-direction: column;
    min-height: 150px;
    padding: 20px;
    background-color: #ffffff;
    border: 1px solid #e1e4e8;
    border-radius: 12px;
    color: #222222;
    text-decoration: none;
}

.dashboard-quick-action-card strong {
    margin-bottom: 8px;
    font-size: 19px;
}

.dashboard-quick-action-card span {
    flex-grow: 1;
    color: #666666;
    line-height: 1.7;
}

.dashboard-quick-action-card small {
    margin-top: 15px;
    color: #1769aa;
    font-weight: bold;
}

.dashboard-quick-action-card:hover {
    transform: translateY(-2px);
    box-shadow:
        0 8px 22px rgba(0, 0, 0, 0.07);
}

@media (max-width: 850px) {
    .collection-date-summary {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .dashboard-quick-action-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 620px) {
    .collection-container {
        width: min(100% - 20px, 1180px);
        padding-top: 25px;
    }

    .collection-heading {
        flex-direction: column;
    }

    .collection-date-summary {
        grid-template-columns: 1fr;
    }

    .collection-card {
        grid-template-columns: 1fr;
    }

    .collection-card-header {
        flex-direction: column;
    }

    .collection-information-grid {
        grid-template-columns: 1fr;
    }

    .collection-filter-card form {
        align-items: stretch;
        flex-direction: column;
    }

    .collection-filter-card .form-group {
        min-width: 0;
    }
}

/* =========================
   儀表板收運與審核統計
========================= */

.dashboard-stat-link {
    display: inline-block;
    margin-top: 12px;
    color: #1769aa;
    font-size: 17px;
    font-weight: bold;
    text-decoration: none;
}

.dashboard-stat-link:hover {
    text-decoration: underline;
}

.collection-stat-card {
    border-left: 5px solid #24599c;
}

.review-stat-card {
    border-left: 5px solid #d69b00;
}

/* =========================
   管理員訂閱詳細頁
========================= */

.subscription-table-actions,
.admin-subscription-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.admin-subscription-actions {
    margin-top: 18px;
}

.table-view-button {
    display: inline-block;
    padding: 7px 12px;
    background-color: #eaf2ff;
    border-radius: 6px;
    color: #24599c;
    font-size: 17px;
    font-weight: bold;
    text-decoration: none;
}

.table-view-button:hover {
    background-color: #dce9fb;
}

@media (max-width: 650px) {
    .subscription-table-actions,
    .admin-subscription-actions {
        flex-direction: column;
    }
}

/* =========================
   會員訂閱到期提醒
========================= */

.subscription-expiry-alert {
    margin-bottom: 22px;
    padding: 18px 20px;
    border: 1px solid;
    border-radius: 12px;
}

.subscription-expiry-alert.warning {
    background-color: #fff8e1;
    border-color: #e9d186;
    color: #795d00;
}

.subscription-expiry-alert.danger {
    background-color: #fff0f0;
    border-color: #e6a7a7;
    color: #962f2f;
}

.subscription-expiry-alert.expired {
    background-color: #f2f2f2;
    border-color: #cccccc;
    color: #555555;
}

.subscription-expiry-alert-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.subscription-expiry-alert strong {
    display: block;
    margin-bottom: 5px;
    font-size: 18px;
}

.subscription-expiry-alert p {
    margin: 0 0 5px;
    line-height: 1.7;
}

.subscription-expiry-alert small {
    display: block;
    opacity: 0.85;
}

.subscription-expiry-action {
    display: inline-block;
    flex-shrink: 0;
    padding: 10px 18px;
    background-color: #222222;
    border-radius: 7px;
    color: #ffffff;
    font-weight: bold;
    text-decoration: none;
}

.subscription-expiry-action:hover {
    background-color: #444444;
}

@media (max-width: 650px) {
    .subscription-expiry-alert-content {
        align-items: flex-start;
        flex-direction: column;
    }

    .subscription-expiry-action {
        width: 100%;
        text-align: center;
    }
}

/* =========================
   管理員訂閱到期提醒
========================= */

.expiry-stat-card {
    border-left: 5px solid #c95454;
}

.dashboard-expiry-section {
    margin: 30px 0;
    padding: 24px;
    background-color: #ffffff;
    border: 1px solid #e1e4e8;
    border-radius: 14px;
    box-shadow:
        0 7px 22px rgba(0, 0, 0, 0.05);
}

.dashboard-expiry-description {
    margin: 6px 0 0;
    color: #777777;
}

.dashboard-expiry-total {
    display: inline-block;
    padding: 6px 12px;
    background-color: #edf3ff;
    border-radius: 999px;
    color: #24599c;
    font-size: 17px;
    font-weight: bold;
}

.dashboard-expiry-groups {
    display: grid;
    gap: 20px;
    margin-top: 22px;
}

.dashboard-expiry-group {
    overflow: hidden;
    border: 1px solid #e1e4e8;
    border-radius: 11px;
}

.dashboard-expiry-group-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 15px 18px;
}

.dashboard-expiry-group-heading strong {
    display: block;
    margin-bottom: 4px;
    font-size: 18px;
}

.dashboard-expiry-group-heading span {
    font-size: 17px;
}

.expiry-today .dashboard-expiry-group-heading {
    background-color: #fff0f0;
    color: #9d3030;
}

.expiry-soon .dashboard-expiry-group-heading {
    background-color: #fff5e3;
    color: #8a5a00;
}

.expiry-warning .dashboard-expiry-group-heading {
    background-color: #fffbe8;
    color: #766000;
}

.dashboard-expiry-list {
    display: grid;
}

.dashboard-expiry-item {
    display: grid;
    grid-template-columns:
        minmax(180px, 1fr)
        minmax(130px, auto)
        minmax(100px, auto)
        auto;
    align-items: center;
    gap: 18px;
    padding: 16px 18px;
    border-top: 1px solid #eeeeee;
}

.dashboard-expiry-item:first-child {
    border-top: 0;
}

.dashboard-expiry-member strong,
.dashboard-expiry-date strong,
.dashboard-expiry-contact strong {
    display: block;
    margin-bottom: 4px;
}

.dashboard-expiry-member span,
.dashboard-expiry-member small,
.dashboard-expiry-date span,
.dashboard-expiry-contact span {
    display: block;
    color: #777777;
    line-height: 1.5;
}

.dashboard-expiry-contact span {
    margin-bottom: 3px;
    font-size: 16px;
}

.dashboard-expiry-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.dashboard-expiry-actions a {
    display: inline-block;
    padding: 7px 10px;
    background-color: #eef3f8;
    border-radius: 6px;
    color: #1769aa;
    font-size: 17px;
    font-weight: bold;
    text-decoration: none;
}

.dashboard-expiry-actions a:hover {
    background-color: #dfeaf4;
}

@media (max-width: 900px) {
    .dashboard-expiry-item {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .dashboard-expiry-actions {
        justify-content: flex-start;
    }
}

@media (max-width: 650px) {
    .dashboard-expiry-section {
        padding: 18px;
    }

    .dashboard-expiry-item {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .dashboard-expiry-group-heading {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* =========================
   管理員收運月曆
========================= */

.collection-calendar-card {
    margin-bottom: 25px;
    padding: 22px;
    background-color: #ffffff;
    border: 1px solid #e1e4e8;
    border-radius: 14px;
    box-shadow:
        0 7px 22px rgba(0, 0, 0, 0.05);
}

.collection-calendar-header {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
    text-align: center;
}

.collection-calendar-header h2 {
    margin: 4px 0 0;
    font-size: 25px;
}

.calendar-navigation-button {
    display: inline-block;
    padding: 9px 14px;
    background-color: #eef2f6;
    border-radius: 7px;
    color: #333333;
    font-size: 17px;
    font-weight: bold;
    text-decoration: none;
}

.calendar-navigation-button:hover {
    background-color: #dfe6ed;
}

.collection-calendar-weekdays,
.collection-calendar-grid {
    display: grid;
    grid-template-columns:
        repeat(7, minmax(0, 1fr));
}

.collection-calendar-weekdays {
    border-top: 1px solid #e3e5e8;
    border-left: 1px solid #e3e5e8;
}

.collection-calendar-weekdays div {
    padding: 11px 5px;
    background-color: #f4f6f8;
    border-right: 1px solid #e3e5e8;
    border-bottom: 1px solid #e3e5e8;
    color: #666666;
    font-size: 17px;
    font-weight: bold;
    text-align: center;
}

.collection-calendar-grid {
    border-left: 1px solid #e3e5e8;
}

.collection-calendar-empty-cell,
.collection-calendar-day {
    min-height: 112px;
    border-right: 1px solid #e3e5e8;
    border-bottom: 1px solid #e3e5e8;
}

.collection-calendar-empty-cell {
    background-color: #fafafa;
}

.collection-calendar-day {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 9px;
    background-color: #ffffff;
    color: #333333;
    text-decoration: none;
    transition:
        background-color 0.15s ease,
        box-shadow 0.15s ease;
}

.collection-calendar-day:hover {
    z-index: 1;
    background-color: #f3f7fb;
    box-shadow:
        inset 0 0 0 2px #b8cee2;
}

.collection-calendar-day.is-selected {
    z-index: 2;
    background-color: #edf5ff;
    box-shadow:
        inset 0 0 0 2px #3978ad;
}

.collection-calendar-day.is-today
.calendar-day-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 27px;
    height: 27px;
    background-color: #222222;
    border-radius: 50%;
    color: #ffffff;
}

.calendar-day-number {
    width: fit-content;
    font-size: 18px;
    font-weight: bold;
}

.calendar-today-label {
    position: absolute;
    top: 11px;
    right: 9px;
    color: #3978ad;
    font-size: 15px;
    font-weight: bold;
}

.calendar-day-counts {
    display: grid;
    gap: 5px;
    margin-top: auto;
    padding-top: 10px;
}

.calendar-day-counts span {
    display: block;
    padding: 4px 6px;
    border-radius: 5px;
    font-size: 15px;
    font-weight: bold;
}

.calendar-morning-count {
    background-color: #fff3cd;
    color: #806000;
}

.calendar-evening-count {
    background-color: #e8edff;
    color: #3a4e91;
}

.calendar-other-count {
    background-color: #eeeeee;
    color: #666666;
}

.collection-calendar-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-top: 18px;
}

.calendar-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    color: #666666;
    font-size: 17px;
}

.calendar-legend span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.calendar-legend i {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 3px;
}

.calendar-legend-morning {
    background-color: #f4ce58;
}

.calendar-legend-evening {
    background-color: #8194dc;
}

@media (max-width: 800px) {
    .collection-calendar-card {
        overflow-x: auto;
    }

    .collection-calendar-weekdays,
    .collection-calendar-grid {
        min-width: 720px;
    }
}

@media (max-width: 600px) {
    .collection-calendar-card {
        padding: 14px;
    }

    .collection-calendar-header {
        grid-template-columns: 1fr;
    }

    .calendar-navigation-button {
        width: 100%;
        text-align: center;
    }

    .collection-calendar-footer {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* =========================
   收運狀態操作
========================= */

.collection-card-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.collection-status-pending,
.collection-status-completed,
.collection-status-missed,
.collection-status-cancelled {
    display: inline-block;
    padding: 5px 10px;
    border-radius: 999px;
    font-size: 17px;
    font-weight: bold;
}

.collection-status-pending {
    background-color: #fff4d6;
    color: #8d6500;
}

.collection-status-completed {
    background-color: #e7f7eb;
    color: #26723b;
}

.collection-status-missed {
    background-color: #fff0f0;
    color: #9b3434;
}

.collection-status-cancelled {
    background-color: #eeeeee;
    color: #666666;
}

.collection-status-form {
    margin-top: 20px;
    padding: 16px;
    background-color: #f7f8fa;
    border: 1px solid #e2e5e9;
    border-radius: 10px;
}

.collection-status-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 12px;
}

.collection-status-actions button {
    padding: 9px 13px;
    border: 0;
    border-radius: 7px;
    color: #ffffff;
    font-weight: bold;
    cursor: pointer;
}

.collection-complete-button {
    background-color: #2d7d46;
}

.collection-missed-button {
    background-color: #b34747;
}

.collection-cancel-button {
    background-color: #666666;
}

.collection-pending-button {
    background-color: #af7a00;
}

.collection-completed-information,
.collection-result-information {
    margin-top: 16px;
    padding: 14px;
    border-radius: 9px;
}

.collection-completed-information {
    background-color: #edf8f0;
    border: 1px solid #b8dec1;
    color: #2d663c;
}

.collection-result-information {
    background-color: #fff4f4;
    border: 1px solid #e2bcbc;
    color: #843b3b;
}

.collection-completed-information span,
.collection-result-information p {
    display: block;
    margin-top: 5px;
}

@media (max-width: 650px) {
    .collection-card-badges {
        justify-content: flex-start;
    }

    .collection-status-actions {
        flex-direction: column;
    }

    .collection-status-actions button {
        width: 100%;
    }
}

/* =========================
   會員收運歷史紀錄
========================= */

.collection-history-container {
    width: min(1100px, calc(100% - 30px));
    margin: 0 auto;
    padding: 40px 0 60px;
}

.collection-history-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 24px;
}

.collection-history-heading h1 {
    margin: 5px 0 8px;
}

.collection-history-heading p {
    margin: 0;
    color: #666666;
}

.collection-history-stats {
    display: grid;
    grid-template-columns:
        repeat(5, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 22px;
}

.collection-history-stats article {
    padding: 18px;
    background-color: #ffffff;
    border: 1px solid #e1e4e8;
    border-radius: 11px;
}

.collection-history-stats span {
    display: block;
    margin-bottom: 6px;
    color: #777777;
    font-size: 17px;
}

.collection-history-stats strong {
    font-size: 23px;
}

.collection-history-filter {
    margin-bottom: 24px;
    padding: 18px;
    background-color: #ffffff;
    border: 1px solid #e1e4e8;
    border-radius: 11px;
}

.collection-history-filter form {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 12px;
}

.collection-history-filter label {
    width: 100%;
    font-weight: bold;
}

.collection-history-filter select,
.collection-history-filter button {
    min-height: 42px;
    padding: 9px 13px;
    border-radius: 7px;
}

.collection-history-filter select {
    min-width: 190px;
    border: 1px solid #cccccc;
    background-color: #ffffff;
}

.collection-history-filter button {
    border: 0;
    background-color: #222222;
    color: #ffffff;
    font-weight: bold;
    cursor: pointer;
}

.collection-history-list {
    display: grid;
    gap: 18px;
}

.collection-history-card {
    padding: 21px;
    background-color: #ffffff;
    border: 1px solid #e1e4e8;
    border-radius: 13px;
    box-shadow:
        0 6px 20px rgba(0, 0, 0, 0.04);
}

.collection-history-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}

.collection-history-card-header h2 {
    margin: 5px 0;
}

.collection-history-card-header p {
    margin: 0;
    color: #666666;
}

.collection-history-number {
    color: #777777;
    font-size: 17px;
}

.collection-history-status-completed,
.collection-history-status-missed,
.collection-history-status-cancelled,
.collection-history-status-pending {
    display: inline-block;
    padding: 6px 11px;
    border-radius: 999px;
    font-size: 17px;
    font-weight: bold;
}

.collection-history-status-completed {
    background-color: #e7f7eb;
    color: #26723b;
}

.collection-history-status-missed {
    background-color: #fff0f0;
    color: #9b3434;
}

.collection-history-status-cancelled {
    background-color: #eeeeee;
    color: #666666;
}

.collection-history-status-pending {
    background-color: #fff4d6;
    color: #8d6500;
}

.collection-history-details {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 18px;
}

.collection-history-details div {
    padding: 13px;
    background-color: #f7f8fa;
    border-radius: 8px;
}

.collection-history-details span {
    display: block;
    margin-bottom: 5px;
    color: #777777;
    font-size: 17px;
}

.collection-history-note {
    margin-top: 16px;
    padding: 14px;
    background-color: #f4f7fa;
    border-radius: 9px;
}

.collection-history-note span {
    display: block;
    margin-bottom: 5px;
    color: #777777;
    font-size: 17px;
}

.collection-history-note p {
    margin: 0;
    line-height: 1.7;
}

.collection-history-empty {
    padding: 38px 24px;
    background-color: #ffffff;
    border: 1px solid #e1e4e8;
    border-radius: 13px;
    text-align: center;
}

.collection-history-empty > div {
    margin-bottom: 12px;
    font-size: 34px;
}

@media (max-width: 850px) {
    .collection-history-stats {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .collection-history-details {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .collection-history-container {
        width: min(100% - 20px, 1100px);
        padding-top: 25px;
    }

    .collection-history-heading {
        flex-direction: column;
    }

    .collection-history-stats,
    .collection-history-details {
        grid-template-columns: 1fr;
    }

    .collection-history-card-header {
        flex-direction: column;
    }

    .collection-history-filter form {
        align-items: stretch;
        flex-direction: column;
    }

    .collection-history-filter select,
    .collection-history-filter button {
        width: 100%;
    }
}

/* 新會員加入好禮 */

.new-member-reward-notice {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 18px 0;
    padding: 15px 16px;
    border: 1px solid #ead79c;
    border-radius: 10px;
    background-color: #fff9e8;
}

.new-member-reward-notice strong {
    color: #805d00;
}

.new-member-reward-notice span {
    color: #6d5b2d;
    line-height: 1.6;
}

/* =========================
   會員中心：消失垃幣
========================= */

.member-coin-section {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin-bottom: 24px;
}

.member-coin-balance-card,
.member-reward-card,
.member-coin-recent-card {
    padding: 22px;
    background-color: #ffffff;
    border: 1px solid #e1e4e8;
    border-radius: 14px;
    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.04);
}

.member-coin-balance-card {
    position: relative;
    overflow: hidden;
}

.member-coin-balance-card h2,
.member-reward-card h2,
.member-coin-recent-card h2 {
    margin: 5px 0 8px;
}

.member-coin-balance-card p {
    margin: 0;
    color: #666666;
    line-height: 1.7;
}

.member-coin-balance {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 22px;
}

.member-coin-balance span {
    width: 100%;
    color: #777777;
    font-size: 17px;
}

.member-coin-balance strong {
    font-size: 42px;
    line-height: 1;
}

.member-coin-balance small {
    color: #777777;
}

.member-coin-detail-link {
    display: inline-block;
    margin-top: 20px;
    font-weight: bold;
    text-decoration: none;
}

.member-reward-card-heading,
.member-coin-recent-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.member-reward-name {
    display: block;
    margin-top: 20px;
    font-size: 20px;
}

.member-reward-details {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 16px;
}

.member-reward-details div {
    padding: 13px;
    background-color: #f7f8fa;
    border-radius: 9px;
}

.member-reward-details span {
    display: block;
    margin-bottom: 5px;
    color: #777777;
    font-size: 17px;
}

.member-reward-status-available,
.member-reward-status-used,
.member-reward-status-expired,
.member-reward-status-cancelled {
    display: inline-block;
    padding: 6px 11px;
    border-radius: 999px;
    font-size: 17px;
    font-weight: bold;
}

.member-reward-status-available {
    background-color: #e7f7eb;
    color: #26723b;
}

.member-reward-status-used {
    background-color: #eeeeee;
    color: #666666;
}

.member-reward-status-expired {
    background-color: #fff0f0;
    color: #9b3434;
}

.member-reward-status-cancelled {
    background-color: #f2f2f2;
    color: #777777;
}

.member-reward-empty,
.member-coin-empty {
    margin: 18px 0 0;
    color: #777777;
}

.member-coin-recent-card {
    grid-column: 1 / -1;
}

.member-coin-recent-heading a {
    font-weight: bold;
    text-decoration: none;
}

.member-coin-recent-list {
    display: grid;
    gap: 10px;
    margin-top: 18px;
}

.member-coin-recent-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 13px 14px;
    background-color: #f7f8fa;
    border-radius: 9px;
}

.member-coin-recent-item div {
    min-width: 0;
}

.member-coin-recent-item div strong,
.member-coin-recent-item div span {
    display: block;
}

.member-coin-recent-item div span {
    margin-top: 5px;
    color: #777777;
    font-size: 17px;
}

.coin-amount-positive {
    color: #26723b;
    font-size: 18px;
}

.coin-amount-negative {
    color: #9b3434;
    font-size: 18px;
}

.coin-action-link {
    background-color: #fff9e8;
}

@media (max-width: 800px) {
    .member-coin-section {
        grid-template-columns: 1fr;
    }

    .member-coin-recent-card {
        grid-column: auto;
    }

    .member-reward-details {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 550px) {
    .member-reward-card-heading,
    .member-coin-recent-heading,
    .member-coin-recent-item {
        align-items: flex-start;
        flex-direction: column;
    }

    .member-coin-balance strong {
        font-size: 34px;
    }
}

/* =========================
   我的消失垃幣
========================= */

.coin-page-container {
    width: min(1100px, calc(100% - 30px));
    margin: 0 auto;
    padding: 40px 0 60px;
}

.coin-page-heading {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 24px;
}

.coin-page-heading h1 {
    margin: 5px 0 8px;
}

.coin-page-heading p {
    margin: 0;
    color: #666666;
}

.coin-balance-hero {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 20px;
    padding: 26px;
    margin-bottom: 18px;
    background-color: #fff9e8;
    border: 1px solid #ead79c;
    border-radius: 15px;
}

.coin-balance-hero span,
.coin-balance-hero small {
    display: block;
    color: #725d25;
}

.coin-balance-hero strong {
    display: block;
    margin: 8px 0;
    font-size: 48px;
    line-height: 1;
}

.coin-balance-hero p {
    margin: 0;
    color: #6d5b2d;
}

.coin-stat-grid {
    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 20px;
}

.coin-stat-grid article {
    padding: 18px;
    background-color: #ffffff;
    border: 1px solid #e1e4e8;
    border-radius: 11px;
}

.coin-stat-grid span {
    display: block;
    margin-bottom: 8px;
    color: #777777;
    font-size: 17px;
}

.coin-stat-grid strong {
    font-size: 22px;
}

.coin-reward-summary,
.coin-history-panel,
.coin-rules-card {
    padding: 22px;
    margin-bottom: 20px;
    background-color: #ffffff;
    border: 1px solid #e1e4e8;
    border-radius: 14px;
}

.coin-reward-summary h2,
.coin-history-panel h2,
.coin-rules-card h2 {
    margin: 5px 0 0;
}

.coin-reward-summary-grid,
.coin-rules-grid {
    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-top: 18px;
}

.coin-reward-summary-grid div,
.coin-rules-grid div {
    padding: 14px;
    background-color: #f7f8fa;
    border-radius: 9px;
}

.coin-reward-summary-grid span,
.coin-rules-grid span {
    display: block;
    margin-bottom: 6px;
    color: #777777;
    font-size: 17px;
}

.coin-history-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 18px;
}

.coin-filter-form {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.coin-filter-form select,
.coin-filter-form button {
    min-height: 40px;
    padding: 8px 12px;
    border-radius: 7px;
}

.coin-filter-form select {
    border: 1px solid #cccccc;
    background-color: #ffffff;
}

.coin-filter-form button {
    border: 0;
    background-color: #222222;
    color: #ffffff;
    cursor: pointer;
}

.coin-history-list {
    display: grid;
    gap: 12px;
    margin-top: 20px;
}

.coin-history-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    padding: 15px;
    background-color: #f7f8fa;
    border-radius: 10px;
}

.coin-history-main {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.coin-history-main h3 {
    margin: 0 0 5px;
    font-size: 17px;
}

.coin-history-main p,
.coin-history-main small {
    display: block;
    margin: 3px 0 0;
    color: #777777;
    font-size: 17px;
}

.coin-type-new-member,
.coin-type-referral,
.coin-type-collection,
.coin-type-subscription,
.coin-type-spend,
.coin-type-refund,
.coin-type-other {
    display: inline-block;
    flex-shrink: 0;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 16px;
    font-weight: bold;
}

.coin-type-new-member,
.coin-type-referral,
.coin-type-subscription {
    background-color: #fff1c7;
    color: #805d00;
}

.coin-type-collection {
    background-color: #e7f7eb;
    color: #26723b;
}

.coin-type-spend {
    background-color: #fff0f0;
    color: #9b3434;
}

.coin-type-refund {
    background-color: #e9f0ff;
    color: #315c9e;
}

.coin-type-other {
    background-color: #eeeeee;
    color: #666666;
}

.coin-history-positive {
    color: #26723b;
    font-size: 20px;
}

.coin-history-negative {
    color: #9b3434;
    font-size: 20px;
}

.coin-empty-message {
    margin: 18px 0 0;
    padding: 22px;
    background-color: #f7f8fa;
    border-radius: 9px;
    color: #777777;
    text-align: center;
}

@media (max-width: 850px) {
    .coin-stat-grid,
    .coin-reward-summary-grid,
    .coin-rules-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .coin-history-header {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (max-width: 600px) {
    .coin-page-container {
        width: min(100% - 20px, 1100px);
        padding-top: 25px;
    }

    .coin-page-heading,
    .coin-balance-hero,
    .coin-history-item,
    .coin-history-main {
        align-items: flex-start;
        flex-direction: column;
    }

    .coin-stat-grid,
    .coin-reward-summary-grid,
    .coin-rules-grid {
        grid-template-columns: 1fr;
    }

    .coin-filter-form,
    .coin-filter-form select,
    .coin-filter-form button {
        width: 100%;
    }

    .coin-balance-hero strong {
        font-size: 38px;
    }
}

/* =========================
   管理員：消失垃幣管理
========================= */

.coin-admin-button,
.table-coin-button {
    border-color: #f3d98b;
    background: #fff9e8;
    color: #805d00;
}

.table-coin-button {
    display: inline-block;
    padding: 7px 12px;
    border: 1px solid #f3d98b;
    border-radius: 8px;
    font-size: 17px;
    font-weight: bold;
    text-decoration: none;
}

.table-coin-button:hover,
.coin-admin-button:hover {
    background: #fff1c7;
}

.admin-member-coin-table {
    min-width: 1200px;
}

.admin-coin-balance {
    color: #805d00;
    font-size: 17px;
}

.coin-not-applicable {
    color: #94a3b8;
    font-size: 17px;
}

.partner-badge,
.subscriber-badge {
    display: inline-block;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 16px;
    font-weight: bold;
}

.partner-badge {
    background: #e0f2fe;
    color: #0369a1;
}

.subscriber-badge {
    background: #fef3c7;
    color: #b45309;
}

.admin-coin-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    gap: 22px;
}

.admin-coin-form-panel h2,
.admin-coin-history-panel h2 {
    margin: 5px 0 22px;
}

.admin-coin-message {
    max-width: none;
    margin-bottom: 20px;
}

.admin-selected-member {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 20px;
}

.admin-selected-member div {
    padding: 14px;
    background: #fff9e8;
    border: 1px solid #f3d98b;
    border-radius: 10px;
}

.admin-selected-member span,
.admin-selected-member strong {
    display: block;
}

.admin-selected-member span {
    margin-bottom: 6px;
    color: #806f3b;
    font-size: 17px;
}

.admin-coin-history-list {
    display: grid;
    gap: 11px;
}

.admin-coin-history-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    padding: 14px;
    background: #f8fafc;
    border-radius: 10px;
}

.admin-coin-history-item div strong,
.admin-coin-history-item div span,
.admin-coin-history-item div small {
    display: block;
}

.admin-coin-history-item div span {
    margin-top: 5px;
    color: #475569;
}

.admin-coin-history-item div small {
    margin-top: 6px;
    color: #94a3b8;
}

.admin-coin-gift-amount {
    color: #15803d;
    font-size: 20px;
}

@media (max-width: 850px) {
    .admin-coin-layout {
        grid-template-columns: 1fr;
    }

    .admin-selected-member {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .admin-coin-history-item {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* =========================
   訂閱：消失垃幣折抵
========================= */

.subscription-coin-discount {
    margin-top: 24px;
    padding: 22px;
    border: 1px solid #ead79c;
    border-radius: 14px;
    background: #fff9e8;
}

.subscription-coin-heading {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 18px;
}

.subscription-coin-heading h2 {
    margin: 5px 0 0;
}

.subscription-coin-balance {
    padding: 12px 15px;
    border-radius: 10px;
    background: #ffffff;
    text-align: right;
}

.subscription-coin-balance span,
.subscription-coin-balance strong {
    display: block;
}

.subscription-coin-balance span {
    margin-bottom: 4px;
    color: #806f3b;
    font-size: 17px;
}

.subscription-coin-note {
    margin: 18px 0;
    color: #6d5b2d;
}

.coin-quick-actions {
    display: flex;
    gap: 8px;
    margin-top: 9px;
}

.coin-quick-actions button {
    padding: 8px 12px;
    border: 1px solid #d9c170;
    border-radius: 8px;
    background: #ffffff;
    color: #725d25;
    cursor: pointer;
}

.coin-quick-actions button:hover {
    background: #fff1c7;
}

.subscription-payment-breakdown {
    display: grid;
    gap: 10px;
    margin: 20px 0;
}

.subscription-payment-breakdown > div {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    padding: 12px 14px;
    background: #ffffff;
    border-radius: 9px;
}

.subscription-payment-breakdown span {
    color: #666666;
}

.subscription-payment-breakdown .discount-value {
    color: #9b3434;
}

.subscription-payment-breakdown .payment-total-row {
    border: 1px solid #ead79c;
    background: #fff6d8;
}

.subscription-payment-breakdown .payment-total-row strong {
    color: #805d00;
    font-size: 20px;
}

@media (max-width: 600px) {
    .subscription-coin-heading {
        flex-direction: column;
    }

    .subscription-coin-balance {
        width: 100%;
        text-align: left;
    }

    .coin-quick-actions {
        flex-direction: column;
    }
}

.transfer-discount-amount {
    color: #9b3434;
}

.transfer-fully-paid-box {
    margin-top: 20px;
    padding: 20px;
    border: 1px solid #b7dfc1;
    border-radius: 12px;
    background: #edf9f0;
}

.transfer-fully-paid-box strong {
    display: block;
    margin-bottom: 8px;
    color: #26723b;
    font-size: 18px;
}

.transfer-fully-paid-box p {
    margin: 0;
    color: #45684e;
    line-height: 1.7;
}

.transfer-notice strong {
    display: block;
    margin-bottom: 8px;
    font-size: 18px;
}

/* =========================
   管理員訂單：消失垃幣折抵
========================= */

.admin-payment-summary-card {
    display: grid;
    grid-template-columns:
        repeat(5, minmax(0, 1fr));
    gap: 12px;
    margin: 22px 0;
    padding: 20px;
    border: 1px solid #ead79c;
    border-radius: 14px;
    background: #fff9e8;
}

.admin-payment-summary-card > div {
    padding: 13px;
    border-radius: 9px;
    background: #ffffff;
}

.admin-payment-summary-card span,
.admin-payment-summary-card strong {
    display: block;
}

.admin-payment-summary-card span {
    margin-bottom: 6px;
    color: #806f3b;
    font-size: 17px;
}

.admin-payment-summary-card strong {
    font-size: 18px;
}

.admin-payment-summary-card .admin-payable-highlight {
    border: 1px solid #e0bd50;
    background: #fff2bd;
}

.admin-payment-summary-card
.admin-payable-highlight strong {
    color: #805d00;
    font-size: 21px;
}

.admin-discount-value {
    color: #9b3434;
}

.admin-full-coin-payment {
    margin-top: 18px;
    padding: 18px;
    border: 1px solid #b7dfc1;
    border-radius: 11px;
    background: #edf9f0;
}

.admin-full-coin-payment strong {
    display: block;
    margin-bottom: 7px;
    color: #26723b;
    font-size: 18px;
}

.admin-full-coin-payment p {
    margin: 0;
    color: #45684e;
    line-height: 1.7;
}

.admin-review-amount-warning {
    margin-bottom: 18px;
    padding: 16px;
    border: 1px solid #f0cd73;
    border-radius: 10px;
    background: #fff8df;
}

.admin-review-amount-warning span,
.admin-review-amount-warning strong,
.admin-review-amount-warning small {
    display: block;
}

.admin-review-amount-warning span {
    margin-bottom: 6px;
    color: #806f3b;
    font-size: 17px;
}

.admin-review-amount-warning strong {
    color: #805d00;
    font-size: 24px;
}

.admin-review-amount-warning small {
    margin-top: 7px;
    color: #8a6f29;
    line-height: 1.6;
}

@media (max-width: 950px) {
    .admin-payment-summary-card {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 550px) {
    .admin-payment-summary-card {
        grid-template-columns: 1fr;
    }
}

/* =========================
   管理員訂單列表：折抵金額
========================= */

.order-coin-table {
    min-width: 1450px;
}

.order-amount-summary {
    display: grid;
    gap: 4px;
    min-width: 120px;
}

.order-amount-summary span {
    color: #64748b;
    font-size: 16px;
}

.order-amount-summary .order-coin-discount {
    color: #9b3434;
}

.order-amount-summary strong {
    color: #805d00;
    font-size: 18px;
}

.payment-method-coin,
.payment-method-mixed,
.payment-method-bank {
    display: inline-block;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 16px;
    font-weight: bold;
    white-space: nowrap;
}

.payment-method-coin {
    background: #fff1c7;
    color: #805d00;
}

.payment-method-mixed {
    background: #e9f0ff;
    color: #315c9e;
}

.payment-method-bank {
    background: #f1f5f9;
    color: #475569;
}

/* =========================
   會員訂單列表：消失垃幣折抵
========================= */

.order-card-with-coin {
    overflow: hidden;
}

.member-order-payment-summary {
    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin: 18px 0;
    padding: 14px;
    border: 1px solid #ead79c;
    border-radius: 12px;
    background: #fff9e8;
}

.member-order-payment-summary > div {
    padding: 12px;
    border-radius: 9px;
    background: #ffffff;
}

.member-order-payment-summary span,
.member-order-payment-summary strong {
    display: block;
}

.member-order-payment-summary span {
    margin-bottom: 6px;
    color: #806f3b;
    font-size: 17px;
}

.member-order-payment-summary strong {
    font-size: 17px;
}

.member-order-discount {
    color: #9b3434;
}

.member-order-payment-summary
.member-order-payable {
    border: 1px solid #e0bd50;
    background: #fff2bd;
}

.member-order-payment-summary
.member-order-payable strong {
    color: #805d00;
    font-size: 20px;
}

.full-coin-paid-note {
    display: inline-flex;
    align-items: center;
    padding: 9px 13px;
    border: 1px solid #b7dfc1;
    border-radius: 9px;
    background: #edf9f0;
    color: #26723b;
    font-size: 17px;
    font-weight: bold;
}

@media (max-width: 750px) {
    .member-order-payment-summary {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 500px) {
    .member-order-payment-summary {
        grid-template-columns: 1fr;
    }
}

/* =========================
   註冊頁：推薦碼
========================= */

.referral-code-group {
    padding: 16px;
    border: 1px solid #dbe7f3;
    border-radius: 12px;
    background: #f8fbff;
}

.referral-code-group label {
    display: flex;
    align-items: center;
    gap: 8px;
}

.optional-label {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 999px;
    background: #e8eef5;
    color: #64748b;
    font-size: 16px;
    font-weight: normal;
}

.referral-code-input {
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: bold;
}

/* =========================
   我的推薦
========================= */

.referral-container {
    width: min(1100px, calc(100% - 32px));
    margin: 0 auto;
    padding: 32px 0 60px;
}

.referral-heading {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    align-items: flex-start;
    margin-bottom: 24px;
}

.referral-heading h1 {
    margin: 4px 0 8px;
}

.referral-heading p {
    margin: 0;
    line-height: 1.7;
}

.referral-share-card,
.referral-list-card {
    padding: 24px;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06);
}

.referral-share-heading,
.referral-list-heading {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 20px;
}

.referral-share-heading h2,
.referral-list-heading h2 {
    margin: 4px 0 0;
}

.referral-reward-badge {
    display: inline-flex;
    padding: 8px 12px;
    border-radius: 999px;
    background: #fff2bd;
    color: #805d00;
    font-size: 17px;
    font-weight: bold;
    white-space: nowrap;
}

.referral-code-box,
.referral-link-box {
    margin-top: 16px;
    padding: 16px;
    border: 1px solid #dbe7f3;
    border-radius: 12px;
    background: #f8fbff;
}

.referral-code-box > span,
.referral-link-box > span {
    display: block;
    margin-bottom: 8px;
    color: #64748b;
    font-size: 17px;
}

.referral-copy-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.referral-code-box strong {
    flex: 1;
    font-size: 24px;
    letter-spacing: 2px;
    word-break: break-all;
}

.referral-link-box input {
    flex: 1;
    min-width: 0;
}

.referral-rules {
    margin-top: 18px;
    padding: 16px;
    border-radius: 12px;
    background: #fff9e8;
}

.referral-rules strong {
    display: block;
    margin-bottom: 6px;
    color: #805d00;
}

.referral-rules p {
    margin: 0;
    color: #6f5b24;
    line-height: 1.7;
}

.referral-stat-grid {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin: 22px 0;
}

.referral-stat-card {
    padding: 20px;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    background: #ffffff;
}

.referral-stat-card span,
.referral-stat-card strong,
.referral-stat-card small {
    display: block;
}

.referral-stat-card span {
    color: #64748b;
    font-size: 17px;
}

.referral-stat-card strong {
    margin: 8px 0;
    font-size: 28px;
}

.referral-stat-card small {
    color: #94a3b8;
}

.referral-member-list {
    display: grid;
    gap: 14px;
}

.referral-member-card {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    padding: 18px;
    border: 1px solid #e2e8f0;
    border-radius: 13px;
    background: #f8fafc;
}

.referral-member-main {
    display: flex;
    gap: 13px;
    min-width: 0;
}

.referral-member-avatar {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    border-radius: 50%;
    background: #e8eef5;
    font-size: 20px;
    font-weight: bold;
}

.referral-member-main h3 {
    margin: 0 0 4px;
}

.referral-member-main p {
    margin: 0 0 5px;
    word-break: break-all;
}

.referral-member-main small {
    color: #64748b;
}

.referral-member-status {
    display: grid;
    justify-items: end;
    align-content: center;
    gap: 6px;
    text-align: right;
}

.referral-status-success,
.referral-status-waiting {
    display: inline-flex;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 16px;
    font-weight: bold;
}

.referral-status-success {
    background: #edf9f0;
    color: #26723b;
}

.referral-status-waiting {
    background: #fff8df;
    color: #8a6f29;
}

.referral-member-status small {
    max-width: 240px;
    color: #64748b;
    line-height: 1.5;
}

.referral-empty {
    padding: 45px 20px;
    text-align: center;
}

.referral-empty-icon {
    margin-bottom: 12px;
    font-size: 36px;
}

.referral-empty p {
    max-width: 480px;
    margin: 8px auto 0;
    line-height: 1.7;
}

@media (max-width: 760px) {
    .referral-heading,
    .referral-share-heading,
    .referral-list-heading,
    .referral-member-card {
        flex-direction: column;
    }

    .referral-stat-grid {
        grid-template-columns: 1fr;
    }

    .referral-copy-row {
        align-items: stretch;
        flex-direction: column;
    }

    .referral-member-status {
        justify-items: start;
        text-align: left;
    }
}

/* =========================
   管理員推薦管理
========================= */

.referral-ranking-panel {
    margin-bottom: 22px;
}

.admin-panel-heading {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: flex-start;
    margin-bottom: 20px;
}

.admin-panel-heading h2 {
    margin: 4px 0 0;
}

.referral-ranking-list {
    display: grid;
    gap: 12px;
}

.referral-ranking-card {
    display: grid;
    grid-template-columns:
        44px
        minmax(220px, 1fr)
        minmax(330px, auto);
    gap: 15px;
    align-items: center;
    padding: 16px;
    border: 1px solid #e2e8f0;
    border-radius: 13px;
    background: #f8fafc;
}

.referral-ranking-number {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #fff2bd;
    color: #805d00;
    font-weight: bold;
}

.referral-ranking-member {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.referral-ranking-member span,
.referral-ranking-member small {
    overflow-wrap: anywhere;
    color: #64748b;
}

.referral-ranking-stats {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(90px, 1fr));
    gap: 10px;
}

.referral-ranking-stats > div {
    padding: 10px;
    border-radius: 9px;
    background: #ffffff;
    text-align: center;
}

.referral-ranking-stats span,
.referral-ranking-stats strong {
    display: block;
}

.referral-ranking-stats span {
    margin-bottom: 5px;
    color: #64748b;
    font-size: 16px;
}

.referral-admin-table {
    min-width: 1350px;
}

.table-secondary-text {
    display: block;
    margin-top: 4px;
    color: #64748b;
}

.referral-reward-value {
    color: #26723b;
}

@media (max-width: 800px) {
    .referral-ranking-card {
        grid-template-columns:
            44px minmax(0, 1fr);
    }

    .referral-ranking-stats {
        grid-column: 1 / -1;
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 520px) {
    .referral-ranking-stats {
        grid-template-columns: 1fr;
    }
}

/* =========================
   管理員消失垃幣管理
========================= */

.coin-member-detail {
    margin-top: 24px;
}

.coin-current-balance {
    display: inline-flex;
    align-items: center;
    padding: 12px 18px;
    border-radius: 12px;
    background: #fff2bd;
    color: #805d00;
    font-size: 24px;
    white-space: nowrap;
}

.coin-adjust-form {
    display: grid;
    grid-template-columns:
        minmax(160px, 1fr)
        minmax(120px, 180px)
        minmax(260px, 2fr)
        auto;
    gap: 14px;
    align-items: end;
    margin: 22px 0;
    padding: 18px;
    border: 1px solid #dbe7f3;
    border-radius: 14px;
    background: #f8fbff;
}

.coin-adjust-form .form-group {
    margin: 0;
}

.coin-adjust-form textarea {
    min-height: 48px;
}

.coin-amount-positive {
    color: #26723b;
}

.coin-amount-negative {
    color: #b42318;
}

@media (max-width: 900px) {
    .coin-adjust-form {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .coin-adjust-form {
        grid-template-columns: 1fr;
    }

    .coin-current-balance {
        font-size: 20px;
    }
}

/* =========================
   專用垃圾袋介紹頁
========================= */

.bag-page-container {
    width: min(1120px, calc(100% - 32px));
    margin: 0 auto;
    padding: 36px 0 70px;
}

.bag-hero {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        minmax(320px, 480px);
    gap: 36px;
    align-items: center;
    padding: 34px;
    border: 1px solid #dbe7f3;
    border-radius: 22px;
    background: linear-gradient(
        135deg,
        #ffffff,
        #f4f8ff
    );
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.08);
}

.bag-hero h1 {
    margin: 6px 0 14px;
    font-size: clamp(32px, 5vw, 52px);
    line-height: 1.15;
}

.bag-hero-description {
    margin: 0;
    color: #475569;
    font-size: 18px;
    line-height: 1.8;
}

.bag-hero-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 20px 0;
}

.bag-hero-badges span {
    display: inline-flex;
    padding: 8px 12px;
    border-radius: 999px;
    background: #e8f0ff;
    color: #2457a6;
    font-size: 17px;
    font-weight: bold;
}

.bag-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.bag-hero-image {
    padding: 16px;
    border-radius: 18px;
    background: #ffffff;
}

.bag-hero-image img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 12px;
}

.bag-hero-image small {
    display: block;
    margin-top: 10px;
    color: #64748b;
    text-align: center;
}

.bag-size-section,
.bag-intuitive-section,
.bag-why-section,
.bag-plan-section,
.bag-faq-section {
    margin-top: 30px;
    padding: 28px;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    background: #ffffff;
}

.bag-section-heading {
    margin-bottom: 22px;
}

.bag-section-heading h2 {
    margin: 5px 0 8px;
}

.bag-section-heading p {
    margin: 0;
    color: #64748b;
    line-height: 1.7;
}

.bag-size-grid {
    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.bag-size-card {
    padding: 20px;
    border-radius: 14px;
    background: #f8fafc;
}

.bag-size-card span,
.bag-size-card strong {
    display: block;
}

.bag-size-card span {
    color: #64748b;
    font-size: 17px;
}

.bag-size-card strong {
    margin: 8px 0;
    font-size: 24px;
}

.bag-size-card p {
    margin: 0;
    color: #64748b;
    line-height: 1.6;
}

.bag-intuitive-grid {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.bag-intuitive-card {
    padding: 22px;
    border-radius: 14px;
    background: #f8fbff;
}

.bag-intuitive-icon {
    margin-bottom: 12px;
    font-size: 34px;
}

.bag-intuitive-card strong {
    display: block;
    margin-bottom: 8px;
}

.bag-intuitive-card p {
    margin: 0;
    color: #64748b;
    line-height: 1.7;
}

.bag-reason-list {
    display: grid;
    gap: 14px;
}

.bag-reason-list article {
    display: grid;
    grid-template-columns:
        52px minmax(0, 1fr);
    gap: 14px;
    padding: 18px;
    border-radius: 14px;
    background: #f8fafc;
}

.bag-reason-list article > span {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #20383b;
    color: #ffffff;
    font-weight: bold;
}

.bag-reason-list strong {
    display: block;
    margin-bottom: 6px;
}

.bag-reason-list p {
    margin: 0;
    color: #64748b;
    line-height: 1.7;
}

.bag-plan-grid {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.bag-plan-card {
    padding: 24px;
    border: 1px solid #dbe7f3;
    border-radius: 16px;
    background: #f8fbff;
}

.prime-bag-plan-card {
    background: #fff9ed;
}

.bag-plan-badge {
    display: inline-flex;
    padding: 6px 10px;
    border-radius: 999px;
    background: #e8f0ff;
    color: #2457a6;
    font-size: 16px;
    font-weight: bold;
}

.bag-plan-card h3 {
    margin: 14px 0;
}

.bag-plan-card ul {
    margin: 0 0 20px;
    padding-left: 20px;
}

.bag-plan-card li {
    margin-bottom: 9px;
    line-height: 1.6;
}

.bag-faq-list {
    display: grid;
    gap: 12px;
}

.bag-faq-list details {
    padding: 16px 18px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #f8fafc;
}

.bag-faq-list summary {
    cursor: pointer;
    font-weight: bold;
}

.bag-faq-list p {
    margin: 12px 0 0;
    color: #64748b;
    line-height: 1.7;
}

.bag-final-cta {
    margin-top: 30px;
    padding: 36px;
    border-radius: 20px;
    background: #0f172a;
    color: #ffffff;
    text-align: center;
}

.bag-final-cta h2 {
    margin: 6px 0 10px;
}

.bag-final-cta p {
    margin: 0 0 20px;
    color: #cbd5e1;
}

@media (max-width: 900px) {
    .bag-hero {
        grid-template-columns: 1fr;
    }

    .bag-size-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .bag-intuitive-grid,
    .bag-plan-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 520px) {
    .bag-page-container {
        width: min(100% - 20px, 1120px);
    }

    .bag-hero,
    .bag-size-section,
    .bag-intuitive-section,
    .bag-why-section,
    .bag-plan-section,
    .bag-faq-section {
        padding: 20px;
    }

    .bag-size-grid {
        grid-template-columns: 1fr;
    }

    .bag-hero-actions {
        flex-direction: column;
    }

    .bag-hero-actions a {
        width: 100%;
        text-align: center;
    }
}

/* =========================
   方案頁：專用垃圾袋介紹
========================= */

.bag-intro-banner {
    margin-bottom: 26px;
    padding: 24px;
    border: 1px solid #dbe7f3;
    border-radius: 18px;
    background: linear-gradient(
        135deg,
        #ffffff,
        #f4f8ff
    );
    box-shadow: 0 14px 35px rgba(15, 23, 42, 0.06);
}

.bag-intro-banner-content {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        minmax(180px, 280px);
    gap: 24px;
    align-items: center;
}

.bag-intro-banner h2 {
    margin: 5px 0 10px;
}

.bag-intro-banner p {
    margin: 0 0 18px;
    color: #475569;
    line-height: 1.8;
}

.bag-intro-banner-image {
    display: block;
    padding: 10px;
    border-radius: 14px;
    background: #ffffff;
}

.bag-intro-banner-image img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 10px;
}

.bag-intro-policy-grid {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 18px;
}

.bag-intro-policy-grid > div {
    padding: 14px;
    border-radius: 12px;
    background: #f8fafc;
}

.bag-intro-policy-grid strong,
.bag-intro-policy-grid span {
    display: block;
}

.bag-intro-policy-grid strong {
    margin-bottom: 5px;
}

.bag-intro-policy-grid span {
    color: #64748b;
    line-height: 1.6;
}

@media (max-width: 760px) {
    .bag-intro-banner-content,
    .bag-intro-policy-grid {
        grid-template-columns: 1fr;
    }

    .bag-intro-banner-image {
        max-width: 320px;
        margin: 0 auto;
    }
}

/* =========================
   方案頁：專用垃圾袋介紹
========================= */

.bag-intro-banner {
    margin-bottom: 28px;
    padding: 26px;
    border: 1px solid #dbe7f3;
    border-radius: 18px;
    background: linear-gradient(
        135deg,
        #ffffff,
        #f4f8ff
    );
    box-shadow: 0 14px 35px rgba(15, 23, 42, 0.06);
}

.bag-intro-banner-content {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        minmax(210px, 310px);
    gap: 26px;
    align-items: center;
}

.bag-intro-banner h2 {
    margin: 5px 0 11px;
}

.bag-intro-banner p {
    margin: 0 0 16px;
    color: #475569;
    line-height: 1.8;
}

.bag-intro-highlight-list {
    display: grid;
    gap: 7px;
    margin-bottom: 20px;
}

.bag-intro-highlight-list span {
    color: #2457a6;
    font-size: 17px;
    font-weight: 700;
}

.bag-intro-banner-image {
    display: block;
    padding: 11px;
    border-radius: 15px;
    background: #ffffff;
    text-decoration: none;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.08);
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.bag-intro-banner-image:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12);
}

.bag-intro-banner-image img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 10px;
}

.bag-intro-banner-image small {
    display: block;
    margin-top: 9px;
    color: #64748b;
    text-align: center;
}

.bag-intro-policy-grid {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 13px;
    margin-top: 20px;
}

.bag-intro-policy-grid > div {
    padding: 15px;
    border-radius: 12px;
}

.bag-policy-small-plan {
    background: #eef5ff;
}

.bag-policy-prime-plan {
    background: #fff8e8;
}

.bag-intro-policy-grid strong,
.bag-intro-policy-grid span {
    display: block;
}

.bag-intro-policy-grid strong {
    margin-bottom: 6px;
}

.bag-intro-policy-grid span {
    color: #64748b;
    line-height: 1.7;
}

/* =========================
   方案卡片資訊
========================= */

.plan-category-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

.plan-category-badge,
.plan-duration-badge {
    display: inline-flex;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 16px;
    font-weight: 700;
}

.plan-category-badge {
    background: #e8f0ff;
    color: #2457a6;
}

.prime-category-badge {
    background: #fff0c9;
    color: #805d00;
}

.plan-duration-badge {
    background: #f1f5f9;
    color: #64748b;
}

.plan-information-grid {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 15px;
}

.plan-information-grid > div {
    padding: 12px;
    border-radius: 10px;
    background: #f8fafc;
}

.plan-information-grid span,
.plan-information-grid strong {
    display: block;
}

.plan-information-grid span {
    margin-bottom: 5px;
    color: #64748b;
    font-size: 16px;
}

/* =========================
   方案卡片垃圾袋說明
========================= */

.plan-bag-note {
    margin-top: 15px;
    padding: 15px;
    border: 1px solid #dce9f8;
    border-radius: 12px;
    background: #eef5ff;
}

.plan-bag-note strong,
.plan-bag-note span,
.plan-bag-note a {
    display: block;
}

.plan-bag-note strong {
    margin-bottom: 7px;
    color: #2457a6;
}

.plan-bag-note span {
    margin-top: 5px;
    color: #52657d;
    font-size: 17px;
    line-height: 1.65;
}

.plan-bag-note a {
    margin-top: 10px;
    color: #20383b;
    font-size: 17px;
    font-weight: 700;
    text-decoration: none;
}

.plan-bag-note a:hover {
    text-decoration: underline;
}

.plan-bag-important {
    padding-top: 6px;
    color: #b42318 !important;
    font-weight: 700;
}

.prime-plan-bag-note {
    border-color: #f1dfae;
    background: #fff8e8;
}

.prime-plan-bag-note strong {
    color: #805d00;
}

.prime-plan-limit {
    padding-top: 6px;
    color: #805d00 !important;
    font-weight: 700;
}

.plan-subscribe-button {
    margin-top: 18px;
}

@media (max-width: 760px) {
    .bag-intro-banner-content,
    .bag-intro-policy-grid {
        grid-template-columns: 1fr;
    }

    .bag-intro-banner-image {
        width: min(100%, 330px);
        margin: 0 auto;
    }
}

@media (max-width: 520px) {
    .bag-intro-banner {
        padding: 19px;
    }

    .plan-information-grid {
        grid-template-columns: 1fr;
    }

    .plan-category-row {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* =========================
   編輯方案：垃圾袋設定
========================= */

.plan-edit-card {
    width: min(720px, 100%);
}

.plan-bag-setting-section {
    margin: 24px 0;
    padding: 20px;
    border: 1px solid #dbe7f3;
    border-radius: 14px;
    background: #f8fbff;
}

.plan-bag-setting-heading {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 18px;
}

.plan-bag-setting-heading h2 {
    margin: 4px 0 0;
}

.plan-bag-setting-heading a {
    font-size: 17px;
    font-weight: bold;
}

.prime-bag-setting-notice {
    padding: 16px;
    border: 1px solid #f1dfae;
    border-radius: 12px;
    background: #fff8e8;
}

.prime-bag-setting-notice strong {
    display: block;
    margin-bottom: 7px;
    color: #805d00;
}

.prime-bag-setting-notice p {
    margin: 0;
    color: #6f5b24;
    line-height: 1.7;
}

[hidden] {
    display: none !important;
}

/* =========================
   訂閱第二步：垃圾袋設定
========================= */

.checkout-bag-section {
    margin: 24px 0;
    padding: 20px;
    border: 1px solid #dbe7f3;
    border-radius: 15px;
    background: #f8fbff;
}

.checkout-bag-heading {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 18px;
}

.checkout-bag-heading h2 {
    margin: 4px 0 0;
}

.checkout-bag-heading a {
    font-size: 17px;
    font-weight: bold;
}

.checkout-bag-product {
    display: grid;
    grid-template-columns: minmax(160px, 240px) minmax(0, 1fr);
    gap: 20px;
    align-items: center;
    padding: 16px;
    border-radius: 13px;
    background: #ffffff;
}

.checkout-bag-image img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 10px;
}

.checkout-bag-policy-badge {
    display: inline-flex;
    padding: 5px 9px;
    border-radius: 999px;
    background: #e8f0ff;
    color: #2457a6;
    font-size: 16px;
    font-weight: bold;
}

.checkout-bag-product-content h3 {
    margin: 10px 0 7px;
}

.checkout-bag-product-content p {
    margin: 0;
    color: #64748b;
    line-height: 1.7;
}

.checkout-bag-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 14px;
}

.checkout-bag-facts > div {
    padding: 12px;
    border-radius: 10px;
    background: #f8fafc;
}

.checkout-bag-facts span,
.checkout-bag-facts strong {
    display: block;
}

.checkout-bag-facts span {
    margin-bottom: 4px;
    color: #64748b;
    font-size: 16px;
}

.bag-addon-choice {
    margin-top: 18px;
}

.bag-addon-choice fieldset {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    border: 0;
}

.bag-addon-choice legend {
    margin-bottom: 10px;
    font-weight: bold;
}

.bag-addon-option {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 14px;
    border: 1px solid #dbe7f3;
    border-radius: 11px;
    background: #ffffff;
    cursor: pointer;
}

.bag-addon-option strong,
.bag-addon-option small {
    display: block;
}

.bag-addon-option small {
    margin-top: 4px;
    color: #64748b;
    line-height: 1.5;
}

.bag-addon-quantity-box {
    margin-top: 16px;
    padding: 16px;
    border-radius: 12px;
    background: #eef5ff;
}

.bag-addon-calculation {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 14px;
}

.bag-addon-calculation > div {
    padding: 12px;
    border-radius: 9px;
    background: #ffffff;
}

.bag-addon-calculation span,
.bag-addon-calculation strong {
    display: block;
}

.bag-addon-calculation span {
    margin-bottom: 4px;
    color: #64748b;
    font-size: 16px;
}

.prime-checkout-bag-notice,
.bag-addon-disabled-notice {
    padding: 16px;
    border: 1px solid #f1dfae;
    border-radius: 12px;
    background: #fff8e8;
}

.prime-checkout-bag-notice strong {
    display: block;
    margin-bottom: 7px;
    color: #805d00;
}

.prime-checkout-bag-notice p {
    margin: 0;
    color: #6f5b24;
    line-height: 1.7;
}

@media (max-width: 700px) {
    .checkout-bag-heading,
    .checkout-bag-product {
        grid-template-columns: 1fr;
    }

    .checkout-bag-heading {
        flex-direction: column;
    }

    .checkout-bag-facts,
    .bag-addon-calculation {
        grid-template-columns: 1fr;
    }

    .checkout-bag-image {
        max-width: 300px;
        margin: 0 auto;
    }
}

/* =========================
   訂閱確認：垃圾袋摘要
========================= */

.confirm-bag-section {
    margin-top: 22px;
    padding: 20px;
    border: 1px solid #dbe7f3;
    border-radius: 14px;
    background: #f8fbff;
}

.confirm-bag-heading {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 16px;
}

.confirm-bag-heading h2 {
    margin: 4px 0 0;
}

.confirm-bag-heading a {
    font-size: 17px;
    font-weight: bold;
}

.confirm-bag-grid {
    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.confirm-bag-grid > div {
    padding: 13px;
    border-radius: 10px;
    background: #ffffff;
}

.confirm-bag-grid span,
.confirm-bag-grid strong {
    display: block;
}

.confirm-bag-grid span {
    margin-bottom: 5px;
    color: #64748b;
    font-size: 16px;
}

.confirm-bag-rule {
    margin: 14px 0 0;
    padding: 12px;
    border-radius: 9px;
    background: #fff4f2;
    color: #b42318;
    font-size: 17px;
    font-weight: bold;
}

.prime-confirm-bag-notice {
    padding: 16px;
    border: 1px solid #f1dfae;
    border-radius: 12px;
    background: #fff8e8;
}

.prime-confirm-bag-notice strong {
    display: block;
    margin-bottom: 7px;
    color: #805d00;
}

.prime-confirm-bag-notice p {
    margin: 0;
    color: #6f5b24;
    line-height: 1.7;
}

@media (max-width: 700px) {
    .confirm-bag-heading {
        flex-direction: column;
    }

    .confirm-bag-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 480px) {
    .confirm-bag-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================
   匯款頁：垃圾袋摘要
========================= */

.transfer-bag-summary {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 14px 0;
    padding: 14px;
    border-radius: 12px;
    background: #eef5ff;
}

.transfer-bag-summary > div {
    padding: 11px;
    border-radius: 9px;
    background: #ffffff;
}

.transfer-bag-summary span,
.transfer-bag-summary strong {
    display: block;
}

.transfer-bag-summary span {
    margin-bottom: 4px;
    color: #64748b;
    font-size: 16px;
}

.prime-transfer-bag-summary {
    display: block;
    border: 1px solid #f1dfae;
    background: #fff8e8;
}

.prime-transfer-bag-summary strong {
    margin-bottom: 6px;
    color: #805d00;
}

.prime-transfer-bag-summary span {
    color: #6f5b24;
    line-height: 1.7;
}

@media (max-width: 560px) {
    .transfer-bag-summary {
        grid-template-columns: 1fr;
    }
}

/* =========================
   我的訂單：垃圾袋摘要
========================= */

.member-order-category {
    display: inline-flex;
    margin-top: 7px;
    padding: 5px 9px;
    border-radius: 999px;
    background: #f1f5f9;
    color: #64748b;
    font-size: 16px;
    font-weight: 700;
}

.member-order-bag-summary {
    margin: 16px 0;
    padding: 15px;
    border-radius: 12px;
    background: #f8fbff;
    border: 1px solid #dbe7f3;
}

.member-order-bag-grid {
    display: grid;
    grid-template-columns:
        repeat(5, minmax(0, 1fr));
    gap: 10px;
}

.member-order-bag-grid > div {
    padding: 11px;
    border-radius: 9px;
    background: #ffffff;
}

.member-order-bag-grid span,
.member-order-bag-grid strong {
    display: block;
}

.member-order-bag-grid span {
    margin-bottom: 4px;
    color: #64748b;
    font-size: 16px;
}

.member-order-bag-rule {
    display: block;
    margin-top: 12px;
    color: #b42318;
    font-weight: 700;
}

.member-order-prime-bag {
    padding: 14px;
    border: 1px solid #f1dfae;
    border-radius: 10px;
    background: #fff8e8;
}

.member-order-prime-bag strong,
.member-order-prime-bag span {
    display: block;
}

.member-order-prime-bag strong {
    margin-bottom: 6px;
    color: #805d00;
}

.member-order-prime-bag span {
    color: #6f5b24;
    line-height: 1.7;
}

@media (max-width: 900px) {
    .member-order-bag-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 520px) {
    .member-order-bag-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================
   管理員訂單：垃圾袋摘要
========================= */

.admin-order-bag-card {
    margin: 22px 0;
    padding: 22px;
    border: 1px solid #dbe7f3;
    border-radius: 16px;
    background: #f8fbff;
}

.admin-order-bag-heading {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 17px;
}

.admin-order-bag-heading h2 {
    margin: 4px 0 0;
}

.admin-order-bag-heading a {
    font-size: 17px;
    font-weight: bold;
}

.admin-order-bag-grid {
    display: grid;
    grid-template-columns:
        repeat(5, minmax(0, 1fr));
    gap: 10px;
}

.admin-order-bag-grid > div {
    padding: 13px;
    border-radius: 10px;
    background: #ffffff;
}

.admin-order-bag-grid span,
.admin-order-bag-grid strong {
    display: block;
}

.admin-order-bag-grid span {
    margin-bottom: 5px;
    color: #64748b;
    font-size: 16px;
}

.admin-order-bag-warning {
    margin: 14px 0 0;
    padding: 11px;
    border-radius: 9px;
    background: #fff4f2;
    color: #b42318;
    font-weight: bold;
}

.admin-order-bag-history-note {
    display: block;
    margin-top: 10px;
    color: #64748b;
    line-height: 1.6;
}

.admin-prime-bag-notice {
    padding: 16px;
    border: 1px solid #f1dfae;
    border-radius: 12px;
    background: #fff8e8;
}

.admin-prime-bag-notice strong {
    display: block;
    margin-bottom: 7px;
    color: #805d00;
}

.admin-prime-bag-notice p {
    margin: 0;
    color: #6f5b24;
    line-height: 1.7;
}

@media (max-width: 950px) {
    .admin-order-bag-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .admin-order-bag-heading {
        flex-direction: column;
    }

    .admin-order-bag-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================
   管理員訂單列表：垃圾袋摘要
========================= */

.admin-order-number-link {
    color: inherit;
    font-weight: 700;
    text-decoration: none;
}

.admin-order-number-link:hover {
    color: #20383b;
    text-decoration: underline;
}

.admin-order-member-email,
.admin-order-plan-category {
    display: block;
    margin-top: 5px;
    color: #64748b;
    font-size: 16px;
    line-height: 1.5;
}

.admin-order-bag-addon-summary {
    min-width: 105px;
}

.admin-order-bag-addon-summary strong,
.admin-order-bag-addon-summary span,
.admin-order-bag-addon-summary small {
    display: block;
}

.admin-order-bag-addon-summary strong {
    color: #2457a6;
}

.admin-order-bag-addon-summary span,
.admin-order-bag-addon-summary small {
    margin-top: 4px;
    color: #64748b;
    font-size: 16px;
}

.admin-order-prime-bag-label,
.admin-order-no-bag-addon {
    display: inline-flex;
    padding: 6px 9px;
    border-radius: 999px;
    font-size: 16px;
    font-weight: 700;
    white-space: nowrap;
}

.admin-order-prime-bag-label {
    background: #fff0c9;
    color: #805d00;
}

.admin-order-no-bag-addon {
    background: #f1f5f9;
    color: #64748b;
}

.order-bag-list-table td {
    vertical-align: top;
}

/* =========================
   訂單管理：直觀卡片版
========================= */

.admin-order-card-page {
    max-width: 1280px;
}

.admin-review-focus-banner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    margin: 20px 0;
    padding: 18px 20px;
    border: 1px solid #f3c1c1;
    border-radius: 16px;
    background: #fff4f4;
}

.admin-review-focus-banner > div {
    display: flex;
    align-items: center;
    gap: 14px;
}

.admin-review-focus-icon {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: 50%;
    background: #dc2626;
    color: #ffffff;
    font-size: 22px;
    font-weight: 800;
}

.admin-review-focus-banner strong {
    display: block;
    color: #991b1b;
    font-size: 18px;
}

.admin-review-focus-banner p {
    margin: 4px 0 0;
    color: #7f1d1d;
}

.admin-review-focus-banner > a {
    padding: 11px 15px;
    border-radius: 10px;
    background: #dc2626;
    color: #ffffff;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.admin-order-card-list {
    display: grid;
    gap: 18px;
    margin-top: 22px;
}

.admin-order-card {
    padding: 20px;
    border: 1px solid #dbe4ee;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
}

.admin-order-card-review {
    border: 2px solid #f59e0b;
    background: #fffdf5;
    box-shadow: 0 10px 28px rgba(245, 158, 11, 0.14);
}

.admin-order-card-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
}

.admin-order-card-number {
    display: block;
    margin-bottom: 6px;
    color: #64748b;
    font-size: 16px;
    font-weight: 700;
    word-break: break-all;
}

.admin-order-card-title h2 {
    margin: 0;
    font-size: 21px;
}

.admin-order-card-title p {
    margin: 5px 0 0;
    color: #64748b;
    word-break: break-all;
}

.admin-order-card-plan,
.admin-order-card-money,
.admin-order-card-meta {
    display: grid;
    gap: 10px;
    margin-top: 17px;
}

.admin-order-card-plan {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.admin-order-card-money {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.admin-order-card-meta {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.admin-order-card-plan > div,
.admin-order-card-money > div,
.admin-order-card-meta > div {
    min-width: 0;
    padding: 13px;
    border-radius: 11px;
    background: #f8fafc;
}

.admin-order-card span,
.admin-order-card strong,
.admin-order-card small {
    display: block;
}

.admin-order-card-plan span,
.admin-order-card-money span,
.admin-order-card-meta span {
    margin-bottom: 5px;
    color: #64748b;
    font-size: 16px;
}

.admin-order-card-plan small {
    margin-top: 5px;
    color: #64748b;
}

.admin-order-card-payable {
    background: #eefbf3 !important;
}

.admin-order-card-payable strong {
    color: #15803d;
    font-size: 20px;
}

.admin-order-card-review .admin-order-card-payable {
    background: #fff1d6 !important;
}

.admin-order-card-review .admin-order-card-payable strong {
    color: #b45309;
}

.admin-order-card-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 18px;
}

.admin-order-review-button,
.admin-order-view-button {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-height: 44px;
    padding: 11px 18px;
    border-radius: 11px;
    font-weight: 800;
    text-decoration: none;
}

.admin-order-review-button {
    background: #dc2626;
    color: #ffffff;
}

.admin-order-review-button:hover {
    background: #b91c1c;
}

.admin-order-view-button {
    background: #e8eef7;
    color: #1e3a5f;
}

.admin-order-review-hint {
    color: #92400e;
    font-size: 17px;
    font-weight: 700;
}

@media (max-width: 900px) {
    .admin-order-card-money,
    .admin-order-card-meta {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 620px) {
    .admin-review-focus-banner,
    .admin-order-card-top,
    .admin-order-card-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .admin-review-focus-banner > a,
    .admin-order-review-button,
    .admin-order-view-button {
        width: 100%;
    }

    .admin-order-card-plan,
    .admin-order-card-money,
    .admin-order-card-meta {
        grid-template-columns: 1fr;
    }

    .admin-order-card {
        padding: 16px;
    }
}

/* =========================
   訂單詳細頁：優先審核介面
========================= */

.admin-review-detail-page {
    max-width: 1280px;
}

.admin-priority-review-panel {
    margin: 22px 0;
    padding: 22px;
    border: 2px solid #f59e0b;
    border-radius: 18px;
    background: #fffdf5;
    box-shadow: 0 12px 32px rgba(245, 158, 11, 0.16);
}

.admin-priority-review-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 18px;
    padding-bottom: 18px;
    border-bottom: 1px solid #f4d9a4;
}

.admin-priority-review-header h2 {
    margin: 5px 0 7px;
    color: #92400e;
    font-size: 25px;
}

.admin-priority-review-header p {
    margin: 0;
    color: #7c5a24;
    line-height: 1.7;
}

.admin-priority-review-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 13px;
    border-radius: 999px;
    background: #f59e0b;
    color: #ffffff;
    font-size: 17px;
    font-weight: 800;
    white-space: nowrap;
}

.admin-priority-review-main {
    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-top: 18px;
}

.admin-priority-review-main > div {
    min-width: 0;
    padding: 15px;
    border: 1px solid #f3dfb9;
    border-radius: 13px;
    background: #ffffff;
}

.admin-priority-review-main span,
.admin-priority-review-main strong,
.admin-priority-review-main small {
    display: block;
}

.admin-priority-review-main span {
    margin-bottom: 6px;
    color: #64748b;
    font-size: 16px;
    font-weight: 700;
}

.admin-priority-review-main strong {
    color: #1e293b;
    font-size: 18px;
    word-break: break-word;
}

.admin-priority-review-main small {
    margin-top: 6px;
    color: #64748b;
    line-height: 1.5;
    word-break: break-word;
}

.admin-review-amount-focus {
    border-color: #f59e0b !important;
    background: #fff7e6 !important;
}

.admin-review-amount-focus strong {
    color: #b45309;
    font-size: 28px;
}

.admin-review-last5-focus {
    border-color: #ef4444 !important;
    background: #fff5f5 !important;
}

.admin-review-last5-focus strong {
    color: #b91c1c;
    font-size: 29px;
    letter-spacing: 4px;
}

.admin-priority-review-form {
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid #f4d9a4;
}

.admin-priority-review-actions {
    display: grid;
    grid-template-columns:
        minmax(0, 2fr)
        minmax(180px, 1fr);
    gap: 12px;
    margin-top: 15px;
}

.admin-priority-approve-button,
.admin-priority-reject-button {
    min-height: 52px;
    padding: 13px 18px;
    border: 0;
    border-radius: 12px;
    font-size: 17px;
    font-weight: 800;
    cursor: pointer;
}

.admin-priority-approve-button {
    background: #15803d;
    color: #ffffff;
}

.admin-priority-approve-button:hover {
    background: #166534;
}

.admin-priority-reject-button {
    background: #fee2e2;
    color: #b91c1c;
}

.admin-priority-reject-button:hover {
    background: #fecaca;
}

@media (max-width: 950px) {
    .admin-priority-review-main {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 620px) {
    .admin-priority-review-panel {
        padding: 16px;
    }

    .admin-priority-review-header {
        flex-direction: column;
    }

    .admin-priority-review-main,
    .admin-priority-review-actions {
        grid-template-columns: 1fr;
    }

    .admin-priority-review-badge {
        align-self: flex-start;
    }

    .admin-priority-approve-button,
    .admin-priority-reject-button {
        width: 100%;
    }
}

/* =========================
   我的訂單：直觀卡片介面
========================= */

.member-orders-simple-page {
    max-width: 1050px;
}

.member-order-simple-list {
    display: grid;
    gap: 20px;
}

.member-order-simple-card {
    padding: 20px;
    border: 1px solid #dbe4ee;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.07);
}

.member-order-needs-action {
    border: 2px solid #f59e0b;
    background: #fffdf6;
}

.member-order-simple-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
}

.member-order-simple-header h2 {
    margin: 6px 0 0;
}

.member-order-next-step {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 18px;
    padding: 15px;
    border-radius: 13px;
    background: #f8fafc;
}

.member-order-needs-action .member-order-next-step {
    background: #fff2d8;
}

.member-order-step-icon {
    display: grid;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: 50%;
    background: #20383b;
    color: #ffffff;
    font-size: 20px;
    font-weight: 800;
}

.member-order-needs-action .member-order-step-icon {
    background: #f59e0b;
}

.member-order-next-step strong {
    display: block;
    font-size: 18px;
}

.member-order-next-step p {
    margin: 5px 0 0;
    color: #64748b;
    line-height: 1.6;
}

.member-order-key-info {
    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-top: 16px;
}

.member-order-key-info > div {
    min-width: 0;
    padding: 13px;
    border-radius: 11px;
    background: #f8fafc;
}

.member-order-key-info span,
.member-order-key-info strong {
    display: block;
}

.member-order-key-info span {
    margin-bottom: 5px;
    color: #64748b;
    font-size: 16px;
}

.member-order-key-payable {
    background: #eefbf3 !important;
}

.member-order-key-payable strong {
    color: #15803d;
    font-size: 22px;
}

.member-order-needs-action .member-order-key-payable {
    background: #fff0cc !important;
}

.member-order-needs-action .member-order-key-payable strong {
    color: #b45309;
}

.member-order-review-info {
    display: flex;
    flex-wrap: wrap;
    gap: 9px 18px;
    margin-top: 15px;
    padding: 13px;
    border-radius: 11px;
    background: #eef5ff;
}

.member-order-review-info strong {
    width: 100%;
    color: #20383b;
}

.member-order-review-info span {
    color: #475569;
    font-size: 17px;
}

.member-order-simple-actions {
    display: flex;
    align-items: stretch;
    gap: 12px;
    margin-top: 18px;
}

.member-order-simple-actions form {
    margin: 0;
}

.member-order-main-action,
.member-order-secondary-action,
.member-order-cancel-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 12px 18px;
    border: 0;
    border-radius: 11px;
    font-size: 18px;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
}

.member-order-main-action {
    flex: 1;
    background: #20383b;
    color: #ffffff;
}

.member-order-secondary-action {
    background: #e8eef7;
    color: #1e3a5f;
}

.member-order-cancel-action {
    background: #fee2e2;
    color: #b91c1c;
}

.member-order-detail-toggle {
    margin-top: 18px;
    border-top: 1px solid #e2e8f0;
}

.member-order-detail-toggle summary {
    padding: 15px 0 3px;
    color: #20383b;
    font-weight: 800;
    cursor: pointer;
}

.member-order-detail-content {
    padding-top: 12px;
}

.member-order-detail-section {
    margin-top: 16px;
}

.member-order-detail-section:first-child {
    margin-top: 0;
}

.member-order-detail-section h3 {
    margin: 0 0 10px;
    font-size: 17px;
}

.member-order-detail-grid {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.member-order-detail-grid > div {
    padding: 12px;
    border-radius: 10px;
    background: #f8fafc;
}

.member-order-detail-grid span,
.member-order-detail-grid strong {
    display: block;
}

.member-order-detail-grid span {
    margin-bottom: 5px;
    color: #64748b;
    font-size: 16px;
}

.member-order-detail-total {
    background: #eefbf3 !important;
}

.member-order-detail-total strong {
    color: #15803d;
}

.member-order-prime-note {
    margin: 0;
    padding: 13px;
    border-radius: 10px;
    background: #fff8e8;
    color: #6f5b24;
    line-height: 1.7;
}

.member-order-special-bag-rule {
    margin: 12px 0 0;
    padding: 12px;
    border-radius: 10px;
    background: #fff4f2;
    color: #b42318;
    font-weight: 700;
    line-height: 1.7;
}

@media (max-width: 800px) {
    .member-order-key-info {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .member-order-detail-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .member-order-simple-card {
        padding: 16px;
    }

    .member-order-simple-header,
    .member-order-simple-actions {
        flex-direction: column;
    }

    .member-order-key-info,
    .member-order-detail-grid {
        grid-template-columns: 1fr;
    }

    .member-order-simple-actions form,
    .member-order-main-action,
    .member-order-secondary-action,
    .member-order-cancel-action {
        width: 100%;
    }
}

/* =========================
   會員中心：直觀儀表板
========================= */

.member-home-dashboard {
    max-width: 1180px;
}

.member-home-welcome {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 22px;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.07);
}

.member-home-welcome h1 {
    margin: 4px 0 6px;
}

.member-home-welcome p {
    margin: 0;
    color: #64748b;
}

.member-home-level {
    margin-left: auto;
    padding: 7px 12px;
    border-radius: 999px;
    background: #eef5ff;
    color: #2457a6;
    font-size: 17px;
    font-weight: 800;
    white-space: nowrap;
}

.member-home-action-alert {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 20px;
    padding: 18px;
    border-radius: 16px;
}

.member-home-action-alert.is-payment-needed {
    border: 2px solid #f59e0b;
    background: #fff8e8;
}

.member-home-action-alert.is-reviewing {
    border: 1px solid #bfd7ff;
    background: #f2f7ff;
}

.member-home-action-icon {
    display: grid;
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
    place-items: center;
    border-radius: 50%;
    background: #20383b;
    color: #ffffff;
    font-size: 21px;
    font-weight: 900;
}

.is-payment-needed .member-home-action-icon {
    background: #f59e0b;
}

.member-home-action-content {
    flex: 1;
    min-width: 0;
}

.member-home-action-content span,
.member-home-action-content strong,
.member-home-action-content small {
    display: block;
}

.member-home-action-content > span {
    margin-bottom: 4px;
    color: #64748b;
    font-size: 16px;
    font-weight: 800;
}

.member-home-action-content strong {
    font-size: 18px;
}

.member-home-action-content p {
    margin: 5px 0;
    color: #475569;
    line-height: 1.6;
}

.member-home-action-content small {
    color: #64748b;
}

.member-home-action-button,
.member-home-primary-link,
.member-home-secondary-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 11px 16px;
    border-radius: 11px;
    font-weight: 800;
    text-decoration: none;
}

.member-home-action-button,
.member-home-primary-link {
    background: #20383b;
    color: #ffffff;
}

.is-payment-needed .member-home-action-button {
    background: #d97706;
}

.member-home-secondary-link {
    background: #e8eef7;
    color: #1e3a5f;
}

.member-home-status-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 18px;
    margin-top: 22px;
}

.member-home-status-grid > article {
    min-width: 0;
    padding: 20px;
    border: 1px solid #dbe4ee;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
}

.member-home-card-heading {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}

.member-home-card-heading h2,
.member-home-next-card h2,
.member-home-coin-card h2 {
    margin: 4px 0 0;
}

.member-home-plan-name {
    display: block;
    margin-top: 18px;
    font-size: 23px;
}

.member-home-plan-category {
    display: inline-flex;
    margin-top: 7px;
    padding: 5px 9px;
    border-radius: 999px;
    background: #f1f5f9;
    color: #64748b;
    font-size: 16px;
    font-weight: 800;
}

.member-home-subscription-meta {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 17px;
}

.member-home-subscription-meta > div,
.member-home-next-time,
.member-home-reward-remaining {
    padding: 12px;
    border-radius: 10px;
    background: #f8fafc;
}

.member-home-subscription-meta span,
.member-home-subscription-meta strong,
.member-home-next-time span,
.member-home-next-time strong,
.member-home-reward-remaining span,
.member-home-reward-remaining strong {
    display: block;
}

.member-home-subscription-meta span,
.member-home-next-time span,
.member-home-reward-remaining span {
    margin-bottom: 5px;
    color: #64748b;
    font-size: 16px;
}

.member-home-card-actions {
    display: flex;
    gap: 10px;
    margin-top: 17px;
}

.member-home-next-date {
    display: block;
    margin-top: 18px;
    font-size: 27px;
}

.member-home-next-weekday {
    display: block;
    margin-top: 4px;
    color: #64748b;
}

.member-home-next-time {
    margin-top: 15px;
}

.member-home-next-card > p:last-child,
.member-home-coin-card > p {
    color: #64748b;
    line-height: 1.6;
}

.member-home-coin-balance {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-top: 18px;
}

.member-home-coin-balance strong {
    font-size: 38px;
    color: #20383b;
}

.member-home-coin-balance span {
    color: #64748b;
    font-weight: 700;
}

.member-home-reward-name {
    display: block;
    margin-top: 18px;
    font-size: 18px;
}

.member-home-reward-remaining {
    margin-top: 14px;
}

.member-home-reward-card > small {
    display: block;
    margin-top: 12px;
    color: #64748b;
}

.member-home-empty-state {
    margin-top: 18px;
    padding: 15px;
    border-radius: 12px;
    background: #f8fafc;
}

.member-home-empty-state strong {
    display: block;
}

.member-home-empty-state p {
    margin: 6px 0 14px;
    color: #64748b;
    line-height: 1.6;
}

.member-home-quick-section {
    margin-top: 24px;
}

.member-home-section-heading h2 {
    margin: 4px 0 0;
}

.member-home-quick-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-top: 15px;
}

.member-home-quick-grid > a {
    display: block;
    padding: 17px;
    border: 1px solid #dbe4ee;
    border-radius: 14px;
    background: #ffffff;
    color: inherit;
    text-decoration: none;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.member-home-quick-grid > a:hover {
    transform: translateY(-2px);
    box-shadow: 0 9px 22px rgba(15, 23, 42, 0.08);
}

.member-home-quick-grid strong,
.member-home-quick-grid span,
.member-home-quick-grid small {
    display: block;
}

.member-home-quick-grid strong {
    font-size: 18px;
}

.member-home-quick-grid span {
    margin-top: 6px;
    color: #64748b;
    line-height: 1.55;
}

.member-home-quick-grid small {
    margin-top: 11px;
    color: #20383b;
    font-weight: 800;
}

.member-home-admin-quick {
    border-color: #d7c5ff !important;
    background: #faf7ff !important;
}

.member-home-more-details {
    margin-top: 24px;
    border-top: 1px solid #dbe4ee;
}

.member-home-more-details > summary {
    padding: 17px 0;
    color: #20383b;
    font-weight: 800;
    cursor: pointer;
}

.member-home-more-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    padding-top: 4px;
}

.member-home-account-links {
    display: flex;
    justify-content: center;
    gap: 18px;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid #e2e8f0;
}

.member-home-account-links a {
    color: #64748b;
    font-weight: 700;
    text-decoration: none;
}

.member-home-account-links a:hover {
    color: #20383b;
}

@media (max-width: 900px) {
    .member-home-status-grid,
    .member-home-more-grid {
        grid-template-columns: 1fr;
    }

    .member-home-quick-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 650px) {
    .member-home-welcome,
    .member-home-action-alert {
        align-items: stretch;
        flex-direction: column;
    }

    .member-home-level {
        align-self: flex-start;
        margin-left: 0;
    }

    .member-home-action-button {
        width: 100%;
    }

    .member-home-subscription-meta,
    .member-home-quick-grid {
        grid-template-columns: 1fr;
    }

    .member-home-card-actions {
        flex-direction: column;
    }

    .member-home-primary-link,
    .member-home-secondary-link {
        width: 100%;
    }
}

/* =========================
   訂閱方案：直觀比較介面
========================= */

.intuitive-plans-page {
    max-width: 1180px;
}

.intuitive-plans-hero {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    padding: 26px;
    border-radius: 20px;
    background: #ffffff;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.07);
}

.intuitive-plans-hero h1 {
    margin: 5px 0 8px;
}

.intuitive-plans-hero p {
    margin: 0;
    color: #64748b;
    line-height: 1.7;
}

.intuitive-plans-step-list {
    display: flex;
    gap: 10px;
}

.intuitive-plans-step-list span {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 9px 11px;
    border-radius: 999px;
    background: #f1f5f9;
    color: #475569;
    font-size: 17px;
    font-weight: 700;
    white-space: nowrap;
}

.intuitive-plans-step-list strong {
    display: grid;
    width: 22px;
    height: 22px;
    place-items: center;
    border-radius: 50%;
    background: #20383b;
    color: #ffffff;
    font-size: 16px;
}

.intuitive-plan-comparison {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin-top: 22px;
}

.intuitive-plan-comparison-card {
    padding: 22px;
    border-radius: 18px;
}

.is-small-comparison {
    border: 1px solid #bfd7ff;
    background: #f3f8ff;
}

.is-prime-comparison {
    border: 1px solid #efd59c;
    background: #fff9eb;
}

.intuitive-plan-comparison-title span {
    display: inline-flex;
    padding: 5px 9px;
    border-radius: 999px;
    background: #20383b;
    color: #ffffff;
    font-size: 16px;
    font-weight: 800;
}

.is-prime-comparison .intuitive-plan-comparison-title span {
    background: #9a6b00;
}

.intuitive-plan-comparison-title h2 {
    margin: 10px 0 0;
}

.intuitive-plan-comparison-card ul {
    margin: 16px 0;
    padding-left: 20px;
    color: #475569;
    line-height: 1.9;
}

.intuitive-plan-comparison-card > a {
    display: inline-flex;
    padding: 10px 14px;
    border-radius: 10px;
    background: #ffffff;
    color: #20383b;
    font-weight: 800;
    text-decoration: none;
}

.is-prime-comparison > a {
    color: #805d00;
}

.intuitive-bag-guide {
    margin-top: 22px;
    overflow: hidden;
    border: 1px solid #dbe4ee;
    border-radius: 18px;
    background: #ffffff;
}

.intuitive-bag-guide-content {
    display: grid;
    grid-template-columns: 1.4fr 0.6fr;
    align-items: center;
    gap: 24px;
    padding: 24px;
}

.intuitive-bag-guide h2 {
    margin: 5px 0 8px;
}

.intuitive-bag-guide p {
    margin: 0;
    color: #64748b;
    line-height: 1.7;
}

.intuitive-bag-guide-button {
    display: inline-flex;
    margin-top: 16px;
    padding: 11px 16px;
    border-radius: 11px;
    background: #20383b;
    color: #ffffff;
    font-weight: 800;
    text-decoration: none;
}

.intuitive-bag-guide-image {
    display: block;
    max-height: 230px;
    overflow: hidden;
    border-radius: 14px;
    background: #f8fafc;
}

.intuitive-bag-guide-image img {
    display: block;
    width: 100%;
    height: 230px;
    object-fit: contain;
}

.intuitive-plan-section {
    margin-top: 30px;
    scroll-margin-top: 20px;
}

.intuitive-plan-section-heading {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 16px;
    margin-bottom: 16px;
}

.intuitive-plan-section-heading h2 {
    margin: 4px 0 5px;
}

.intuitive-plan-section-heading p {
    margin: 0;
    color: #64748b;
}

.intuitive-plan-section-heading > span {
    padding: 7px 11px;
    border-radius: 999px;
    background: #f1f5f9;
    color: #64748b;
    font-size: 17px;
    font-weight: 800;
    white-space: nowrap;
}

.intuitive-plan-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.intuitive-plan-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 21px;
    border: 1px solid #dbe4ee;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
}

.intuitive-plan-card.is-small-plan {
    border-top: 4px solid #20383b;
}

.intuitive-plan-card.is-prime-plan {
    border-top: 4px solid #a37200;
}

.intuitive-plan-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
}

.intuitive-plan-card-header h3 {
    margin: 10px 0 0;
    font-size: 21px;
}

.intuitive-plan-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.intuitive-plan-badges span {
    display: inline-flex;
    padding: 5px 8px;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 800;
}

.intuitive-plan-type-badge {
    background: #dfe9e6;
    color: #20383b;
}

.is-prime-plan .intuitive-plan-type-badge {
    background: #fff0c9;
    color: #805d00;
}

.intuitive-plan-duration-badge {
    background: #f1f5f9;
    color: #475569;
}

.intuitive-plan-value-badge {
    background: #ecfdf3;
    color: #15803d;
}

.intuitive-plan-price {
    text-align: right;
    white-space: nowrap;
}

.intuitive-plan-price span,
.intuitive-plan-price strong,
.intuitive-plan-price small {
    display: block;
}

.intuitive-plan-price span {
    color: #64748b;
    font-size: 16px;
}

.intuitive-plan-price strong {
    margin-top: 2px;
    font-size: 28px;
    color: #0f172a;
}

.intuitive-plan-price small {
    margin-top: 4px;
    color: #64748b;
    font-size: 15px;
}

.intuitive-plan-key-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
    margin-top: 18px;
}

.intuitive-plan-key-grid > div {
    min-width: 0;
    padding: 11px;
    border-radius: 10px;
    background: #f8fafc;
}

.intuitive-plan-key-grid span,
.intuitive-plan-key-grid strong {
    display: block;
}

.intuitive-plan-key-grid span {
    margin-bottom: 4px;
    color: #64748b;
    font-size: 15px;
}

.intuitive-plan-key-grid strong {
    font-size: 17px;
    line-height: 1.5;
}

.intuitive-plan-description {
    margin: 16px 0 0;
    color: #475569;
    line-height: 1.75;
}

.intuitive-plan-policy {
    display: flex;
    gap: 12px;
    margin-top: 17px;
    padding: 14px;
    border-radius: 12px;
}

.is-small-policy {
    background: #eef4f1;
}

.is-prime-policy {
    background: #fff8e8;
}

.intuitive-plan-policy-icon {
    display: grid;
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 50%;
    background: #20383b;
    color: #ffffff;
    font-weight: 900;
}

.is-prime-policy .intuitive-plan-policy-icon {
    background: #a37200;
}

.intuitive-plan-policy strong {
    display: block;
}

.intuitive-plan-policy p {
    margin: 5px 0 0;
    color: #475569;
    line-height: 1.65;
}

.intuitive-plan-policy small {
    display: block;
    margin-top: 6px;
    color: #64748b;
}

.intuitive-plan-actions {
    display: flex;
    gap: 10px;
    margin-top: auto;
    padding-top: 18px;
}

.intuitive-plan-info-link,
.intuitive-plan-subscribe-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 11px 15px;
    border-radius: 11px;
    font-weight: 800;
    text-decoration: none;
}

.intuitive-plan-info-link {
    background: #e8eef7;
    color: #1e3a5f;
}

.intuitive-plan-subscribe-button {
    flex: 1;
    background: #20383b;
    color: #ffffff;
}

.is-prime-plan .intuitive-plan-subscribe-button {
    background: #8a6200;
}

@media (max-width: 900px) {
    .intuitive-plans-hero {
        align-items: flex-start;
        flex-direction: column;
    }

    .intuitive-plans-step-list {
        flex-wrap: wrap;
    }

    .intuitive-plan-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 700px) {
    .intuitive-plan-comparison,
    .intuitive-bag-guide-content {
        grid-template-columns: 1fr;
    }

    .intuitive-bag-guide-image {
        max-height: 300px;
    }

    .intuitive-bag-guide-image img {
        height: 300px;
    }
}

@media (max-width: 560px) {
    .intuitive-plans-hero,
    .intuitive-plan-card,
    .intuitive-bag-guide-content {
        padding: 17px;
    }

    .intuitive-plans-step-list {
        display: grid;
        width: 100%;
    }

    .intuitive-plan-section-heading,
    .intuitive-plan-card-header,
    .intuitive-plan-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .intuitive-plan-price {
        text-align: left;
    }

    .intuitive-plan-key-grid {
        grid-template-columns: 1fr;
    }

    .intuitive-plan-info-link,
    .intuitive-plan-subscribe-button {
        width: 100%;
    }
}

/* =========================
   訂閱設定：步驟式直觀介面
========================= */

.subscription-step-page {
    max-width: 920px;
}

.subscription-step-card {
    padding: 26px;
}

.subscription-step-heading h1 {
    margin: 5px 0 8px;
}

.subscription-step-heading p {
    margin: 0;
    color: #64748b;
    line-height: 1.7;
}

.subscription-step-progress {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin: 22px 0;
}

.subscription-step-progress span {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 12px;
    background: #f1f5f9;
    color: #64748b;
    font-size: 17px;
    font-weight: 800;
}

.subscription-step-progress strong {
    display: grid;
    width: 25px;
    height: 25px;
    place-items: center;
    border-radius: 50%;
    background: #cbd5e1;
    color: #ffffff;
}

.subscription-step-progress .is-active {
    background: #eef4f1;
    color: #20383b;
}

.subscription-step-progress .is-active strong {
    background: #20383b;
}

.subscription-form-step {
    margin-top: 18px;
    padding: 20px;
    border: 1px solid #dbe4ee;
    border-radius: 16px;
    background: #ffffff;
}

.subscription-form-step-title {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 16px;
}

.subscription-form-step-title > span {
    display: grid;
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 50%;
    background: #20383b;
    color: #ffffff;
    font-weight: 900;
}

.subscription-form-step-title h2 {
    margin: 0;
    font-size: 20px;
}

.subscription-form-step-title p {
    margin: 5px 0 0;
    color: #64748b;
    line-height: 1.6;
}

.subscription-selected-plan {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(160px, 0.5fr);
    gap: 14px;
    padding: 17px;
    border-radius: 13px;
    background: #f8fafc;
}

.subscription-selected-plan-main h3 {
    margin: 9px 0 5px;
    font-size: 21px;
}

.subscription-selected-plan-main p {
    margin: 0;
    color: #64748b;
    line-height: 1.65;
}

.subscription-selected-plan-price {
    text-align: right;
}

.subscription-selected-plan-price span,
.subscription-selected-plan-price strong {
    display: block;
}

.subscription-selected-plan-price span {
    color: #64748b;
    font-size: 16px;
}

.subscription-selected-plan-price strong {
    margin-top: 4px;
    font-size: 27px;
}

.subscription-selected-plan-facts {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
}

.subscription-selected-plan-facts > div {
    padding: 11px;
    border-radius: 10px;
    background: #ffffff;
}

.subscription-selected-plan-facts span,
.subscription-selected-plan-facts strong {
    display: block;
}

.subscription-selected-plan-facts span {
    margin-bottom: 4px;
    color: #64748b;
    font-size: 15px;
}

.subscription-date-box {
    max-width: 360px;
}

.subscription-schedule-card-list {
    display: grid;
    gap: 12px;
}

.subscription-schedule-card {
    padding: 15px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #f8fafc;
}

.subscription-schedule-card-number {
    display: inline-flex;
    margin-bottom: 12px;
    padding: 5px 9px;
    border-radius: 999px;
    background: #dfe9e6;
    color: #20383b;
    font-size: 16px;
    font-weight: 800;
}

.subscription-schedule-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.subscription-schedule-warning {
    margin: 12px 0 0;
    color: #64748b;
    font-size: 17px;
}

.subscription-prime-bag-card {
    display: flex;
    gap: 14px;
    padding: 17px;
    border-radius: 13px;
    background: #fff8e8;
}

.subscription-prime-bag-icon {
    display: grid;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: 50%;
    background: #9a6b00;
    color: #ffffff;
    font-size: 18px;
    font-weight: 900;
}

.subscription-prime-bag-card strong {
    display: block;
}

.subscription-prime-bag-card p {
    margin: 6px 0;
    color: #5f5130;
    line-height: 1.65;
}

.subscription-prime-bag-card small {
    color: #7a6940;
}

.subscription-bag-overview {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr);
    gap: 17px;
    padding: 16px;
    border-radius: 13px;
    background: #eef4f1;
}

.subscription-bag-overview-image {
    display: block;
    overflow: hidden;
    border-radius: 11px;
    background: #ffffff;
}

.subscription-bag-overview-image img {
    display: block;
    width: 100%;
    height: 180px;
    object-fit: contain;
}

.subscription-bag-overview-content > span {
    display: inline-flex;
    padding: 5px 8px;
    border-radius: 999px;
    background: #dfe9e6;
    color: #20383b;
    font-size: 15px;
    font-weight: 800;
}

.subscription-bag-overview-content h3 {
    margin: 10px 0 7px;
}

.subscription-bag-overview-content p {
    margin: 0;
    color: #475569;
    line-height: 1.7;
}

.subscription-bag-overview-content a {
    display: inline-flex;
    margin-top: 11px;
    color: #20383b;
    font-weight: 800;
    text-decoration: none;
}

.subscription-addon-choice {
    margin-top: 15px;
}

.subscription-addon-choice > h3 {
    margin: 0 0 11px;
    font-size: 18px;
}

.subscription-addon-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.subscription-addon-option {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px;
    border: 1px solid #dbe4ee;
    border-radius: 11px;
    background: #ffffff;
    cursor: pointer;
}

.subscription-addon-option:has(input:checked) {
    border-color: #20383b;
    background: #eef4f1;
}

.subscription-addon-option input {
    margin-top: 3px;
}

.subscription-addon-option strong,
.subscription-addon-option small {
    display: block;
}

.subscription-addon-option small {
    margin-top: 4px;
    color: #64748b;
}

.subscription-addon-quantity {
    margin-top: 13px;
    padding: 15px;
    border-radius: 12px;
    background: #f8fafc;
}

.subscription-quantity-control > span {
    display: block;
    margin-bottom: 8px;
    font-weight: 800;
}

.subscription-quantity-control > div {
    display: grid;
    grid-template-columns: 44px 100px 44px;
    gap: 8px;
}

.subscription-quantity-control button {
    border: 0;
    border-radius: 10px;
    background: #e2e8f0;
    color: #1e293b;
    font-size: 22px;
    font-weight: 800;
    cursor: pointer;
}

.subscription-quantity-control input {
    text-align: center;
}

.subscription-quantity-control small {
    display: block;
    margin-top: 8px;
    color: #64748b;
}

.subscription-addon-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
    margin-top: 13px;
}

.subscription-addon-summary > div {
    padding: 11px;
    border-radius: 10px;
    background: #ffffff;
}

.subscription-addon-summary span,
.subscription-addon-summary strong {
    display: block;
}

.subscription-addon-summary span {
    margin-bottom: 4px;
    color: #64748b;
    font-size: 15px;
}

.subscription-addon-summary strong {
    font-size: 18px;
}

.subscription-final-terms {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 15px;
    border: 1px solid #dbe4ee;
    border-radius: 12px;
    background: #f8fafc;
    cursor: pointer;
}

.subscription-final-terms input {
    margin-top: 4px;
}

.subscription-final-terms strong,
.subscription-final-terms small {
    display: block;
}

.subscription-final-terms small {
    margin-top: 5px;
}

.subscription-final-terms a {
    color: #20383b;
    font-weight: 800;
}

.subscription-step-submit {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    margin-top: 20px;
    padding: 17px;
    border-radius: 14px;
    background: #eef5ff;
}

.subscription-step-submit span,
.subscription-step-submit strong {
    display: block;
}

.subscription-step-submit span {
    color: #64748b;
    font-size: 16px;
}

.subscription-step-submit strong {
    margin-top: 3px;
}

.subscription-step-submit .login-button {
    width: auto;
    margin: 0;
    white-space: nowrap;
}

@media (max-width: 720px) {
    .subscription-selected-plan,
    .subscription-bag-overview {
        grid-template-columns: 1fr;
    }

    .subscription-selected-plan-price {
        text-align: left;
    }

    .subscription-selected-plan-facts,
    .subscription-addon-summary {
        grid-template-columns: 1fr;
    }

    .subscription-bag-overview-image img {
        height: 260px;
    }
}

@media (max-width: 560px) {
    .subscription-step-card {
        padding: 16px;
    }

    .subscription-step-progress,
    .subscription-addon-options,
    .subscription-schedule-fields {
        grid-template-columns: 1fr;
    }

    .subscription-step-progress span {
        justify-content: flex-start;
    }

    .subscription-form-step {
        padding: 15px;
    }

    .subscription-step-submit {
        align-items: stretch;
        flex-direction: column;
    }

    .subscription-step-submit .login-button {
        width: 100%;
    }
}

/* =========================
   最後確認訂單：直觀介面
========================= */

.final-confirm-page {
    max-width: 920px;
}

.final-confirm-card {
    padding: 26px;
}

.final-confirm-heading h1 {
    margin: 5px 0 8px;
}

.final-confirm-heading p {
    margin: 0;
    color: #64748b;
    line-height: 1.7;
}

.final-confirm-section {
    margin-top: 18px;
    padding: 20px;
    border: 1px solid #dbe4ee;
    border-radius: 16px;
    background: #ffffff;
}

.final-confirm-section-title {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 16px;
}

.final-confirm-section-title > span {
    display: grid;
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 50%;
    background: #20383b;
    color: #ffffff;
    font-weight: 900;
}

.final-confirm-section-title h2 {
    margin: 0;
    font-size: 20px;
}

.final-confirm-section-title p {
    margin: 5px 0 0;
    color: #64748b;
}

.final-confirm-plan {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 16px;
    padding: 16px;
    border-radius: 13px;
    background: #f8fafc;
}

.final-confirm-plan h3 {
    margin: 9px 0 5px;
    font-size: 21px;
}

.final-confirm-plan p {
    margin: 0;
    color: #64748b;
    line-height: 1.65;
}

.final-confirm-plan-price {
    text-align: right;
    white-space: nowrap;
}

.final-confirm-plan-price span,
.final-confirm-plan-price strong {
    display: block;
}

.final-confirm-plan-price span {
    color: #64748b;
    font-size: 16px;
}

.final-confirm-plan-price strong {
    margin-top: 4px;
    font-size: 27px;
}

.final-confirm-facts {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 9px;
    margin-top: 12px;
}

.final-confirm-facts > div {
    padding: 11px;
    border-radius: 10px;
    background: #f8fafc;
}

.final-confirm-facts span,
.final-confirm-facts strong {
    display: block;
}

.final-confirm-facts span {
    margin-bottom: 4px;
    color: #64748b;
    font-size: 15px;
}

.final-confirm-schedule-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.final-confirm-schedule-item {
    padding: 14px;
    border-radius: 11px;
    background: #f8fafc;
}

.final-confirm-schedule-item span,
.final-confirm-schedule-item strong,
.final-confirm-schedule-item small {
    display: block;
}

.final-confirm-schedule-item span {
    color: #20383b;
    font-size: 16px;
    font-weight: 800;
}

.final-confirm-schedule-item strong {
    margin-top: 6px;
}

.final-confirm-schedule-item small {
    margin-top: 4px;
    color: #64748b;
}

.final-confirm-prime-bag {
    padding: 16px;
    border-radius: 12px;
    background: #fff8e8;
}

.final-confirm-prime-bag strong {
    display: block;
}

.final-confirm-prime-bag p {
    margin: 6px 0 0;
    color: #5f5130;
    line-height: 1.65;
}

.final-confirm-bag-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 9px;
}

.final-confirm-bag-grid > div {
    padding: 11px;
    border-radius: 10px;
    background: #f8fafc;
}

.final-confirm-bag-grid span,
.final-confirm-bag-grid strong {
    display: block;
}

.final-confirm-bag-grid span {
    margin-bottom: 4px;
    color: #64748b;
    font-size: 15px;
}

.final-confirm-bag-total {
    background: #eefbf3 !important;
}

.final-confirm-bag-total strong {
    color: #15803d;
}

.final-confirm-bag-rule {
    margin: 12px 0 0;
    padding: 12px;
    border-radius: 10px;
    background: #fff4f2;
    color: #b42318;
    font-weight: 800;
    line-height: 1.65;
}

.final-confirm-payment {
    margin-top: 18px;
    padding: 20px;
    border: 2px solid #20383b;
    border-radius: 18px;
    background: #f8fbff;
}

.final-confirm-payment-heading {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 15px;
}

.final-confirm-payment-heading h2 {
    margin: 5px 0 6px;
}

.final-confirm-payment-heading p {
    margin: 0;
    color: #64748b;
}

.final-confirm-coin-balance {
    padding: 11px 14px;
    border-radius: 11px;
    background: #ffffff;
    text-align: right;
}

.final-confirm-coin-balance span,
.final-confirm-coin-balance strong {
    display: block;
}

.final-confirm-coin-balance span {
    color: #64748b;
    font-size: 15px;
}

.final-confirm-coin-balance strong {
    margin-top: 4px;
    color: #20383b;
    font-size: 20px;
}

.final-confirm-coin-control {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 12px;
    margin-top: 18px;
}

.final-confirm-coin-control .form-group {
    margin: 0;
}

.final-confirm-price-breakdown {
    margin-top: 18px;
    overflow: hidden;
    border: 1px solid #dbe4ee;
    border-radius: 13px;
    background: #ffffff;
}

.final-confirm-price-breakdown > div {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    padding: 13px 15px;
    border-bottom: 1px solid #e2e8f0;
}

.final-confirm-price-breakdown > div:last-child {
    border-bottom: 0;
}

.final-confirm-payable-row {
    background: #eefbf3;
}

.final-confirm-payable-row span,
.final-confirm-payable-row strong {
    color: #15803d;
    font-size: 19px;
}

.final-confirm-payment-note {
    margin-top: 14px;
    padding: 12px;
    border-radius: 10px;
    background: #ffffff;
    color: #475569;
    line-height: 1.65;
}

.final-confirm-payment .login-button {
    margin-top: 15px;
}

@media (max-width: 760px) {
    .final-confirm-facts,
    .final-confirm-bag-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .final-confirm-schedule-list {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    .final-confirm-card {
        padding: 16px;
    }

    .final-confirm-section,
    .final-confirm-payment {
        padding: 15px;
    }

    .final-confirm-plan,
    .final-confirm-coin-control {
        grid-template-columns: 1fr;
    }

    .final-confirm-plan-price,
    .final-confirm-coin-balance {
        text-align: left;
    }

    .final-confirm-facts,
    .final-confirm-bag-grid {
        grid-template-columns: 1fr;
    }

    .final-confirm-payment-heading {
        flex-direction: column;
    }
}

/* =========================
   銀行轉帳：直觀付款介面
========================= */

.payment-step-page {
    max-width: 880px;
}

.payment-step-card {
    padding: 26px;
}

.payment-step-heading h1 {
    margin: 5px 0 8px;
}

.payment-step-heading p {
    margin: 0;
    color: #64748b;
    line-height: 1.7;
}

.payment-focus-card {
    margin-top: 20px;
    padding: 27px;
    border-radius: 18px;
    background: #20383b;
    color: #ffffff;
    text-align: center;
    box-shadow: 0 14px 32px rgba(29, 78, 216, 0.22);
}

.payment-focus-card > span,
.payment-focus-card > strong,
.payment-focus-card > small {
    display: block;
}

.payment-focus-card > span {
    font-size: 17px;
    font-weight: 800;
    opacity: 0.88;
}

.payment-focus-card > strong {
    margin-top: 7px;
    font-size: 44px;
    line-height: 1.2;
}

.payment-focus-card > small {
    margin-top: 13px;
    opacity: 0.78;
}

.payment-focus-copy-button,
.payment-bank-copy-button {
    min-height: 42px;
    padding: 9px 14px;
    border: 0;
    border-radius: 10px;
    font-weight: 800;
    cursor: pointer;
}

.payment-focus-copy-button {
    margin-top: 15px;
    background: #ffffff;
    color: #20383b;
}

.payment-summary-section,
.payment-bag-section,
.payment-bank-section,
.payment-submit-section {
    margin-top: 18px;
    padding: 20px;
    border: 1px solid #dbe4ee;
    border-radius: 16px;
    background: #ffffff;
}

.payment-section-heading {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 15px;
}

.payment-section-heading h2 {
    margin: 4px 0 0;
}

.payment-section-heading p {
    margin: 5px 0 0;
    color: #64748b;
    line-height: 1.6;
}

.payment-section-heading > a {
    color: #20383b;
    font-weight: 800;
    text-decoration: none;
}

.payment-plan-name {
    padding: 6px 10px;
    border-radius: 999px;
    background: #f1f5f9;
    color: #475569;
    font-size: 16px;
    font-weight: 800;
}

.payment-breakdown-list {
    overflow: hidden;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
}

.payment-breakdown-list > div {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    padding: 13px 15px;
    border-bottom: 1px solid #e2e8f0;
}

.payment-breakdown-list > div:last-child {
    border-bottom: 0;
}

.payment-discount-value {
    color: #dc2626;
}

.payment-breakdown-total {
    background: #eefbf3;
}

.payment-breakdown-total span,
.payment-breakdown-total strong {
    color: #15803d;
    font-size: 19px;
}

.payment-bag-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.payment-bag-grid > div {
    padding: 13px;
    border-radius: 11px;
    background: #f8fafc;
}

.payment-bag-grid span,
.payment-bag-grid strong {
    display: block;
}

.payment-bag-grid span {
    margin-bottom: 5px;
    color: #64748b;
    font-size: 16px;
}

.payment-bag-rule {
    margin: 12px 0 0;
    padding: 12px;
    border-radius: 10px;
    background: #fff4f2;
    color: #b42318;
    font-weight: 800;
    line-height: 1.7;
}

.payment-prime-bag-notice {
    padding: 15px;
    border-radius: 11px;
    background: #fff8e8;
}

.payment-prime-bag-notice strong {
    display: block;
}

.payment-prime-bag-notice p {
    margin: 6px 0 0;
    color: #66562f;
    line-height: 1.65;
}

.payment-bank-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.payment-bank-grid > div {
    padding: 13px;
    border-radius: 11px;
    background: #f8fafc;
}

.payment-bank-grid span,
.payment-bank-grid strong {
    display: block;
}

.payment-bank-grid span {
    margin-bottom: 5px;
    color: #64748b;
    font-size: 16px;
}

.payment-bank-account {
    margin-top: 12px;
    padding: 17px;
    border: 2px solid #20383b;
    border-radius: 13px;
    background: #eef4f1;
    text-align: center;
}

.payment-bank-account > span,
.payment-bank-account > strong {
    display: block;
}

.payment-bank-account > span {
    color: #64748b;
    font-size: 16px;
}

.payment-bank-account > strong {
    margin: 7px 0 12px;
    color: #20383b;
    font-size: 25px;
    word-break: break-all;
}

.payment-bank-copy-button {
    background: #20383b;
    color: #ffffff;
}

.payment-warning-box {
    margin-bottom: 15px;
    padding: 14px;
    border-radius: 11px;
    background: #fff8e8;
}

.payment-warning-box strong {
    display: block;
    color: #a16207;
    font-size: 18px;
}

.payment-warning-box p {
    margin: 6px 0 0;
    color: #725b29;
    line-height: 1.65;
}

.payment-last5-field label,
.payment-last5-field small {
    display: block;
}

.payment-last5-field label {
    margin-bottom: 8px;
    font-weight: 800;
}

.payment-last5-field input {
    width: 100%;
    min-height: 60px;
    text-align: center;
    letter-spacing: 14px;
    font-size: 25px;
    font-weight: 900;
}

.payment-last5-field small {
    margin-top: 8px;
    color: #64748b;
}

.payment-primary-action,
.payment-secondary-action {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 50px;
    margin-top: 16px;
    padding: 12px 18px;
    border: 0;
    border-radius: 12px;
    font-size: 17px;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
}

.payment-primary-action {
    background: #20383b;
    color: #ffffff;
}

.payment-secondary-action {
    background: #e8eef7;
    color: #1e3a5f;
}

.payment-state-card {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-top: 18px;
    padding: 18px;
    border-radius: 14px;
}

.payment-state-card.is-reviewing {
    background: #eef5ff;
}

.payment-state-card.is-paid {
    background: #eefbf3;
}

.payment-state-card.is-error {
    background: #fff1f2;
}

.payment-state-icon {
    display: grid;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    place-items: center;
    border-radius: 50%;
    background: #20383b;
    color: #ffffff;
    font-size: 20px;
    font-weight: 900;
}

.is-paid .payment-state-icon {
    background: #16a34a;
}

.is-error .payment-state-icon {
    background: #dc2626;
}

.payment-state-card strong {
    display: block;
    font-size: 18px;
}

.payment-state-card p {
    margin: 6px 0 0;
    color: #475569;
    line-height: 1.65;
}

.payment-review-details {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 13px;
}

.payment-review-details > div {
    padding: 13px;
    border-radius: 11px;
    background: #f8fafc;
}

.payment-review-details span,
.payment-review-details strong {
    display: block;
}

.payment-review-details span {
    margin-bottom: 5px;
    color: #64748b;
    font-size: 16px;
}

.payment-review-status {
    color: #20383b;
}

@media (max-width: 650px) {
    .payment-step-card {
        padding: 16px;
    }

    .payment-focus-card {
        padding: 22px 15px;
    }

    .payment-focus-card > strong {
        font-size: 36px;
    }

    .payment-summary-section,
    .payment-bag-section,
    .payment-bank-section,
    .payment-submit-section {
        padding: 15px;
    }

    .payment-section-heading {
        flex-direction: column;
    }

    .payment-bag-grid,
    .payment-bank-grid,
    .payment-review-details {
        grid-template-columns: 1fr;
    }

    .payment-last5-field input {
        letter-spacing: 9px;
    }
}
/* =========================================================
   DisTrash UI 2.0 — Brand Design System
   Logo-inspired ink green, geometric curves and calm whitespace
   ========================================================= */

:root {
    --dt-ink: #20383b;
    --dt-ink-strong: #172b2e;
    --dt-ink-soft: #31565a;
    --dt-sage: #7f9b95;
    --dt-mist: #dfe9e6;
    --dt-mist-soft: #eef4f1;
    --dt-paper: #fbfcfa;
    --dt-surface: #ffffff;
    --dt-warm: #f4f4ef;
    --dt-line: #d9e2df;
    --dt-muted: #687775;
    --dt-text: #203033;
    --dt-gold: #d9b75f;
    --dt-gold-soft: #fff6d6;
    --dt-success: #2f7a55;
    --dt-danger: #b94b4b;
    --dt-warning: #a76d20;

    --dt-radius-xs: 10px;
    --dt-radius-sm: 14px;
    --dt-radius-md: 20px;
    --dt-radius-lg: 28px;
    --dt-radius-xl: 38px;

    --dt-shadow-sm: 0 8px 22px rgba(23, 43, 46, .06);
    --dt-shadow-md: 0 16px 38px rgba(23, 43, 46, .09);
    --dt-shadow-lg: 0 24px 58px rgba(23, 43, 46, .13);
}

/* ---------- Foundation ---------- */

html {
    scroll-behavior: smooth;
    background: var(--dt-paper);
}

body,
.member-body,
.admin-body,
.plans-body,
.form-page-body,
.payment-page-body {
    background:
        radial-gradient(
            circle at 8% 4%,
            rgba(127, 155, 149, .12),
            transparent 24%
        ),
        radial-gradient(
            circle at 92% 96%,
            rgba(32, 56, 59, .07),
            transparent 25%
        ),
        var(--dt-paper);
    color: var(--dt-text);
}

body {
    font-family:
        "Inter",
        "Noto Sans TC",
        "Microsoft JhengHei",
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        sans-serif;
    letter-spacing: .005em;
}

::selection {
    background: var(--dt-ink);
    color: #fff;
}

a {
    color: var(--dt-ink-soft);
}

a:hover {
    color: var(--dt-ink-strong);
}

h1,
h2,
h3,
h4,
strong {
    color: var(--dt-ink-strong);
}

.card-label,
.admin-label,
.welcome-label,
.state-kicker {
    color: var(--dt-ink-soft) !important;
    letter-spacing: .16em;
}

/* ---------- Brand geometry ---------- */

.login-card,
.form-card,
.welcome-card,
.profile-card,
.action-card,
.admin-panel,
.plan-card,
.order-card,
.history-card,
.current-subscription-card,
.no-subscription-card,
.payment-panel,
.payment-state-card,
.member-coin-balance-card,
.member-reward-card,
.member-coin-recent-card,
.member-subscription-summary,
.subscription-summary-content,
.admin-detail-card,
.transfer-review-admin-card {
    position: relative;
    overflow: hidden;
}

.login-card::after,
.form-card::after,
.welcome-card::after,
.admin-panel::after,
.plan-card::after,
.payment-panel::after,
.member-coin-balance-card::after,
.member-subscription-summary::after {
    content: "";
    position: absolute;
    top: 18px;
    right: 20px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--dt-ink);
    box-shadow:
        -20px 0 0 rgba(32, 56, 59, .55),
        -40px 0 0 rgba(32, 56, 59, .20);
    pointer-events: none;
    opacity: .75;
}

/* ---------- Header / Navigation ---------- */

.member-header {
    border-bottom: 1px solid rgba(32, 56, 59, .10);
    background: rgba(251, 252, 250, .91);
    backdrop-filter: blur(18px);
}

.admin-header {
    background: var(--dt-ink-strong);
    box-shadow: 0 8px 26px rgba(23, 43, 46, .16);
}

.website-name,
.admin-logo {
    color: var(--dt-ink) !important;
    font-weight: 900;
    letter-spacing: .02em;
}

.admin-logo {
    color: #fff !important;
}

.header-logout,
.admin-user a {
    border-radius: 999px;
}

.header-logout {
    border: 1px solid var(--dt-line);
    background: var(--dt-mist-soft);
    color: var(--dt-ink) !important;
}

.header-logout:hover {
    border-color: var(--dt-ink);
    background: var(--dt-ink);
    color: #fff !important;
}

.admin-user a {
    color: #dce8e5;
}

.admin-user a:hover {
    color: #fff;
}

/* ---------- Main cards ---------- */

.login-card,
.form-card,
.profile-card,
.action-card,
.admin-panel,
.plan-card,
.order-card,
.history-card,
.current-subscription-card,
.no-subscription-card,
.payment-panel,
.payment-state-card,
.member-coin-balance-card,
.member-reward-card,
.member-coin-recent-card,
.member-subscription-summary,
.admin-detail-card,
.transfer-review-admin-card {
    border: 1px solid rgba(32, 56, 59, .10);
    background: rgba(255, 255, 255, .96);
    box-shadow: var(--dt-shadow-sm);
}

.login-card,
.form-card {
    border-radius: var(--dt-radius-lg);
}

.profile-card,
.action-card,
.admin-panel,
.plan-card,
.order-card,
.history-card,
.current-subscription-card,
.no-subscription-card,
.payment-panel,
.payment-state-card,
.member-coin-balance-card,
.member-reward-card,
.member-coin-recent-card,
.member-subscription-summary,
.admin-detail-card,
.transfer-review-admin-card {
    border-radius: var(--dt-radius-md);
}

.login-card:hover,
.form-card:hover,
.plan-card:hover,
.order-card:hover,
.action-link:hover {
    border-color: rgba(32, 56, 59, .24);
    box-shadow: var(--dt-shadow-md);
}

/* ---------- Welcome / hero ---------- */

.welcome-card,
.member-count-card,
.payment-amount-hero {
    background:
        radial-gradient(
            circle at 88% 24%,
            rgba(255, 255, 255, .16) 0 9%,
            transparent 10%
        ),
        radial-gradient(
            circle at 74% 72%,
            rgba(255, 255, 255, .10) 0 7%,
            transparent 8%
        ),
        linear-gradient(
            135deg,
            var(--dt-ink-strong),
            var(--dt-ink-soft)
        );
    color: #fff;
    box-shadow: var(--dt-shadow-lg);
}

.welcome-card h1,
.welcome-card strong,
.member-count-card strong,
.payment-amount-hero strong {
    color: #fff;
}

.member-avatar {
    border-radius: 32% 56% 44% 42%;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .25);
}

/* ---------- Inputs ---------- */

.form-group input,
.form-select,
.form-textarea,
.admin-search-form input,
.admin-order-filter input,
.admin-order-filter select,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="tel"],
select,
textarea {
    border: 1px solid var(--dt-line);
    border-radius: var(--dt-radius-sm);
    background: var(--dt-surface);
    color: var(--dt-text);
    box-shadow: inset 0 1px 0 rgba(32, 56, 59, .02);
}

.form-group input:focus,
.form-select:focus,
.form-textarea:focus,
.admin-search-form input:focus,
.admin-order-filter input:focus,
.admin-order-filter select:focus,
input:focus,
select:focus,
textarea:focus {
    border-color: var(--dt-ink-soft);
    box-shadow:
        0 0 0 4px rgba(49, 86, 90, .12);
}

input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--dt-ink);
}

/* ---------- Buttons ---------- */

.login-button,
.reset-link-button,
.plan-subscribe-button,
.subscription-primary-button,
.subscription-summary-primary,
.payment-primary-button,
.transfer-approve-button,
.admin-create-button,
.admin-plan-create-button,
.admin-plan-edit-button,
.edit-button,
.admin-search-form button,
.admin-order-filter button {
    border: 1px solid var(--dt-ink);
    border-radius: var(--dt-radius-sm);
    background: var(--dt-ink);
    color: #fff !important;
    box-shadow: 0 10px 24px rgba(32, 56, 59, .18);
    transition:
        transform .2s ease,
        box-shadow .2s ease,
        background .2s ease;
}

.login-button:hover,
.reset-link-button:hover,
.plan-subscribe-button:hover,
.subscription-primary-button:hover,
.subscription-summary-primary:hover,
.payment-primary-button:hover,
.transfer-approve-button:hover,
.admin-create-button:hover,
.admin-plan-create-button:hover,
.admin-plan-edit-button:hover,
.edit-button:hover,
.admin-search-form button:hover,
.admin-order-filter button:hover {
    transform: translateY(-2px);
    background: var(--dt-ink-strong);
    box-shadow: 0 15px 30px rgba(32, 56, 59, .24);
}

.subscription-secondary-button,
.payment-secondary-button,
.table-edit-button,
.copy-button,
.payment-copy,
.coin-quick-actions button,
.admin-plan-toggle-button {
    border: 1px solid var(--dt-line);
    border-radius: var(--dt-radius-sm);
    background: var(--dt-mist-soft);
    color: var(--dt-ink) !important;
}

.subscription-secondary-button:hover,
.payment-secondary-button:hover,
.table-edit-button:hover,
.copy-button:hover,
.payment-copy:hover,
.coin-quick-actions button:hover,
.admin-plan-toggle-button:hover {
    border-color: var(--dt-ink);
    background: var(--dt-ink);
    color: #fff !important;
}

/* ---------- Action links ---------- */

.action-link {
    border: 1px solid var(--dt-line);
    border-radius: var(--dt-radius-sm);
    background: #fff;
}

.action-link:hover {
    border-color: var(--dt-sage);
    background: var(--dt-mist-soft);
}

.action-link strong,
.subscription-action-link strong,
.admin-action-link strong {
    color: var(--dt-ink);
}

/* ---------- Tables ---------- */

.member-table {
    border-spacing: 0;
    border-collapse: separate;
    border-radius: var(--dt-radius-sm);
    overflow: hidden;
}

.member-table th {
    background: var(--dt-mist-soft);
    color: var(--dt-ink);
}

.member-table th,
.member-table td {
    border-bottom-color: var(--dt-line);
}

.member-table tbody tr:hover {
    background: #f5f8f6;
}

/* ---------- Plans ---------- */

.plans-heading h1,
.subscription-heading h1,
.history-heading h1 {
    color: var(--dt-ink-strong);
}

.plan-card {
    border-radius: var(--dt-radius-lg);
}

.plan-card:hover {
    border-color: var(--dt-sage);
    box-shadow: var(--dt-shadow-lg);
}

.plan-price,
.subscribe-price,
.subscription-price-box strong,
.subscription-stat-card strong {
    color: var(--dt-ink) !important;
}

.plan-duration,
.subscription-price-box,
.subscribe-plan-summary,
.selected-plan-box {
    border-color: var(--dt-line);
    background: var(--dt-mist-soft);
}

.plan-category-badge,
.member-order-category,
.selected-plan-category,
.confirm-plan-category {
    background: var(--dt-mist-soft);
    color: var(--dt-ink);
}

.prime-category-badge {
    background: var(--dt-ink);
    color: #fff;
}

/* ---------- Coin / rewards ---------- */

.member-coin-balance-card,
.subscription-coin-discount,
.final-confirm-payment,
.admin-plan-reward-box,
.plan-coin-reward {
    border-color: #e4cf85 !important;
    background:
        linear-gradient(
            135deg,
            #fffdf5,
            var(--dt-gold-soft)
        ) !important;
}

.member-coin-balance strong,
.coin-amount-positive,
.admin-plan-reward-box strong {
    color: #735d18 !important;
}

.coin-amount-negative {
    color: var(--dt-danger) !important;
}

/* ---------- Statuses ---------- */

.level-badge,
.plan-status-active,
.subscription-status-active,
.order-status-paid,
.member-reward-status-available {
    background: #e7f3eb;
    color: var(--dt-success);
}

.plan-status-disabled,
.order-status-cancelled,
.member-reward-status-used {
    background: #eef1ef;
    color: var(--dt-muted);
}

.order-status-pending,
.order-status-review,
.subscription-status-upcoming {
    background: #fff2cc;
    color: #8a6518;
}

.order-status-failed,
.subscription-status-cancelled,
.member-reward-status-expired {
    background: #fae8e8;
    color: var(--dt-danger);
}

/* ---------- Notices ---------- */

.success-message,
.admin-message,
.payment-alert.success {
    border-color: #bfd9c9;
    background: #eef8f1;
    color: var(--dt-success);
}

.error-message,
.payment-alert.error {
    border-color: #e7bcbc;
    background: #fff1f1;
    color: var(--dt-danger);
}

.subscription-expiry-alert.warning {
    border-color: #e8cd8c;
    background: #fff8e8;
}

.subscription-expiry-alert.danger {
    border-color: #e3b3b3;
    background: #fff0f0;
}

/* ---------- Payment ---------- */

.checkout-step > span,
.subscription-step-progress strong {
    background: var(--dt-mist-soft);
    color: var(--dt-ink);
}

.checkout-step.is-complete > span,
.checkout-step.is-current > span,
.subscription-step-progress .is-active strong {
    background: var(--dt-ink);
    color: #fff;
}

.checkout-line.is-complete {
    background: var(--dt-ink);
}

.payment-panel-heading,
.final-confirm-section-title {
    border-bottom-color: var(--dt-line);
}

.bank-account-number,
.transfer-last5-value,
.payment-total,
.final-confirm-payable-row strong {
    color: var(--dt-ink);
}

/* ---------- Admin ---------- */

.admin-plan-card,
.order-stat-card,
.subscription-stat-card {
    border-color: var(--dt-line);
    background: #fff;
    box-shadow: var(--dt-shadow-sm);
}

.admin-plan-card-accent {
    background: linear-gradient(
        90deg,
        var(--dt-ink),
        var(--dt-sage)
    ) !important;
}

.admin-plan-card.is-prime
.admin-plan-card-accent {
    background: linear-gradient(
        90deg,
        var(--dt-ink-strong),
        #6e8e89
    ) !important;
}

.admin-plan-category-badge {
    background: var(--dt-mist-soft) !important;
    color: var(--dt-ink) !important;
}

/* ---------- Scrollbar ---------- */

* {
    scrollbar-width: thin;
    scrollbar-color:
        var(--dt-sage)
        var(--dt-mist-soft);
}

*::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

*::-webkit-scrollbar-track {
    background: var(--dt-mist-soft);
}

*::-webkit-scrollbar-thumb {
    border: 2px solid var(--dt-mist-soft);
    border-radius: 999px;
    background: var(--dt-sage);
}

/* ---------- Mobile polish ---------- */

@media (max-width: 700px) {
    .login-card,
    .form-card,
    .welcome-card,
    .profile-card,
    .action-card,
    .admin-panel,
    .plan-card,
    .order-card,
    .payment-panel,
    .payment-state-card {
        border-radius: var(--dt-radius-md);
    }

    .member-header-inner,
    .admin-header-inner {
        gap: 12px;
    }

    .header-user,
    .admin-user {
        gap: 10px;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}


/* =========================================================
   DisTrash UI 2.0 — Contrast Fix Pack
   修正深色價格區塊與所有深色卡片內文字可讀性
   ========================================================= */

/* 方案卡右上角價格框 */
.intuitive-plan-price {
    min-width: 150px;
    padding: 18px 22px;
    border-radius: 24px;
    background: var(--dt-ink-strong);
    text-align: right;
    white-space: nowrap;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .08),
        0 14px 28px rgba(23, 43, 46, .16);
}

.intuitive-plan-price span,
.intuitive-plan-price strong,
.intuitive-plan-price small {
    display: block;
}

.intuitive-plan-price span {
    color: rgba(255, 255, 255, .64) !important;
    font-size: 16px;
    letter-spacing: .08em;
}

.intuitive-plan-price strong {
    margin-top: 4px;
    color: #ffffff !important;
    font-size: clamp(34px, 5vw, 48px);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -.04em;
    text-shadow: 0 1px 0 rgba(0, 0, 0, .12);
}

.intuitive-plan-price small {
    margin-top: 7px;
    color: rgba(255, 255, 255, .72) !important;
    font-size: 15px;
}

/* 舊版方案價格元件若仍被使用，也一併修正 */
.plan-price,
.subscribe-price,
.subscription-selected-plan-price,
.final-confirm-plan-price,
.selected-plan-price,
.payment-main-amount {
    color: var(--dt-ink-strong);
}

.plan-price strong,
.subscribe-price strong,
.subscription-selected-plan-price strong,
.final-confirm-plan-price strong,
.selected-plan-price strong,
.payment-main-amount strong {
    color: inherit !important;
}

/* 深色價格盒中的文字強制為白色 */
.plan-price[style*="background"],
.subscribe-price[style*="background"],
.subscription-selected-plan-price[style*="background"],
.final-confirm-plan-price[style*="background"],
.selected-plan-price[style*="background"] {
    color: #ffffff !important;
}

.plan-price[style*="background"] *,
.subscribe-price[style*="background"] *,
.subscription-selected-plan-price[style*="background"] *,
.final-confirm-plan-price[style*="background"] *,
.selected-plan-price[style*="background"] * {
    color: inherit !important;
}

/* 所有深墨綠背景區塊內，標題與數字保持清楚 */
.welcome-card h1,
.welcome-card h2,
.welcome-card h3,
.welcome-card strong,
.member-count-card h1,
.member-count-card h2,
.member-count-card h3,
.member-count-card strong,
.payment-amount-hero h1,
.payment-amount-hero h2,
.payment-amount-hero h3,
.payment-amount-hero strong,
.admin-header strong,
.admin-header h1,
.admin-header h2,
.admin-header h3 {
    color: #ffffff !important;
}

/* 深色按鈕內所有文字與圖示 */
.login-button *,
.plan-subscribe-button *,
.subscription-primary-button *,
.subscription-summary-primary *,
.payment-primary-button *,
.transfer-approve-button *,
.admin-create-button *,
.admin-plan-create-button *,
.admin-plan-edit-button *,
.edit-button * {
    color: #ffffff !important;
}

/* 方案卡品牌微調 */
.intuitive-plan-card {
    border-radius: 28px;
    border-color: rgba(32, 56, 59, .16);
    box-shadow: 0 16px 38px rgba(23, 43, 46, .08);
}

.intuitive-plan-card:hover {
    transform: translateY(-4px);
    border-color: rgba(32, 56, 59, .30);
    box-shadow: 0 24px 52px rgba(23, 43, 46, .13);
}

.intuitive-plan-card.is-small-plan {
    border-top-color: var(--dt-gold);
}

.intuitive-plan-card.is-prime-plan {
    border-top-color: var(--dt-ink);
}

.intuitive-plan-card-header h3 {
    color: var(--dt-ink-strong) !important;
}

.intuitive-plan-key-grid > div {
    border: 1px solid rgba(32, 56, 59, .08);
    background: #f8faf8;
}

.intuitive-plan-key-grid span {
    color: var(--dt-muted) !important;
}

.intuitive-plan-key-grid strong {
    color: var(--dt-ink-strong) !important;
}

/* 消失垃幣回饋卡 */
.plan-coin-reward,
.intuitive-plan-reward,
.admin-plan-reward-box {
    border-color: #e0bd43 !important;
    background:
        linear-gradient(
            135deg,
            #fff9df 0%,
            #ffefad 100%
        ) !important;
}

.plan-coin-reward strong,
.intuitive-plan-reward strong,
.admin-plan-reward-box strong {
    color: #372b00 !important;
}

.plan-coin-reward span,
.plan-coin-reward small,
.intuitive-plan-reward span,
.intuitive-plan-reward small,
.admin-plan-reward-box span,
.admin-plan-reward-box small {
    color: #765c00 !important;
}

/* 行動裝置：價格框改為橫向完整寬度 */
@media (max-width: 700px) {
    .intuitive-plan-price {
        width: 100%;
        min-width: 0;
        padding: 16px 18px;
        text-align: left;
    }

    .intuitive-plan-price strong {
        font-size: 38px;
    }
}


/* =========================================================
   DisTrash UI 3.0 — Phase 1
   Brand shell, premium plan cards, JPG logo presentation
   ========================================================= */

:root {
    --dt3-ink: #20383b;
    --dt3-ink-deep: #172a2d;
    --dt3-ink-soft: #31565a;
    --dt3-paper: #f6f7f3;
    --dt3-white: #ffffff;
    --dt3-mint: #e8efec;
    --dt3-line: rgba(32, 56, 59, .12);
    --dt3-gold: #d6b652;
    --dt3-gold-deep: #735a00;
    --dt3-gold-soft: #fff2bd;
    --dt3-shadow:
        0 24px 70px rgba(23, 42, 45, .12);
    --dt3-shadow-hover:
        0 34px 90px rgba(23, 42, 45, .18);
}

/* ---------- JPG Logo presentation ---------- */

.brand-logo-link,
.website-name.brand-logo-link,
.admin-logo.brand-logo-link {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
}

.brand-logo-frame {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 10px;
    border: 1px solid rgba(32, 56, 59, .08);
    border-radius: 16px;
    background: #fff;
    box-shadow:
        0 8px 20px rgba(23, 42, 45, .08);
}

.brand-logo-image {
    display: block;
    width: auto;
    height: 48px;
    max-width: 176px;
    object-fit: contain;
}

.member-header .brand-logo-frame {
    background: #fff;
}

.admin-header .brand-logo-frame {
    border-color: rgba(255, 255, 255, .18);
    box-shadow:
        0 10px 24px rgba(0, 0, 0, .16);
}

.brand-logo-text {
    display: flex;
    flex-direction: column;
    line-height: 1.08;
}

.brand-logo-text strong {
    color: var(--dt3-ink-deep);
    font-size: 19px;
    font-weight: 900;
    letter-spacing: .025em;
}

.brand-logo-text small {
    margin-top: 4px;
    color: #6e7b79;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.admin-header .brand-logo-text strong,
.admin-header .brand-logo-text small {
    color: #fff;
}

/* ---------- Premium page atmosphere ---------- */

.plans-body,
.admin-body,
.member-body,
.form-page-body,
.payment-page-body {
    background:
        radial-gradient(
            circle at 10% 0%,
            rgba(49, 86, 90, .10),
            transparent 28%
        ),
        radial-gradient(
            circle at 90% 100%,
            rgba(214, 182, 82, .08),
            transparent 25%
        ),
        var(--dt3-paper);
}

/* ---------- High-end plan card ---------- */

.intuitive-plan-card,
.plan-card,
.admin-plan-card {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--dt3-line);
    border-radius: 32px;
    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, .98),
            rgba(255, 255, 255, .94)
        );
    box-shadow:
        0 18px 52px rgba(23, 42, 45, .09);
    transition:
        transform .28s cubic-bezier(.2, .8, .2, 1),
        box-shadow .28s cubic-bezier(.2, .8, .2, 1),
        border-color .28s ease;
}

.intuitive-plan-card::before,
.plan-card::before,
.admin-plan-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 7px;
    background:
        linear-gradient(
            90deg,
            var(--dt3-ink),
            #77918c
        );
}

.intuitive-plan-card.is-small-plan::before,
.plan-card.is-small-plan::before {
    background:
        linear-gradient(
            90deg,
            var(--dt3-gold),
            #f2d676
        );
}

.intuitive-plan-card:hover,
.plan-card:hover,
.admin-plan-card:hover {
    transform:
        translateY(-8px)
        scale(1.006);
    border-color: rgba(32, 56, 59, .24);
    box-shadow: var(--dt3-shadow-hover);
}

/* ---------- 3D pill badges ---------- */

.intuitive-plan-badges,
.plan-category-row {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

.intuitive-plan-badge,
.plan-category-badge,
.plan-duration-badge,
.admin-plan-category-badge,
.admin-plan-status-badge {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0 13px;
    border: 1px solid rgba(32, 56, 59, .10);
    border-radius: 999px;
    background:
        linear-gradient(
            180deg,
            #fff,
            #eef3f0
        );
    color: var(--dt3-ink);
    font-size: 16px;
    font-weight: 900;
    letter-spacing: .02em;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .95),
        0 5px 12px rgba(23, 42, 45, .08);
}

.prime-category-badge,
.intuitive-plan-badge.is-prime {
    border-color: var(--dt3-ink);
    background:
        linear-gradient(
            180deg,
            #31565a,
            #20383b
        );
    color: #fff;
}

/* ---------- Glossy price panel ---------- */

.intuitive-plan-price,
.plan-price-panel,
.admin-plan-price-panel {
    position: relative;
    min-width: 178px;
    padding: 19px 22px 18px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 24px;
    background:
        linear-gradient(
            145deg,
            #1a1c1c 0%,
            #090a0a 58%,
            #1d2221 100%
        );
    color: #fff;
    text-align: right;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .13),
        inset 0 -1px 0 rgba(0, 0, 0, .52),
        0 18px 34px rgba(5, 12, 13, .24);
}

.intuitive-plan-price::before,
.plan-price-panel::before,
.admin-plan-price-panel::before {
    content: "";
    position: absolute;
    top: -55%;
    left: -25%;
    width: 120%;
    height: 92%;
    transform: rotate(-9deg);
    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, .20),
            rgba(255, 255, 255, .015)
        );
    pointer-events: none;
}

.intuitive-plan-price::after,
.plan-price-panel::after,
.admin-plan-price-panel::after {
    content: "";
    position: absolute;
    right: 18px;
    bottom: 13px;
    width: 42px;
    height: 4px;
    border-radius: 999px;
    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, .52)
        );
}

.intuitive-plan-price span,
.plan-price-panel span,
.admin-plan-price-panel span {
    position: relative;
    z-index: 1;
    display: block;
    color: rgba(255, 255, 255, .68) !important;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: .16em;
}

.intuitive-plan-price strong,
.plan-price-panel strong,
.admin-plan-price-panel strong {
    position: relative;
    z-index: 1;
    display: block;
    margin-top: 2px;
    color: #fff !important;
    font-size: clamp(54px, 6vw, 72px);
    font-weight: 950;
    line-height: .95;
    letter-spacing: -.065em;
    font-variant-numeric: tabular-nums;
    text-shadow:
        0 1px 0 rgba(0, 0, 0, .5),
        0 7px 24px rgba(255, 255, 255, .05);
}

.intuitive-plan-price small,
.plan-price-panel small,
.admin-plan-price-panel small {
    position: absolute;
    top: 18px;
    right: 20px;
    z-index: 2;
    color: rgba(255, 255, 255, .66) !important;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: .12em;
}

/* ---------- VIP reward card ---------- */

.plan-coin-reward,
.intuitive-plan-reward,
.admin-plan-reward-box {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    overflow: hidden;
    padding: 18px 20px;
    border: 1px solid #d2ad34 !important;
    border-radius: 20px;
    background:
        linear-gradient(
            135deg,
            #fff8dc 0%,
            #f5d873 54%,
            #e7c24f 100%
        ) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .92),
        0 14px 28px rgba(151, 113, 0, .16);
}

.plan-coin-reward::before,
.intuitive-plan-reward::before,
.admin-plan-reward-box::before {
    content: "VIP REWARD";
    position: absolute;
    top: 12px;
    right: 16px;
    color: rgba(77, 57, 0, .55);
    font-size: 14px;
    font-weight: 950;
    letter-spacing: .20em;
}

.plan-coin-reward::after,
.intuitive-plan-reward::after,
.admin-plan-reward-box::after {
    content: "";
    position: absolute;
    width: 110px;
    height: 110px;
    right: -48px;
    bottom: -64px;
    border-radius: 50%;
    border: 1px solid rgba(85, 63, 0, .16);
    box-shadow:
        0 0 0 15px rgba(255, 255, 255, .12),
        0 0 0 31px rgba(255, 255, 255, .08);
}

.plan-coin-reward strong,
.intuitive-plan-reward strong,
.admin-plan-reward-box strong {
    position: relative;
    z-index: 1;
    color: #332600 !important;
    font-size: 21px;
    font-weight: 950;
}

.plan-coin-reward span,
.plan-coin-reward small,
.intuitive-plan-reward span,
.intuitive-plan-reward small,
.admin-plan-reward-box span,
.admin-plan-reward-box small {
    position: relative;
    z-index: 1;
    color: #6e5200 !important;
}

.plan-coin-reward .coin-icon,
.intuitive-plan-reward-icon,
.admin-plan-reward-icon {
    display: grid;
    place-items: center;
    width: 50px;
    height: 50px;
    flex: 0 0 auto;
    border-radius: 17px;
    background:
        linear-gradient(
            145deg,
            var(--dt3-ink-deep),
            #2c4d50
        );
    color: #fff;
    font-size: 24px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .15),
        0 10px 20px rgba(23, 42, 45, .20);
}

/* ---------- Premium facts ---------- */

.intuitive-plan-key-grid > div,
.admin-plan-fact,
.plan-information-grid > div {
    border: 1px solid rgba(32, 56, 59, .08);
    border-radius: 17px;
    background:
        linear-gradient(
            180deg,
            #fbfcfa,
            #f0f4f1
        );
    box-shadow:
        inset 0 1px 0 #fff;
}

.intuitive-plan-key-grid > div:hover,
.admin-plan-fact:hover,
.plan-information-grid > div:hover {
    border-color: rgba(32, 56, 59, .18);
    background: #fff;
}

/* ---------- Premium CTAs ---------- */

.plan-subscribe-button,
.admin-plan-edit-button {
    min-height: 54px;
    border-radius: 16px;
    background:
        linear-gradient(
            135deg,
            var(--dt3-ink-deep),
            var(--dt3-ink-soft)
        );
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .13),
        0 14px 28px rgba(23, 42, 45, .22);
}

.plan-subscribe-button:hover,
.admin-plan-edit-button:hover {
    transform: translateY(-2px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .18),
        0 20px 38px rgba(23, 42, 45, .28);
}

/* ---------- Footer shell ---------- */

.distrash-footer {
    margin-top: 70px;
    padding: 54px 20px 34px;
    background:
        radial-gradient(
            circle at 85% 15%,
            rgba(255, 255, 255, .08),
            transparent 24%
        ),
        var(--dt3-ink-deep);
    color: rgba(255, 255, 255, .76);
}

.distrash-footer-inner {
    width: min(1120px, 100%);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.3fr .7fr;
    gap: 34px;
}

.distrash-footer .brand-logo-frame {
    width: fit-content;
    margin-bottom: 18px;
    background: #fff;
}

.distrash-footer h2,
.distrash-footer strong {
    color: #fff;
}

.distrash-footer-tagline {
    max-width: 390px;
    font-size: 24px;
    font-weight: 850;
    line-height: 1.35;
}

.distrash-footer-links {
    display: grid;
    gap: 10px;
    align-content: start;
}

.distrash-footer a {
    color: rgba(255, 255, 255, .78);
    text-decoration: none;
}

.distrash-footer a:hover {
    color: #fff;
}

.distrash-footer-bottom {
    width: min(1120px, 100%);
    margin: 34px auto 0;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, .12);
    font-size: 16px;
}

/* ---------- Responsive ---------- */

@media (max-width: 760px) {
    .brand-logo-image {
        height: 40px;
        max-width: 140px;
    }

    .brand-logo-text small {
        display: none;
    }

    .intuitive-plan-price,
    .plan-price-panel,
    .admin-plan-price-panel {
        width: 100%;
        min-width: 0;
        text-align: left;
    }

    .intuitive-plan-price strong,
    .plan-price-panel strong,
    .admin-plan-price-panel strong {
        font-size: 58px;
    }

    .distrash-footer-inner {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .intuitive-plan-card,
    .plan-card,
    .admin-plan-card {
        transition: none;
    }
}

/* DisTrash UI 3.0 page integration patch */

.login-brand-logo {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

.login-brand-logo .brand-logo-frame {
    padding: 12px 18px;
    border-radius: 22px;
}

.login-brand-logo .brand-logo-image {
    height: 78px;
    max-width: 250px;
}

.login-brand-kicker {
    margin: 0 0 8px;
    text-align: center;
}

.login-card > h1,
.login-card > .subtitle {
    text-align: center;
}

.login-brand-footer {
    margin-top: 0;
}

.admin-plan-price-panel {
    margin: 22px 0 18px;
}

@media (max-width: 700px) {
    .login-brand-logo .brand-logo-image {
        height: 62px;
        max-width: 210px;
    }

    .brand-logo-text strong {
        font-size: 17px;
    }
}

/* =========================================================
   DisTrash UI 3.5 — Full brand integration
   Header, Footer, Hero, Premium cards, Order dashboard
   ========================================================= */

.ui35-member-header {
    position: sticky;
    top: 0;
    z-index: 100;
}

.ui35-member-nav {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.ui35-nav-link.is-active {
    border-color: var(--dt3-ink);
    background: var(--dt3-ink);
    color: #fff !important;
}

.ui35-member-greeting {
    color: #5f706d;
    font-weight: 700;
}

.ui35-hero,
.ui35-orders-hero,
.ui35-subscription-hero {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(32, 56, 59, .10);
    border-radius: 30px;
    background:
        radial-gradient(
            circle at 90% 15%,
            rgba(214, 182, 82, .16),
            transparent 24%
        ),
        linear-gradient(
            145deg,
            rgba(255, 255, 255, .98),
            rgba(240, 245, 242, .96)
        );
    box-shadow: 0 18px 48px rgba(23, 42, 45, .09);
}

.ui35-hero-brand {
    display: flex;
    align-items: center;
    gap: 22px;
}

.ui35-hero-brand .brand-logo-frame {
    flex: 0 0 auto;
    padding: 10px 14px;
    border-radius: 20px;
}

.ui35-hero-brand .brand-logo-image {
    height: 64px;
    max-width: 220px;
}

.ui35-plan-card,
.ui35-order-card,
.ui35-current-plan {
    isolation: isolate;
}

.ui35-plan-watermark,
.ui35-order-watermark,
.ui35-subscription-watermark {
    position: absolute;
    right: -24px;
    bottom: -18px;
    z-index: -1;
    width: 170px;
    opacity: .045;
    pointer-events: none;
    transform: rotate(-7deg);
}

.ui35-plan-watermark img,
.ui35-order-watermark img,
.ui35-subscription-watermark img {
    display: block;
    width: 100%;
    height: auto;
}

.ui35-order-dashboard {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-top: 22px;
}

.ui35-order-dashboard article {
    padding: 18px;
    border: 1px solid rgba(32, 56, 59, .10);
    border-radius: 18px;
    background: rgba(255, 255, 255, .84);
    box-shadow:
        inset 0 1px 0 #fff,
        0 8px 20px rgba(23, 42, 45, .05);
}

.ui35-order-dashboard span {
    display: block;
    color: #6f7e7b;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: .08em;
}

.ui35-order-dashboard strong {
    display: block;
    margin-top: 7px;
    color: var(--dt3-ink-deep);
    font-size: 34px;
    line-height: 1;
}

.ui35-order-card {
    position: relative;
    overflow: hidden;
    border-radius: 26px;
    box-shadow: 0 16px 42px rgba(23, 42, 45, .08);
    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;
}

.ui35-order-card:hover {
    transform: translateY(-5px);
    border-color: rgba(32, 56, 59, .22);
    box-shadow: 0 26px 58px rgba(23, 42, 45, .14);
}

.ui35-current-plan {
    position: relative;
    overflow: hidden;
    border-radius: 30px;
    background:
        radial-gradient(
            circle at 88% 16%,
            rgba(214, 182, 82, .16),
            transparent 27%
        ),
        #fff;
    box-shadow: 0 22px 60px rgba(23, 42, 45, .11);
}

.ui35-subscription-progress {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 24px;
    margin: 22px 0;
    padding: 22px;
    border: 1px solid rgba(32, 56, 59, .10);
    border-radius: 22px;
    background:
        linear-gradient(
            145deg,
            #f8faf8,
            #edf3f0
        );
}

.ui35-progress-ring {
    --size: 128px;
    width: var(--size);
    height: var(--size);
    display: grid;
    place-items: center;
    border-radius: 50%;
    background:
        conic-gradient(
            var(--dt3-ink)
            calc(var(--progress) * 1%),
            #dce6e2 0
        );
    box-shadow:
        inset 0 0 0 1px rgba(32, 56, 59, .08),
        0 12px 26px rgba(23, 42, 45, .11);
}

.ui35-progress-ring::before {
    content: "";
    position: absolute;
}

.ui35-progress-ring > div {
    display: grid;
    place-items: center;
    width: calc(var(--size) - 22px);
    height: calc(var(--size) - 22px);
    border-radius: 50%;
    background: #fff;
    text-align: center;
}

.ui35-progress-ring strong {
    color: var(--dt3-ink-deep);
    font-size: 27px;
}

.ui35-progress-ring span {
    color: #72807e;
    font-size: 15px;
}

.ui35-progress-copy strong {
    color: var(--dt3-ink-deep);
    font-size: 22px;
}

.ui35-progress-copy p {
    margin: 7px 0 0;
    color: #687775;
    line-height: 1.7;
}

.ui35-footer {
    margin-top: 72px;
}

@media (max-width: 900px) {
    .ui35-member-nav {
        justify-content: flex-end;
    }

    .ui35-member-greeting {
        width: 100%;
        text-align: right;
    }
}

@media (max-width: 760px) {
    .ui35-member-header {
        position: static;
    }

    .ui35-member-nav {
        width: 100%;
        justify-content: flex-start;
    }

    .ui35-member-greeting {
        width: 100%;
        text-align: left;
    }

    .ui35-hero-brand {
        align-items: flex-start;
        flex-direction: column;
    }

    .ui35-hero-brand .brand-logo-image {
        height: 52px;
        max-width: 190px;
    }

    .ui35-order-dashboard {
        grid-template-columns: 1fr;
    }

    .ui35-subscription-progress {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .ui35-progress-ring {
        margin: 0 auto;
    }
}

/* =========================================================
   DisTrash UI 4.0 — Payment & Operations
   ========================================================= */

.ui4-member-header,.ui4-admin-header{position:sticky;top:0;z-index:120;backdrop-filter:blur(18px)}
.ui4-member-nav,.ui4-admin-nav{display:flex;align-items:center;flex-wrap:wrap;gap:10px}
.ui4-payment-page,.ui4-subscribe-page,.ui4-admin-orders-page,.ui4-admin-detail-page{position:relative}

.ui4-payment-hero,.ui4-final-confirm-hero,.ui4-admin-hero,
.ui4-admin-detail-hero{

    position: relative;

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

    padding: 36px 42px;

    overflow: hidden;

    border:1px solid rgba(32,56,59,.11);
    border-radius:30px;

    background:
        radial-gradient(circle at 92% 18%,rgba(214,182,82,.18),transparent 24%),
        linear-gradient(145deg,#fff,#edf3f0);

    box-shadow:0 22px 58px rgba(23,42,45,.11);
}position:relative;overflow:hidden;border:1px solid rgba(32,56,59,.11);border-radius:30px;background:radial-gradient(circle at 92% 18%,rgba(214,182,82,.18),transparent 24%),linear-gradient(145deg,#fff,#edf3f0);box-shadow:0 22px 58px rgba(23,42,45,.11)}
.ui4-hero-logo{position:absolute;right:-22px;bottom:-42px;width:210px;opacity:.045;transform:rotate(-8deg);pointer-events:none}
.ui4-hero-logo img{display:block;width:100%;height:auto}

.ui4-payment-amount{border-radius:30px;background:linear-gradient(145deg,#172a2d,#31565a);box-shadow:0 28px 70px rgba(23,42,45,.22)}
.ui4-payment-amount .payment-main-amount strong{font-size:clamp(64px,9vw,104px)!important;color:#fff!important;letter-spacing:-.065em}
.ui4-payment-amount .payment-main-amount small{color:rgba(255,255,255,.68)!important;letter-spacing:.14em}
.ui4-glass-panel,.ui4-bank-panel,.ui4-final-confirm-card{border:1px solid rgba(32,56,59,.11);background:rgba(255,255,255,.92);box-shadow:0 18px 48px rgba(23,42,45,.09);backdrop-filter:blur(16px)}
.ui4-bank-panel{background:linear-gradient(145deg,#fff,#f1f5f3)}
.bank-account-row dd strong{font-size:clamp(20px,4vw,30px);letter-spacing:.06em;color:#172a2d!important}

.ui4-final-confirm-card{border-radius:34px}
.ui4-final-payment{border:1px solid #d6b652!important;border-radius:26px;background:linear-gradient(145deg,#fffdf3,#fff0b8)!important;box-shadow:0 20px 48px rgba(155,116,0,.13)}
.final-confirm-payable-row{border-radius:20px;background:#172a2d!important;color:#fff!important}
.final-confirm-payable-row span,.final-confirm-payable-row strong{color:#fff!important}

.ui4-admin-stat-grid .order-stat-card{border:1px solid rgba(32,56,59,.10);border-radius:20px;background:linear-gradient(145deg,#fff,#f2f6f3);box-shadow:0 12px 30px rgba(23,42,45,.07);transition:transform .22s ease,box-shadow .22s ease}
.ui4-admin-stat-grid .order-stat-card:hover{transform:translateY(-4px);box-shadow:0 20px 44px rgba(23,42,45,.12)}
.ui4-admin-order-card{position:relative;overflow:hidden;border-radius:26px!important;box-shadow:0 16px 42px rgba(23,42,45,.08)!important;transition:transform .24s ease,box-shadow .24s ease}
.ui4-admin-order-card:hover{transform:translateY(-5px);box-shadow:0 26px 58px rgba(23,42,45,.14)!important}
.ui4-priority-review{border:1px solid #d6b652!important;border-radius:30px;background:radial-gradient(circle at 90% 10%,rgba(255,255,255,.52),transparent 24%),linear-gradient(145deg,#fff8dc,#f4d56e)!important;box-shadow:0 24px 60px rgba(151,113,0,.16)}
.ui4-priority-review .admin-review-amount-focus strong{font-size:clamp(42px,7vw,72px);color:#332600!important}
.ui4-payment-summary{border-radius:24px;box-shadow:0 16px 42px rgba(23,42,45,.08)}

.ui4-footer{margin-top:72px}

@media(max-width:760px){.ui4-member-header,.ui4-admin-header{position:static}.ui4-member-nav,.ui4-admin-nav{width:100%;justify-content:flex-start}.ui4-payment-hero,.ui4-final-confirm-hero,.ui4-admin-hero,
.ui4-admin-detail-hero{

    position: relative;

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

    padding: 36px 42px;

    overflow: hidden;

    border:1px solid rgba(32,56,59,.11);
    border-radius:30px;

    background:
        radial-gradient(circle at 92% 18%,rgba(214,182,82,.18),transparent 24%),
        linear-gradient(145deg,#fff,#edf3f0);

    box-shadow:0 22px 58px rgba(23,42,45,.11);
}border-radius:22px}.ui4-payment-amount .payment-main-amount strong{font-size:64px}.ui4-hero-logo{width:150px}.ui4-final-confirm-card{border-radius:24px}}

/* =========================================================
   DisTrash Admin UI 5.0
   Card-based operations, live plan editor, Apple-style settings
   ========================================================= */

.dt5-admin-body {
    background:
        radial-gradient(circle at 8% 0%, rgba(49, 86, 90, .12), transparent 28%),
        radial-gradient(circle at 92% 100%, rgba(214, 182, 82, .09), transparent 26%),
        #f5f7f3;
}

.dt5-admin-header {
    position: sticky;
    top: 0;
    z-index: 100;
}

.dt5-admin-nav {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 12px;
}

.dt5-admin-nav a {
    padding: 8px 11px;
    border-radius: 999px;
}

.dt5-admin-page,
.dt5-editor-page {
    width: min(1220px, calc(100% - 32px));
    margin: 0 auto;
    padding: 38px 0 70px;
}

.dt5-admin-hero {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 28px;
    padding: 34px;
    overflow: hidden;
    border: 1px solid rgba(32, 56, 59, .11);
    border-radius: 32px;
    background:
        radial-gradient(circle at 88% 18%, rgba(214, 182, 82, .18), transparent 25%),
        linear-gradient(145deg, #fff, #edf3ef);
    box-shadow: 0 22px 60px rgba(23, 42, 45, .10);
}

.dt5-admin-hero h1 {
    margin: 7px 0 10px;
    font-size: clamp(34px, 5vw, 56px);
    letter-spacing: -.04em;
}

.dt5-admin-hero p {
    max-width: 680px;
    margin: 0;
    color: #687775;
    line-height: 1.75;
}

.dt5-admin-hero-metric {
    min-width: 210px;
    padding: 24px;
    border-radius: 25px;
    background:
        linear-gradient(145deg, #182b2e, #31565a);
    color: #fff;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.13),
        0 18px 34px rgba(23,42,45,.23);
}

.dt5-admin-hero-metric span,
.dt5-admin-hero-metric small {
    display: block;
    color: rgba(255,255,255,.67);
    font-size: 15px;
    font-weight: 800;
    letter-spacing: .13em;
}

.dt5-admin-hero-metric strong {
    display: block;
    margin: 8px 0;
    color: #fff !important;
    font-size: 56px;
    line-height: 1;
}

.dt5-quick-actions {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 13px;
    margin: 22px 0;
}

.dt5-quick-actions a {
    padding: 17px;
    border: 1px solid rgba(32, 56, 59, .10);
    border-radius: 18px;
    background: rgba(255,255,255,.91);
    text-decoration: none;
    box-shadow: 0 10px 26px rgba(23,42,45,.055);
    transition: transform .2s ease, box-shadow .2s ease;
}

.dt5-quick-actions a:hover {
    transform: translateY(-3px);
    box-shadow: 0 17px 34px rgba(23,42,45,.11);
}

.dt5-quick-actions a.is-gold {
    border-color: #dec15d;
    background: linear-gradient(145deg, #fff9df, #f6dfa0);
}

.dt5-quick-actions span {
    display: block;
    color: #778481;
    font-size: 15px;
    letter-spacing: .12em;
}

.dt5-quick-actions strong {
    display: block;
    margin-top: 5px;
    font-size: 18px;
}

.dt5-toolbar-card {
    margin: 22px 0;
    padding: 18px;
    border: 1px solid rgba(32, 56, 59, .10);
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 12px 30px rgba(23,42,45,.06);
}

.dt5-search-form {
    display: flex;
    align-items: end;
    gap: 12px;
}

.dt5-search-form > div {
    flex: 1;
}

.dt5-search-form label {
    display: block;
    margin-bottom: 7px;
    font-weight: 800;
}

.dt5-member-grid,
.dt5-subscription-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.dt5-member-card,
.dt5-subscription-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 23px;
    border: 1px solid rgba(32, 56, 59, .11);
    border-radius: 26px;
    background: rgba(255,255,255,.96);
    box-shadow: 0 16px 42px rgba(23,42,45,.075);
    transition: transform .23s ease, box-shadow .23s ease;
}

.dt5-member-card:hover,
.dt5-subscription-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 27px 62px rgba(23,42,45,.13);
}

.dt5-card-watermark {
    position: absolute;
    right: -26px;
    bottom: -20px;
    z-index: -1;
    width: 160px;
    opacity: .04;
    transform: rotate(-7deg);
}

.dt5-card-watermark img {
    width: 100%;
}

.dt5-member-card-head,
.dt5-subscription-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.dt5-member-card-head {
    justify-content: flex-start;
}

.dt5-member-avatar {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    flex: 0 0 auto;
    border-radius: 19px;
    background: linear-gradient(145deg, #1c3033, #3c6466);
    color: #fff;
    font-size: 25px;
    font-weight: 900;
}

.dt5-record-id {
    color: #81908d;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: .13em;
}

.dt5-member-card h2,
.dt5-subscription-card h2 {
    margin: 5px 0 8px;
    font-size: 22px;
}

.dt5-subscription-card-head p {
    margin: 0;
    color: #71807d;
    font-size: 17px;
    line-height: 1.55;
}

.dt5-member-contact {
    display: grid;
    gap: 10px;
    margin: 20px 0;
}

.dt5-member-contact > div,
.dt5-member-meta > div {
    padding: 12px 13px;
    border: 1px solid rgba(32,56,59,.075);
    border-radius: 14px;
    background: #f8faf8;
}

.dt5-member-contact span,
.dt5-member-meta span,
.dt5-subscription-price span,
.dt5-period-timeline span {
    display: block;
    color: #7a8885;
    font-size: 15px;
}

.dt5-member-contact strong,
.dt5-member-meta strong {
    display: block;
    margin-top: 4px;
    overflow-wrap: anywhere;
    font-size: 17px;
    line-height: 1.45;
}

.dt5-member-meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 17px;
}

.dt5-coin-wallet {
    border-color: #e2c969 !important;
    background: linear-gradient(145deg, #fff9df, #f8e8ad) !important;
}

.dt5-coin-wallet strong {
    color: #6e5500 !important;
    font-size: 23px;
}

.dt5-coin-wallet small {
    font-size: 15px;
}

.dt5-card-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
    margin-top: auto;
}

.dt5-card-actions form {
    display: contents;
}

.dt5-primary-action,
.dt5-secondary-action,
.dt5-gold-action,
.dt5-danger-action,
.dt5-current-account {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    width: 100%;
    border: 0;
    border-radius: 13px;
    font: inherit;
    font-size: 17px;
    font-weight: 850;
    text-decoration: none;
    cursor: pointer;
}

.dt5-primary-action {
    background: #20383b;
    color: #fff !important;
}

.dt5-secondary-action {
    border: 1px solid #dce5e2;
    background: #eef4f1;
    color: #20383b !important;
}

.dt5-gold-action {
    border: 1px solid #ddbd4d;
    background: #fff0b4;
    color: #674d00 !important;
}

.dt5-danger-action {
    border: 1px solid #eccaca;
    background: #fff1f1;
    color: #ad4040;
}

.dt5-current-account {
    background: #eef1ef;
    color: #75817f;
}

.dt5-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin: 22px 0;
}

.dt5-stat-grid article {
    padding: 21px;
    border: 1px solid rgba(32,56,59,.10);
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 11px 28px rgba(23,42,45,.06);
}

.dt5-stat-grid span {
    display: block;
    color: #788682;
    font-size: 16px;
}

.dt5-stat-grid strong {
    display: block;
    margin-top: 8px;
    font-size: 34px;
}

.dt5-stat-grid .is-success {
    background: #eef8f1;
}

.dt5-stat-grid .is-warning {
    background: #fff7e4;
}

.dt5-stat-grid .is-muted {
    background: #f0f2f1;
}

.dt5-subscription-price {
    margin: 20px 0;
    padding: 17px;
    border-radius: 18px;
    background: linear-gradient(145deg, #192b2e, #31565a);
}

.dt5-subscription-price span {
    color: rgba(255,255,255,.65);
}

.dt5-subscription-price strong {
    display: block;
    margin-top: 5px;
    color: #fff !important;
    font-size: 30px;
}

.dt5-subscription-price small {
    font-size: 16px;
}

.dt5-period-timeline {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 8px;
    margin-bottom: 18px;
}

.dt5-period-timeline > div:not(.dt5-timeline-arrow) {
    padding: 12px;
    border-radius: 14px;
    background: #f4f7f5;
}

.dt5-period-timeline strong {
    display: block;
    margin-top: 4px;
    font-size: 16px;
}

.dt5-timeline-arrow {
    color: #71807d;
    font-weight: 900;
}

.dt5-empty-state {
    padding: 54px 24px;
    border: 1px dashed #ccd8d4;
    border-radius: 25px;
    background: rgba(255,255,255,.82);
    text-align: center;
}

.dt5-empty-state strong {
    font-size: 22px;
}

.dt5-empty-state p {
    color: #74817f;
}

.dt5-editor-back {
    display: inline-flex;
    margin-bottom: 20px;
}

.dt5-editor-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 23px;
}

.dt5-editor-heading h1 {
    margin: 7px 0 4px;
    font-size: clamp(34px, 5vw, 52px);
    letter-spacing: -.04em;
}

.dt5-editor-heading p {
    margin: 0;
    color: #73817e;
}

.dt5-editor-layout {
    display: grid;
    grid-template-columns: minmax(310px, .72fr) minmax(0, 1.28fr);
    align-items: start;
    gap: 24px;
}

.dt5-plan-preview-panel,
.dt5-member-profile-panel,
.dt5-editor-form-card {
    border: 1px solid rgba(32,56,59,.10);
    border-radius: 28px;
    background: rgba(255,255,255,.96);
    box-shadow: 0 18px 48px rgba(23,42,45,.085);
}

.dt5-plan-preview-panel,
.dt5-member-profile-panel {
    position: sticky;
    top: 105px;
    padding: 24px;
}

.dt5-editor-form-card {
    padding: 25px;
}

.dt5-preview-plan-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    margin-top: 19px;
    padding: 22px;
    border: 1px solid rgba(32,56,59,.12);
    border-radius: 27px;
    background: #fff;
    box-shadow: 0 18px 40px rgba(23,42,45,.10);
}

.dt5-preview-plan-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 7px;
    background: linear-gradient(90deg, #d6b652, #f4d875);
}

.dt5-preview-plan-card.is-prime::before {
    background: linear-gradient(90deg, #20383b, #718f89);
}

.dt5-preview-watermark {
    position: absolute;
    right: -24px;
    bottom: -20px;
    z-index: -1;
    width: 150px;
    opacity: .045;
    transform: rotate(-8deg);
}

.dt5-preview-watermark img {
    width: 100%;
}

.dt5-preview-badges {
    display: flex;
    gap: 8px;
    margin-top: 7px;
}

.dt5-preview-badges span {
    padding: 7px 11px;
    border-radius: 999px;
    background: #edf3f0;
    color: #20383b;
    font-size: 15px;
    font-weight: 900;
}

.dt5-preview-plan-card h3 {
    margin: 18px 0;
    font-size: 25px;
}

.dt5-preview-price {
    position: relative;
    overflow: hidden;
    padding: 19px;
    border-radius: 21px;
    background: linear-gradient(145deg, #171919, #090a0a 62%, #1e2221);
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.13), 0 16px 30px rgba(0,0,0,.20);
}

.dt5-preview-price small {
    color: rgba(255,255,255,.65);
}

.dt5-preview-price strong {
    display: block;
    color: #fff !important;
    font-size: 58px;
    line-height: .95;
    letter-spacing: -.06em;
}

.dt5-preview-reward {
    margin: 14px 0;
    padding: 16px;
    border: 1px solid #d8b743;
    border-radius: 18px;
    background: linear-gradient(145deg, #fff8d9, #f3d36c);
}

.dt5-preview-reward > span {
    display: block;
    color: #806400;
    font-size: 14px;
    font-weight: 950;
    letter-spacing: .17em;
}

.dt5-preview-reward strong {
    display: block;
    margin-top: 5px;
    color: #362900 !important;
}

.dt5-preview-facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 8px;
    margin: 13px 0;
}

.dt5-preview-facts div {
    padding: 11px;
    border-radius: 13px;
    background: #f2f6f3;
}

.dt5-preview-facts span {
    display: block;
    color: #7c8986;
    font-size: 15px;
}

.dt5-preview-facts strong {
    display: block;
    margin-top: 3px;
    font-size: 16px;
}

.dt5-preview-plan-card > p {
    color: #6c7977;
    line-height: 1.65;
}

.dt5-form-section {
    margin-bottom: 20px;
    padding: 22px;
    border: 1px solid rgba(32,56,59,.10);
    border-radius: 21px;
    background: #fafcfa;
}

.dt5-form-section.is-gold {
    border-color: #ddc263;
    background: linear-gradient(145deg, #fffdf5, #fff2bd);
}

.dt5-form-section-heading {
    display: flex;
    gap: 13px;
    margin-bottom: 19px;
}

.dt5-form-section-heading > span {
    display: grid;
    place-items: center;
    width: 37px;
    height: 37px;
    flex: 0 0 auto;
    border-radius: 12px;
    background: #20383b;
    color: #fff;
    font-size: 15px;
    font-weight: 900;
}

.dt5-form-section-heading h2 {
    margin: 0;
    font-size: 21px;
}

.dt5-form-section-heading p {
    margin: 4px 0 0;
    color: #75827f;
    font-size: 17px;
}

.dt5-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 15px;
}

.dt5-field-full {
    grid-column: 1 / -1;
}

.dt5-gold-field input {
    font-size: 25px;
    font-weight: 900;
}

.dt5-switch-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 15px;
    border: 1px solid #dce5e2;
    border-radius: 15px;
    background: #fff;
}

.dt5-switch-row input {
    margin-top: 3px;
}

.dt5-switch-row strong,
.dt5-switch-row small {
    display: block;
}

.dt5-switch-row small {
    margin-top: 4px;
    color: #768481;
}

.dt5-prime-notice {
    padding: 19px;
    border: 1px solid #bfcfca;
    border-radius: 18px;
    background: #e9f0ed;
}

.dt5-prime-notice p {
    margin: 6px 0 0;
    color: #63726f;
}

.dt5-editor-submit {
    display: flex;
    justify-content: flex-end;
}

.dt5-editor-submit .login-button {
    min-width: 220px;
}

.dt5-member-profile-panel {
    text-align: center;
}

.dt5-profile-avatar {
    display: grid;
    place-items: center;
    width: 92px;
    height: 92px;
    margin: 0 auto 18px;
    border-radius: 30px;
    background: linear-gradient(145deg, #1a2d30, #416a6b);
    color: #fff;
    font-size: 40px;
    font-weight: 950;
    box-shadow: 0 18px 38px rgba(23,42,45,.19);
}

.dt5-member-profile-panel h2 {
    margin: 7px 0;
    font-size: 27px;
}

.dt5-member-profile-panel > p:not(.card-label) {
    color: #73817e;
    overflow-wrap: anywhere;
}

.dt5-profile-facts {
    display: grid;
    gap: 9px;
    margin: 22px 0;
    text-align: left;
}

.dt5-profile-facts div {
    padding: 13px;
    border-radius: 14px;
    background: #f2f6f3;
}

.dt5-profile-facts span,
.dt5-profile-facts strong {
    display: block;
}

.dt5-profile-facts span {
    color: #7a8885;
    font-size: 15px;
}

.dt5-profile-facts strong {
    margin-top: 4px;
    font-size: 17px;
}

.dt5-profile-quick-actions {
    display: grid;
    gap: 9px;
}

.dt5-profile-quick-actions a {
    padding: 12px;
    border: 1px solid #dce5e2;
    border-radius: 13px;
    background: #eef4f1;
    color: #20383b;
    font-weight: 850;
    text-decoration: none;
}

.dt5-profile-quick-actions a.is-gold {
    border-color: #dec157;
    background: #fff0b4;
    color: #654d00;
}

.dt5-role-explanation-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 10px;
}

.dt5-role-explanation-grid article {
    padding: 13px;
    border-radius: 14px;
    background: #eef3f0;
}

.dt5-role-explanation-grid strong,
.dt5-role-explanation-grid span {
    display: block;
}

.dt5-role-explanation-grid span {
    margin-top: 4px;
    color: #6f7d7a;
    font-size: 16px;
    line-height: 1.5;
}

@media (max-width: 1080px) {
    .dt5-quick-actions {
        grid-template-columns: repeat(3, minmax(0,1fr));
    }

    .dt5-member-grid,
    .dt5-subscription-grid {
        grid-template-columns: repeat(2, minmax(0,1fr));
    }

    .dt5-editor-layout {
        grid-template-columns: 1fr;
    }

    .dt5-plan-preview-panel,
    .dt5-member-profile-panel {
        position: static;
    }
}

@media (max-width: 760px) {
    .dt5-admin-header {
        position: static;
    }

    .dt5-admin-page,
    .dt5-editor-page {
        width: min(100% - 20px, 1220px);
        padding-top: 22px;
    }

    .dt5-admin-hero {
        grid-template-columns: 1fr;
        padding: 24px;
    }

    .dt5-admin-hero-metric {
        width: 100%;
        min-width: 0;
    }

    .dt5-quick-actions,
    .dt5-member-grid,
    .dt5-subscription-grid,
    .dt5-stat-grid,
    .dt5-form-grid,
    .dt5-role-explanation-grid {
        grid-template-columns: 1fr;
    }

    .dt5-search-form {
        align-items: stretch;
        flex-direction: column;
    }

    .dt5-member-meta,
    .dt5-card-actions {
        grid-template-columns: 1fr;
    }

    .dt5-editor-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .dt5-preview-facts {
        grid-template-columns: 1fr;
    }

    .dt5-period-timeline {
        grid-template-columns: 1fr;
    }

    .dt5-timeline-arrow {
        transform: rotate(90deg);
        text-align: center;
    }

    .dt5-editor-form-card,
    .dt5-plan-preview-panel,
    .dt5-member-profile-panel {
        padding: 18px;
    }
}



/* =========================================================
   DisTrash Payment UI 4.0
   Scoped styles — only affects payment_ui4 classes
   ========================================================= */

.payment-ui4-body {
    min-height: 100vh;
    background:
        radial-gradient(
            circle at 8% 18%,
            rgba(32, 56, 59, 0.10),
            transparent 28%
        ),
        radial-gradient(
            circle at 92% 80%,
            rgba(218, 177, 77, 0.10),
            transparent 28%
        ),
        #f6f8f6;
    color: #183033;
}

.payment-ui4-header {
    position: sticky;
    top: 0;
    z-index: 30;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-bottom: 1px solid rgba(24, 48, 51, 0.08);
}

.payment-ui4-nav {
    flex-wrap: wrap;
    justify-content: flex-end;
}

.payment-ui4-page {
    width: min(1160px, calc(100% - 40px));
    margin: 34px auto 70px;
}

.payment-ui4-shell {
    width: 100%;
}

.payment-ui4-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 22px;
    color: #29474a;
    font-size: 17px;
    font-weight: 800;
    text-decoration: none;
}

.payment-ui4-back:hover {
    text-decoration: underline;
}

.payment-ui4-progress {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        minmax(40px, 0.45fr)
        minmax(0, 1fr)
        minmax(40px, 0.45fr)
        minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    margin-bottom: 22px;
    padding: 18px 22px;
    border: 1px solid rgba(24, 48, 51, 0.09);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.82);
    box-shadow:
        0 16px 42px rgba(24, 48, 51, 0.06);
}

.payment-ui4-step {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.payment-ui4-step > span {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #edf2f0;
    color: #607477;
    font-size: 17px;
    font-weight: 900;
}

.payment-ui4-step div {
    min-width: 0;
}

.payment-ui4-step small {
    display: block;
    margin-bottom: 2px;
    color: #89999b;
    font-size: 15px;
    font-weight: 900;
    letter-spacing: 1.2px;
}

.payment-ui4-step strong {
    display: block;
    overflow: hidden;
    color: #526568;
    font-size: 17px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.payment-ui4-step.is-complete > span,
.payment-ui4-step.is-active > span {
    background: #1d3a3d;
    color: #fff;
    box-shadow:
        0 8px 20px rgba(29, 58, 61, 0.18);
}

.payment-ui4-step.is-complete strong,
.payment-ui4-step.is-active strong {
    color: #183033;
}

.payment-ui4-progress-line {
    height: 2px;
    border-radius: 999px;
    background:
        linear-gradient(
            90deg,
            rgba(29, 58, 61, 0.20),
            rgba(29, 58, 61, 0.62)
        );
}

.payment-ui4-hero {
    position: relative;
    overflow: hidden;
    margin-bottom: 22px;
    padding: 40px;
    border: 1px solid rgba(24, 48, 51, 0.09);
    border-radius: 32px;
    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.98),
            rgba(248, 249, 244, 0.96)
        );
    box-shadow:
        0 24px 60px rgba(24, 48, 51, 0.08);
}

.payment-ui4-watermark {
    position: absolute;
    right: -22px;
    top: -30px;
    width: 230px;
    opacity: 0.045;
    pointer-events: none;
}

.payment-ui4-hero h1 {
    position: relative;
    margin: 4px 0 10px;
    text-align: left;
    color: #183033;
    font-size: clamp(32px, 4vw, 48px);
    line-height: 1.05;
    letter-spacing: -1.5px;
}

.payment-ui4-hero > p:not(.card-label) {
    position: relative;
    max-width: 680px;
    color: #66777a;
    font-size: 18px;
    line-height: 1.8;
}

.payment-ui4-order-number {
    position: relative;
    display: inline-flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 22px;
    padding: 10px 14px;
    border: 1px solid rgba(24, 48, 51, 0.09);
    border-radius: 999px;
    background: rgba(244, 247, 244, 0.92);
    color: #718184;
    font-size: 17px;
}

.payment-ui4-order-number strong {
    color: #183033;
    overflow-wrap: anywhere;
}

.payment-ui4-message {
    margin-bottom: 22px;
}

.payment-ui4-amount-card {
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 28px;
    margin-bottom: 22px;
    padding: 36px 40px;
    border-radius: 32px;
    background:
        radial-gradient(
            circle at 15% 0%,
            rgba(255, 255, 255, 0.12),
            transparent 34%
        ),
        linear-gradient(
            135deg,
            #142d30 0%,
            #24494c 100%
        );
    color: #fff;
    box-shadow:
        0 28px 60px rgba(20, 45, 48, 0.22);
}

.payment-ui4-amount-card::after {
    content: "";
    position: absolute;
    inset: 1px;
    border-radius: 31px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    pointer-events: none;
}

.payment-ui4-amount-label {
    position: relative;
    display: block;
    margin-bottom: 8px;
    color: rgba(255, 255, 255, 0.70);
    font-size: 17px;
    font-weight: 800;
    letter-spacing: 0.8px;
}

.payment-ui4-amount {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.payment-ui4-amount small {
    margin-top: 13px;
    color: #e4c56c;
    font-size: 17px;
    font-weight: 900;
    letter-spacing: 1px;
}

.payment-ui4-amount strong {
    color: #fff;
    font-size: clamp(56px, 8vw, 86px);
    font-weight: 900;
    line-height: 0.92;
    letter-spacing: -4px;
}

.payment-ui4-status-block {
    position: relative;
    min-width: 150px;
    padding: 16px 18px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.payment-ui4-status-block span {
    display: block;
    margin-bottom: 7px;
    color: rgba(255, 255, 255, 0.60);
    font-size: 16px;
}

.payment-ui4-status-block strong {
    font-size: 17px;
}

.payment-ui4-status-block strong.is-pending {
    color: #ffe19a;
}

.payment-ui4-status-block strong.is-paid {
    color: #bce8cf;
}

.payment-ui4-summary {
    margin-bottom: 22px;
    padding: 30px;
    border: 1px solid rgba(24, 48, 51, 0.09);
    border-radius: 30px;
    background: #fff;
    box-shadow:
        0 20px 46px rgba(24, 48, 51, 0.07);
}

.payment-ui4-section-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    margin-bottom: 20px;
}

.payment-ui4-section-heading h2 {
    color: #183033;
    font-size: 26px;
}

.payment-ui4-decoration {
    color: #91a09f;
    font-size: 22px;
    letter-spacing: 8px;
}

.payment-ui4-summary-grid {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.payment-ui4-summary-item {
    min-width: 0;
    padding: 18px 20px;
    border: 1px solid #e4eae7;
    border-radius: 18px;
    background:
        linear-gradient(
            180deg,
            #fbfcfb,
            #f7f9f7
        );
}

.payment-ui4-summary-item span {
    display: block;
    margin-bottom: 7px;
    color: #7b898b;
    font-size: 16px;
    font-weight: 700;
}

.payment-ui4-summary-item strong {
    display: block;
    color: #183033;
    font-size: 17px;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.payment-ui4-summary-item.is-total {
    grid-column: 1 / -1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    border-color: rgba(212, 169, 54, 0.34);
    background:
        linear-gradient(
            135deg,
            #fffaf0,
            #fffdf8
        );
}

.payment-ui4-summary-item.is-total span {
    margin: 0;
    color: #81691f;
}

.payment-ui4-summary-item.is-total strong {
    color: #183033;
    font-size: 24px;
}

.payment-ui4-order-code {
    font-size: 17px !important;
}

.payment-ui4-action-card {
    display: grid;
    grid-template-columns:
        auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 22px;
    padding: 28px;
    border: 1px solid rgba(212, 169, 54, 0.42);
    border-radius: 28px;
    background:
        linear-gradient(
            135deg,
            #fff9e7,
            #fffdf4
        );
    box-shadow:
        0 18px 42px rgba(112, 87, 18, 0.08);
}

.payment-ui4-action-icon {
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    border-radius: 18px;
    background:
        linear-gradient(
            135deg,
            #20383b,
            #10272a
        );
    color: #e8c45f;
    font-size: 27px;
    font-weight: 900;
    box-shadow:
        0 14px 28px rgba(24, 48, 51, 0.18);
}

.payment-ui4-action-copy h2 {
    margin-bottom: 5px;
    color: #183033;
    font-size: 23px;
}

.payment-ui4-action-copy > p:not(.card-label) {
    color: #74683e;
    font-size: 17px;
    line-height: 1.7;
}

.payment-ui4-form {
    margin: 0;
}

.payment-ui4-primary-button,
.payment-ui4-primary-link {
    min-height: 50px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 14px 24px;
    border: 0;
    border-radius: 16px;
    background:
        linear-gradient(
            135deg,
            #24484b,
            #163235
        );
    color: #fff;
    font-family: inherit;
    font-size: 17px;
    font-weight: 900;
    text-decoration: none;
    cursor: pointer;
    box-shadow:
        0 14px 28px rgba(24, 48, 51, 0.18);
    transition:
        transform .2s ease,
        box-shadow .2s ease,
        opacity .2s ease;
}

.payment-ui4-primary-button:hover,
.payment-ui4-primary-link:hover {
    transform: translateY(-2px);
    box-shadow:
        0 18px 34px rgba(24, 48, 51, 0.24);
}

.payment-ui4-primary-button:disabled {
    opacity: 0.65;
    cursor: wait;
    transform: none;
}

.payment-ui4-security-note {
    margin-top: 14px;
    padding: 18px 20px;
    border: 1px solid rgba(24, 48, 51, 0.08);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.68);
    color: #68787a;
}

.payment-ui4-security-note strong {
    display: block;
    margin-bottom: 5px;
    color: #29474a;
    font-size: 17px;
}

.payment-ui4-security-note p {
    font-size: 17px;
    line-height: 1.7;
}

.payment-ui4-complete-card {
    display: grid;
    grid-template-columns:
        auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 22px;
    padding: 28px;
    border: 1px solid #cee3d7;
    border-radius: 28px;
    background:
        linear-gradient(
            135deg,
            #f1faf5,
            #fbfdfb
        );
}

.payment-ui4-complete-icon {
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    border-radius: 18px;
    background: #1f4b3b;
    color: #fff;
    font-size: 26px;
    font-weight: 900;
}

.payment-ui4-complete-card h2 {
    margin-bottom: 5px;
    color: #183033;
    font-size: 23px;
}

.payment-ui4-complete-card p {
    color: #617276;
    font-size: 17px;
}

@media (max-width: 820px) {
    .payment-ui4-page {
        width: min(100% - 28px, 1160px);
        margin-top: 24px;
    }

    .payment-ui4-nav {
        display: none;
    }

    .payment-ui4-progress {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .payment-ui4-progress-line {
        display: none;
    }

    .payment-ui4-step {
        padding: 8px;
        border-radius: 14px;
    }

    .payment-ui4-step.is-active {
        background: #f0f4f2;
    }

    .payment-ui4-amount-card {
        align-items: flex-start;
        flex-direction: column;
    }

    .payment-ui4-status-block {
        width: 100%;
    }

    .payment-ui4-action-card,
    .payment-ui4-complete-card {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .payment-ui4-form,
    .payment-ui4-primary-button,
    .payment-ui4-primary-link {
        width: 100%;
    }
}

@media (max-width: 560px) {
    .payment-ui4-hero,
    .payment-ui4-amount-card,
    .payment-ui4-summary,
    .payment-ui4-action-card,
    .payment-ui4-complete-card {
        padding: 22px;
        border-radius: 22px;
    }

    .payment-ui4-summary-grid {
        grid-template-columns: 1fr;
    }

    .payment-ui4-summary-item.is-total {
        grid-column: auto;
        align-items: flex-start;
        flex-direction: column;
    }

    .payment-ui4-amount strong {
        font-size: 58px;
        letter-spacing: -3px;
    }

    .payment-ui4-watermark {
        width: 150px;
    }
}


/* ===== DisTrash Admin Coin UI 4.0 ===== */
.coin-ui4-body{background:radial-gradient(circle at 8% 12%,rgba(35,72,75,.08),transparent 24%),radial-gradient(circle at 92% 90%,rgba(199,166,75,.08),transparent 24%),#f4f7f5}.coin-ui4-header{position:sticky;top:0;z-index:50;box-shadow:0 8px 28px rgba(15,23,42,.12)}.coin-ui4-nav-active{color:#fff!important;font-weight:900}.coin-ui4-page{width:min(1380px,calc(100% - 40px));margin:34px auto 70px}.coin-ui4-title-row{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-bottom:24px}.coin-ui4-title-row h1{margin:4px 0 8px;color:#183033;font-size:clamp(30px,4vw,42px);text-align:left;letter-spacing:-1px}.coin-ui4-title-row>div>p:last-child{color:#708083}.coin-ui4-flash{margin-bottom:20px;transition:opacity .25s ease,transform .25s ease}.coin-ui4-flash.is-hiding{opacity:0;transform:translateY(-6px)}
.coin-ui4-kpi-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:22px}.coin-ui4-kpi-card{padding:22px;border:1px solid rgba(24,48,51,.08);border-radius:22px;background:rgba(255,255,255,.94);box-shadow:0 14px 34px rgba(24,48,51,.06)}.coin-ui4-kpi-card span,.coin-ui4-kpi-card small{display:block;color:#7a8a8c}.coin-ui4-kpi-card span{margin-bottom:8px;font-size: 17px;font-weight:800}.coin-ui4-kpi-card strong{display:block;margin-bottom:6px;color:#183033;font-size:30px;line-height:1}.coin-ui4-kpi-card small{font-size: 16px}.coin-ui4-kpi-card.is-dark{background:linear-gradient(135deg,#183033,#294d50)}.coin-ui4-kpi-card.is-dark span,.coin-ui4-kpi-card.is-dark small{color:rgba(255,255,255,.66)}.coin-ui4-kpi-card.is-dark strong{color:#fff}
.coin-ui4-workspace{display:grid;grid-template-columns:minmax(330px,.8fr) minmax(0,1.7fr);gap:20px;align-items:start}.coin-ui4-search-panel,.coin-ui4-detail-panel{border:1px solid rgba(24,48,51,.08);border-radius:28px;background:rgba(255,255,255,.95);box-shadow:0 18px 44px rgba(24,48,51,.07)}.coin-ui4-search-panel{position:sticky;top:96px;padding:22px}.coin-ui4-detail-panel{min-height:520px;padding:24px}.coin-ui4-panel-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:18px}.coin-ui4-panel-heading h2{color:#183033;font-size:24px}.coin-ui4-result-count{padding:7px 10px;border-radius:999px;background:#eef4f1;color:#31565a;font-size: 16px;font-weight:900}
.coin-ui4-search-box{position:relative}.coin-ui4-search-box input{width:100%;min-height:52px;padding:0 44px 0 46px;border:1px solid #d6e0dc;border-radius:16px;background:#fbfcfb;color:#183033;font-size: 18px;outline:none}.coin-ui4-search-box input:focus{border-color:#31565a;background:#fff;box-shadow:0 0 0 4px rgba(49,86,90,.10)}.coin-ui4-search-icon,.coin-ui4-search-clear{position:absolute;top:50%;transform:translateY(-50%)}.coin-ui4-search-icon{left:16px;color:#708083;font-size:22px}.coin-ui4-search-clear{right:10px;width:32px;height:32px;border:0;border-radius:10px;background:transparent;color:#8a989a;font-size:20px;cursor:pointer}.coin-ui4-search-clear:hover{background:#edf2ef;color:#183033}.coin-ui4-search-hint{margin:9px 2px 14px;color:#93a0a2;font-size: 16px}.coin-ui4-member-list{display:flex;flex-direction:column;gap:9px;max-height:610px;overflow-y:auto;padding-right:3px}
.coin-ui4-member-card{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;padding:13px;border:1px solid #e2e9e6;border-radius:17px;background:#fff;color:inherit;text-decoration:none;transition:.18s}.coin-ui4-member-card:hover{transform:translateY(-2px);border-color:#b8ccc6;background:#fbfdfc;box-shadow:0 10px 24px rgba(24,48,51,.07)}.coin-ui4-member-card.is-selected{border-color:#31565a;background:linear-gradient(135deg,#f2f7f4,#fbfdfc);box-shadow:0 0 0 3px rgba(49,86,90,.08)}.coin-ui4-member-avatar,.coin-ui4-hero-avatar{display:grid;place-items:center;border-radius:16px;background:linear-gradient(135deg,#264b4e,#183033);color:#fff;font-weight:900}.coin-ui4-member-avatar{width:44px;height:44px}.coin-ui4-member-main{min-width:0}.coin-ui4-member-main strong,.coin-ui4-member-main small,.coin-ui4-member-main span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.coin-ui4-member-main strong{color:#183033;font-size: 17px}.coin-ui4-member-main small{margin-top:3px;color:#a0812c;font-size: 15px;font-weight:900;letter-spacing:.6px}.coin-ui4-member-main span{margin-top:3px;color:#839194;font-size: 15px}.coin-ui4-member-balance{text-align:right}.coin-ui4-member-balance small,.coin-ui4-member-balance strong{display:block}.coin-ui4-member-balance small{color:#8d9a9c;font-size: 15px}.coin-ui4-member-balance strong{margin-top:3px;color:#183033;font-size: 17px}.coin-ui4-search-loading{padding:14px 0 0;color:#819093;font-size: 16px;text-align:center}.coin-ui4-empty{padding:28px 16px;border:1px dashed #d7e1de;border-radius:16px;background:#fafcfb;color:#89979a;text-align:center}.coin-ui4-empty.is-error{border-color:#f2c6c6;background:#fff7f7;color:#a74747}
.coin-ui4-member-hero{overflow:hidden;margin-bottom:18px;padding:26px;border-radius:24px;background:linear-gradient(135deg,#f9fbfa,#f2f7f4);border:1px solid #dce6e2}.coin-ui4-member-hero-top{display:flex;justify-content:space-between;align-items:flex-start;gap:18px}.coin-ui4-hero-identity{display:flex;align-items:center;gap:14px}.coin-ui4-hero-avatar{width:58px;height:58px;font-size:22px}.coin-ui4-hero-identity h2{margin:2px 0 5px;color:#183033;font-size:27px}.coin-ui4-member-no{color:#9d7d28;font-size: 17px;font-weight:900;letter-spacing:1px}.coin-ui4-level-pill{padding:7px 11px;border-radius:999px;background:#e4eee9;color:#31565a;font-size: 16px;font-weight:900}.coin-ui4-balance-hero{margin:22px 0;padding:24px;border-radius:22px;background:radial-gradient(circle at 0% 0%,rgba(255,255,255,.12),transparent 32%),linear-gradient(135deg,#173134,#294e51);color:#fff;box-shadow:0 18px 34px rgba(24,48,51,.16)}.coin-ui4-balance-hero>span{color:rgba(255,255,255,.68);font-size: 16px;font-weight:800}.coin-ui4-balance-hero>div{display:flex;align-items:flex-end;gap:10px;margin-top:6px}.coin-ui4-balance-hero strong{font-size:clamp(44px,6vw,68px);line-height:.95;letter-spacing:-2px}.coin-ui4-balance-hero small{padding-bottom:7px;color:#e4c466;font-weight:900}.coin-ui4-member-meta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.coin-ui4-member-meta>div{padding:14px;border:1px solid #e0e8e5;border-radius:14px;background:rgba(255,255,255,.75)}.coin-ui4-member-meta span,.coin-ui4-member-meta strong{display:block}.coin-ui4-member-meta span{margin-bottom:5px;color:#879496;font-size: 15px}.coin-ui4-member-meta strong{color:#20383b;font-size: 17px;line-height:1.45;overflow-wrap:anywhere}
.coin-ui4-adjust-card,.coin-ui4-history{padding:24px;border:1px solid #e1e8e5;border-radius:22px;background:#fff}.coin-ui4-adjust-card{margin-bottom:18px}.coin-ui4-action-switch{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:18px}.coin-ui4-action-switch input{position:absolute;opacity:0;pointer-events:none}.coin-ui4-action-switch span{display:block;padding:12px 10px;border:1px solid #dae4e0;border-radius:13px;background:#f8faf9;color:#5e7073;font-size: 17px;font-weight:900;text-align:center;cursor:pointer}.coin-ui4-action-switch input:checked+span{border-color:#294d50;background:#294d50;color:#fff}.coin-ui4-adjust-grid{display:grid;grid-template-columns:minmax(150px,.6fr) minmax(0,1.4fr);gap:14px}.coin-ui4-primary-button{width:100%;min-height:50px;border:0;border-radius:15px;background:linear-gradient(135deg,#294d50,#183033);color:#fff;font-family:inherit;font-size: 17px;font-weight:900;cursor:pointer;box-shadow:0 12px 26px rgba(24,48,51,.16)}.coin-ui4-primary-button:hover{transform:translateY(-2px)}
.coin-ui4-history-list{display:flex;flex-direction:column;gap:10px}.coin-ui4-history-item{padding:15px;border:1px solid #e4eae7;border-radius:16px;background:#fbfcfb}.coin-ui4-history-main{display:flex;justify-content:space-between;align-items:center;gap:16px}.coin-ui4-history-main>div{min-width:0}.coin-ui4-history-main strong{color:#20383b}.coin-ui4-history-main small{display:block;margin-top:5px;color:#8b989a;font-size: 15px}.coin-ui4-history-type{display:inline-block;margin-bottom:5px;padding:4px 7px;border-radius:999px;background:#eef3f1;color:#5d7072;font-size: 15px;font-weight:900}.coin-ui4-related-link{display:inline-block;margin-top:10px;color:#31565a;font-size: 16px;font-weight:800;text-decoration:none}.coin-ui4-placeholder{min-height:470px;display:flex;justify-content:center;align-items:center;flex-direction:column;padding:40px;text-align:center}.coin-ui4-placeholder-logo{width:88px;height:88px;margin-bottom:20px;overflow:hidden;border-radius:24px;box-shadow:0 16px 32px rgba(24,48,51,.12)}.coin-ui4-placeholder-logo img{width:100%;height:100%;object-fit:cover}.coin-ui4-placeholder h2{margin:4px 0 8px;color:#183033}.coin-ui4-placeholder p:last-child{max-width:520px;color:#7c8b8d;line-height:1.7}
@media(max-width:1050px){.coin-ui4-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.coin-ui4-workspace{grid-template-columns:1fr}.coin-ui4-search-panel{position:static}.coin-ui4-member-list{max-height:430px}}@media(max-width:700px){.coin-ui4-page{width:calc(100% - 28px);margin-top:24px}.coin-ui4-title-row{align-items:stretch;flex-direction:column}.coin-ui4-kpi-grid{grid-template-columns:1fr}.coin-ui4-detail-panel,.coin-ui4-search-panel{padding:18px;border-radius:22px}.coin-ui4-member-hero,.coin-ui4-adjust-card,.coin-ui4-history{padding:18px}.coin-ui4-member-hero-top{flex-direction:column}.coin-ui4-member-meta,.coin-ui4-adjust-grid{grid-template-columns:1fr}.coin-ui4-action-switch{grid-template-columns:1fr}.coin-ui4-history-main{align-items:flex-start}}

/* =========================================
   DisTrash Admin Hero Fix
   ========================================= */

.ui4-admin-hero{
    position: relative;

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

    overflow:visible;

    padding:36px 42px;

    border-radius:30px;

    margin-bottom:28px;
}

.ui4-admin-hero > div:last-child{
    flex:1;
    min-width:0;
}

.ui4-admin-hero .admin-label{
    display:block;

    margin:0 0 10px;

    padding:0;

    line-height:1.2;

    letter-spacing:2px;

    overflow:visible;

    white-space:nowrap;
}

.ui4-admin-hero h1{
    margin:0 0 12px;
}

.ui4-admin-hero p{
    margin:0;
}

.ui4-hero-logo{
    flex:0 0 90px;
}

/* ===========================================
   DisTrash Admin Hero Fix
=========================================== */

.ui4-admin-hero{
    position: relative;
    display: flex;
    align-items: center;
    gap: 28px;

    padding: 36px 42px;

    overflow: visible;
}

.ui4-admin-hero > div:last-child{
    flex: 1;
}

.ui4-admin-hero .admin-label{
    display:block;

    margin:0 0 10px;

    padding:0;

    line-height:1.2;

    letter-spacing:2px;

    white-space:nowrap;

    overflow:visible;
}

.ui4-admin-hero h1{
    margin:0 0 12px;
}

.ui4-admin-hero p{
    margin:0;
}

.ui4-hero-logo{
    flex:0 0 90px;
}

/* 手機版 */

@media (max-width:768px){

    .ui4-admin-hero{

        flex-direction:column;

        align-items:flex-start;

        gap:18px;

        padding:24px;
    }

    .ui4-hero-logo{

        width:72px;

        flex:0 0 auto;
    }

}

/* 提高全站小字可讀性，保留原有配色與版面風格 */
body {
    font-size: 18px;
    line-height: 1.6;
}

small {
    font-size: 15px !important;
    line-height: 1.6;
}

/* 放大會員導覽，同時避免長文字超出容器 */
.header-user,
.header-logout,
.dt5-member-nav a,
.dt5-greeting {
    font-size: 17px;
}

button,
a,
label,
small,
p,
span,
strong,
dt,
dd,
li {
    overflow-wrap: break-word;
}

/* V3：全站會員導覽清楚化 */
.header-user {
    gap: 8px;
}

.header-user .header-logout {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 10px 14px;
    border: 1px solid rgba(41, 77, 80, 0.14);
    border-radius: 12px;
    background: #f4f7f5;
    color: #294d50;
    font-size: 18px;
    font-weight: 900;
    line-height: 1.35;
    white-space: nowrap;
}

.header-user .header-logout:hover {
    border-color: rgba(41, 77, 80, 0.24);
    background: #eaf1ee;
    color: #183033;
}

/* V4：全站卡片高可讀性分級 */
:is([class*="-card"], [class*="-panel"]) h2,
:is([class*="-card"], [class*="-panel"]) h3 {
    font-size: clamp(24px, 2vw, 26px);
    line-height: 1.3;
    overflow-wrap: break-word;
}

:is([class*="-card"], [class*="-panel"]) p {
    font-size: 17px;
    line-height: 1.65;
    overflow-wrap: break-word;
}

button,
input[type="button"],
input[type="submit"],
[class*="-button"] {
    max-width: 100%;
    font-size: clamp(16px, 1.2vw, 17px);
    line-height: 1.4;
    white-space: normal;
    overflow-wrap: anywhere;
}

.card-label,
[class*="kicker"],
[class*="eyebrow"],
[class*="caption"] {
    color: #607472;
    font-size: 15px;
    font-weight: 900;
}

[class*="-note"],
[class*="-hint"],
[class*="-footnote"] {
    color: #5e7270;
    font-size: 16px;
    font-weight: 650;
    line-height: 1.65;
}

:is([class*="-card"], [class*="-panel"]),
:is([class*="-card"], [class*="-panel"]) * {
    min-width: 0;
    overflow-wrap: break-word;
}

/* 會員中心：收運前重要提醒 */
.dt5-service-guide {
    margin: 0 0 28px;
    padding: clamp(24px, 3.2vw, 36px);
    border: 1px solid #d8e3df;
    border-radius: 28px;
    background: #ffffff;
    box-shadow: 0 14px 36px rgba(24, 59, 62, 0.07);
}

.dt5-service-guide-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 20px;
}

.dt5-service-guide-head h2 {
    margin: 4px 0 0;
    color: #173336;
    font-size: clamp(28px, 3vw, 36px);
    line-height: 1.25;
}

.dt5-service-guide-head > a {
    color: #315f61;
    font-size: 16px;
    font-weight: 900;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}

.dt5-service-guide-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.dt5-service-guide-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    min-width: 0;
    padding: 20px;
    border: 1px solid #dbe5e2;
    border-radius: 19px;
    background: #f7faf9;
}

.dt5-service-guide-item > span {
    flex: 0 0 auto;
    font-size: 25px;
    line-height: 1.2;
}

.dt5-service-guide-item h3 {
    margin: 0 0 6px;
    color: #173336;
    font-size: 21px;
    line-height: 1.35;
}

.dt5-service-guide-item p {
    margin: 0;
    color: #4f6765;
    font-size: 17px;
    line-height: 1.65;
}

.dt5-service-guide-line {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 54px;
    margin-top: 16px;
    padding: 13px 18px;
    border-radius: 16px;
    background: #183b3e;
    color: #ffffff;
    font-size: 17px;
    font-weight: 900;
    text-align: center;
    text-decoration: none;
}

.dt5-member-footer {
    gap: 18px;
}

.dt5-member-footer nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px 16px;
}

.dt5-member-footer nav a {
    color: inherit;
    font-size: 15px;
    font-weight: 850;
    text-underline-offset: 3px;
}

.registration-consent-list {
    display: grid;
    gap: 12px;
    margin: 18px 0;
}

.registration-consent-list .terms-agreement {
    margin: 0;
}

.registration-consent-list .terms-agreement label {
    align-items: flex-start;
}

.registration-consent-list .terms-agreement span {
    font-size: 16px;
    line-height: 1.65;
}

.registration-consent-list .terms-agreement a {
    font-weight: 900;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}

@media (max-width: 760px) {
    .dt5-service-guide-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .dt5-service-guide-grid {
        grid-template-columns: 1fr;
    }

    .dt5-service-guide-item {
        padding: 17px;
    }

    .dt5-member-footer nav {
        justify-content: flex-start;
    }
}