body {
    background: #fff;
}

a {
    text-decoration: none;
}

.sidebar {
    min-height: 100vh;
    background: #253B4C;
    color: #fff;
    border-right: 1px solid #ececec;
}

.sidebar .logo {
    height: 80px;
    font-weight: bold;
    font-size: 1.3rem;
    color: #ffffff;
    border-bottom: 1px solid #ececec;
}

.sidebar .logo svg {
    vertical-align: middle;
}

.sidebar .nav-link {
    color: #fff;
    border: none;
    border-radius: 8px;
    margin-bottom: 6px;
    letter-spacing: 2px;
}

.sidebar .nav-link.active,
.sidebar .nav-link.active:hover {
    background: #B7792E;
    color: #ffffff;
}

.sidebar .nav-link:hover {
    background: #b68549;
}

.sidebar .logout {
    color: #888;
}

.sidebar .logout:hover {
    color: #b68549;
}

.sidebar .support {
    color: #22c55e;
}

.sidebar .support:hover {
    background: #e0fbe6;
}

.card {
    box-shadow: 0 2px 8px 0 rgba(16, 30, 54, .3) !important;
}

.card:hover {
    box-shadow: 0 4px 16px 0 rgba(16, 30, 54, .6) !important;
}

.tool-card {
    border: 1px solid #ececec;
    border-radius: 18px;
    background: #fff;
    transition: box-shadow .2s;
    min-width: 270px;
}

.tool-icon {
    width: 40px;
    height: auto;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: left;
}

.tool-card .desc {
    align-items: flex-start;
    /* 讓描述自動撐開剩餘空間 */
    flex-grow: 1;
    word-break: break-word;
}

.tool-card .star {
    position: absolute;
    top: 18px;
    right: 10px;
    color: #e5e7eb;
}

.tool-card .star:hover {
    color: #B7792E;
}

.tool-card .star .bi-star-fill {
    color: #B7792E;
}

.tool-card .badge {
    font-size: 0.85em;
}

.user-info {
    font-size: 0.95em;
}

.user-info .plan {
    color: #888;
}

.user-info .credits {
    color: #B7792E;
}

.header-bar {
    height: 80px;
    background: #fff;
    border-bottom: 1px solid #ececec;
    padding: 0.5rem 1rem;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1rem;
}

.header-bar .point-text {
    font-size: 1.2em;
}

@media screen and (max-width: 767.98px) {
    .header-bar {
        height: 56px;
        padding: 0;
        justify-content: center;
        font-size: 1em;
    }

    .header-bar .point-text {
        font-size: 1em;
    }
}


.text-orange-500 {
    color: #B7792E;
}

.btn-primary {
    background: #B7792E;
    border: 1px solid #B7792E;
    color: #fff;
    transition: background-color 0.2s;
}

.btn-primary:hover,
.btn-primary:focus {
    background: #9b5703;
    border: 1px solid #B7792E;
    color: #fff5e9;
}

.btn-primary:active,
.btn-primary:focus {
    background: #B7792E;
    color: #fff;
}

.btn-primary:disabled {
    background: #b68951;
    color: #fff;
    opacity: 0.5;
}

.btn-primary-light {
    background: #b7874c;
    color: #B7792E;
    transition: background-color 0.2s;
}

.btn-primary-light:hover {
    background: #b9a080;
    color: #ba741f;
    opacity: .5;
}

.btn-primary-light:active,
.btn-primary-light:focus {
    background: #b89a76;
    color: #ba741f;
}

.btn-outline-primary {
    background: transparent;
    color: #B7792E;
    border: 1px solid #B7792E;
}

.btn-outline-primary:hover {
    background: #fef3e4;
    color: #ba741f;
    border: 1px solid #b7792e;
}

.btn-outline-primary.disabled {
    background: #f5f5f5 !important;
    color: #666 !important;
    border: 1px solid #B7792E !important;
}

.btn-outline-primary:focus,
.btn-outline-primary:active,
.btn-outline-primary.active {
    background: #b7792e !important;
    color: #fff !important;
    border: 1px solid #b7792e !important;
}

.btn-outline-light {
    background: transparent;
    color: #fff;
    border: 1px solid #ececec;
}

.btn-outline-light:hover {
    background: #f3f4f6;
    color: #222;
    border: 1px solid #b8b8b8;
}

.btn-outline-light:disabled {
    background: transparent;
    color: #888;
    border: 1px solid #ececec;
    opacity: 0.5;
}

.text-black-222 {
    color: #222;
}

.text-blue2 {
    color: #253B4C;
}

.text-yellow2 {
    color: #B7792E;
}

.text-yellow2:hover {
    color: #9b5705;
}

.text-line {
    color: #22c55e;
}

.text-blue-333 {
    color: #333333;
}

.bg-yellow2 {
    background: #B7792E;
    color: #fff;
}

.bg-blue2 {
    background: #253B4C;
    color: #fff;
}

.bg-orange-100 {
    background: #ffedd5;
}

.bg-primary {
    background: #B7792E;
    background-color: #B7792E !important;
    color: #fff;
}

.cursor-pointer {
    cursor: pointer !important;
}

.border-dashed {
    border-style: dashed !important;
}

/* 手機 header */
.mobile-header {
    height: 56px;
    z-index: 1041;
    position: sticky;
    top: 0;
    color: #fff;
}

#sidebarToggle .bi,
#sidebarClose .bi {
    font-size: 1.8rem;
}

/* Sidebar RWD */
@media (max-width: 767.98px) {
    .sidebar {
        position: fixed;
        top: 0;
        left: -100vw;
        width: 80vw;
        max-width: 320px;
        height: 100vh;
        z-index: 1042;
        transition: left 0.3s;
        box-shadow: 2px 0 16px rgba(0, 0, 0, 0.08);
        border-right: 1px solid #ececec;
        overflow-y: auto;
    }

    .sidebar.show {
        left: 0;
    }

    .container-fluid {
        padding-left: 0 !important;
    }

    .sidebar .logo {
        display: none;
    }
}

/* 遮罩 */
.sidebar-backdrop {
    display: none;
}

@media (max-width: 767.98px) {
    .sidebar-backdrop {
        display: none;
        position: fixed;
        z-index: 1041;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.15);
    }

    .sidebar.show~.sidebar-backdrop {
        display: block;
    }
}

.pricing-card {
    border-radius: 1.5rem;
    background-color: #f9f8f8;
    box-shadow: 0 4px 16px 0 rgba(7, 9, 14, 0.2) !important;
    transition: transform .2s, box-shadow .2s;
}

.pricing-card:hover,
.pricing-card.hilight {
    transform: translateY(-8px) scale(1.03);
    box-shadow: 0 8px 32px 0 rgba(249, 115, 22, .12);
}

.pricing-card.featured {
    border: 2px solid #B7792E !important;
    z-index: 2;
}

.tool-ajax-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(255, 255, 255, 0.7);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity .2s;
}

.tool-ajax-overlay .spinner-border {
    width: 3rem;
    height: 3rem;
    color: #B7792E;
}

.tool-ajax-overlay.hide {
    opacity: 0;
    pointer-events: none;
}

.h-80 {
    height: 80% !important;
}

.h-90 {
    height: 90% !important;
}

.page-pagination .pagination .page-item.active .page-link {
    background-color: #253B4C;
    border-color: #052c49;
    color: #fff;
}

.page-pagination .pagination .page-link:hover,
.page-pagination .pagination .page-link:focus {
    background-color: #B7792E;
    color: #fff;
}

.page-pagination .pagination .page-link {
    color: #253B4C;
    border-color: #253B4C;
    background-color: #fff;
    transition: all .2s;
}

.line-login-btn {
    background-color: #06C755 !important;
    color: #fff !important;
    border: none !important;
    font-weight: 500;
}

.line-login-btn:hover,
.line-login-btn:focus {
    background-color: #05b34f !important;
    color: #fff !important;
}

.line-login-btn img {
    vertical-align: middle;
}

.login-card .logo-title {
    color: #1C3342;
    font-size: 1.4rem;
    font-weight: 600;
}

.login-card .title2 {
    color: #B7792E;
}

@media screen and (max-width: 767.98px) {
    .login-card .login-terms {
        font-size: 0.75rem;
    }

    .footer-copyright {
        font-size: 0.8rem;
    }
}

.form-check-input:checked {
    background-color: #B7792E;
    border-color: #B7792E;
}

/* 工具 tab bar 圖片風格 */
.tool-tab-bar {
    padding-top: 3rem;
    padding-right: 3rem;
    padding-left: 3rem;
}

.tool-tab-bar .tool-tabs {
    background: #f5f5f5;
    border-radius: 2em;
    padding: 0.5em 1em;
    margin-bottom: 1.5em;
    display: flex;
    align-items: center;
    border-bottom: none;
    letter-spacing: 1.5px;
}

.tool-tab-bar .nav-item {
    margin-right: 0.5em;
}

.tool-tab-bar .nav-link {
    color: #888;
    background: transparent;
    border: none;
    border-radius: 2em;
    padding: 0.3em 1.5em;
    font-size: 1em;
    transition: background 0.2s, color 0.2s;
}

.tool-tab-bar .nav-link.active {
    background: #b7792e;
    color: #fff;
    box-shadow: 0 2px 8px rgba(183, 121, 46, 0.08);
}

.tool-tab-bar .nav-link:not(.active):hover {
    background: #dfbc91;
    color: #fff;
}

.checkout-alert {
    margin-bottom: 2rem;
}

@media (max-width: 768.98px) {
    .tool-tab-bar {
        padding-top: 1.5rem;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    .tool-tab-bar .nav-link {
        font-size: 0.90em;
        padding: 0.3em 0.3em;
        min-width: 80px;
        border-radius: 1.2em;
    }

    .tool-tab-bar .tool-tabs {
        padding: 0.3em 0.5em;
        margin-bottom: 1em;
        flex-wrap: wrap;
        overflow-x: auto;
    }

    .tool-tab-bar .tool-tabs .nav-item {
        flex: 1 1 0;
        margin-right: 0.5em;
        text-align: center;
    }

    .checkout-alert {
        font-size: 0.8rem;
    }
}

#output-main {
    height: calc(100vh - 220px);
}

@media (max-width: 768.98px) {
    #output-main {
        height: 500px;
    }
}

#output {
    width: 100%;
    height: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: auto;
    word-break: break-word;
    box-sizing: border-box;
    display: block;
    scrollbar-width: thin;
    scrollbar-color: #B7792E #ffe4b3;
}

/* Webkit (Chrome, Edge, Safari) */
#output::-webkit-scrollbar {
    width: 10px;
    height: 10px;
    background: #ffe4b3;
    /* 更顯眼的淡橘色，可依主色調調整 */
    border-radius: 8px;
}

#output::-webkit-scrollbar-track {
    background: #ffe4b3;
    /* 顯眼底色 */
    border-radius: 8px;
}

#output::-webkit-scrollbar-thumb {
    background: #B7792E;
    border-radius: 8px;
    border: 2px solid #ffe4b3;
}

#output::-webkit-scrollbar-thumb:hover {
    background: #9b5703;
}

#output * {
    max-width: 100%;
    box-sizing: border-box;
    word-break: break-word;
    white-space: normal;
}

#output iframe {
    position: inherit !important;
    width: 100% !important;
    height: auto !important;
    overflow: auto !important;
}

.video-fullscreen {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}

#tabTips .container-fluid img {
    max-width: 100%;
    height: auto;
}

.fancy-loading {
    background: linear-gradient(135deg, #fff7e6 0%, #ffe4b3 100%);
    box-shadow: 0 0 32px 0 #b7792e33;
    z-index: 10;
}

.fancy-loading .text-shadow {
    text-shadow: 0 2px 8px #b7792e33;
    letter-spacing: 1px;
}

.fancy-spinner {
    display: flex;
    gap: 0.5em;
    align-items: center;
    justify-content: center;
}

.fancy-spinner .dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #b7792e;
    opacity: 0.7;
    animation: fancy-bounce 1s infinite alternate;
    box-shadow: 0 0 8px #b7792e99;
}

.fancy-spinner .dot:nth-child(2) {
    animation-delay: 0.2s;
    background: #ffb84d;
}

.fancy-spinner .dot:nth-child(3) {
    animation-delay: 0.4s;
    background: #ffd699;
}

@keyframes fancy-bounce {
    0% {
        transform: translateY(0);
        opacity: 0.7;
    }

    100% {
        transform: translateY(-18px);
        opacity: 1;
    }
}

input[readonly] {
    background-color: #f5f5f5 !important;
    cursor: not-allowed !important;
}