:root {
    --shim-bg: #f5f7fa;
    --shim-text: #1d1d1f;
    --shim-muted: #64748b;
    --shim-border: #e2e8f0;
    --shim-hover: #f8fafc;
}

body {
    font-family: "Inter", "Noto Sans SC", sans-serif;
    background: var(--shim-bg) !important;
    color: var(--shim-text) !important;
}

.font-serif-heading {
    font-family: "Crimson Pro", "Noto Serif SC", serif;
}

#shim-grid-bg {
    background-image: linear-gradient(#000 1px, transparent 1px), linear-gradient(90deg, #000 1px, transparent 1px);
    background-size: 24px 24px;
}

.scrollbar-hide::-webkit-scrollbar {
    display: none;
}

.scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Keep Tailwind animate utility names usable without plugin build */
@keyframes shimFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes shimSlideInFromBottom {
    from {
        opacity: 0;
        transform: translateY(24px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes shimZoomIn95 {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.animate-in {
    animation-fill-mode: both;
}

.fade-in {
    animation-name: shimFadeIn;
}

.slide-in-from-bottom-6 {
    animation-name: shimSlideInFromBottom;
}

.zoom-in-95 {
    animation-name: shimZoomIn95;
}

.duration-200 { animation-duration: 0.2s; }
.duration-300 { animation-duration: 0.3s; }
.duration-700 { animation-duration: 0.7s; }

/* ---------- Header / Navigation ---------- */
#mainNav {
    box-shadow: none !important;
}

#mainNav > div {
    background: rgba(255, 255, 255, 0.9) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--shim-border) !important;
}

#mainNav .nav-item {
    position: relative;
    overflow: visible;
    background: transparent !important;
    color: #475569;
}

#mainNav .nav-item::before,
#mainNav .nav-item::after {
    content: none !important;
}

#mainNav .nav-item:hover {
    background: #f8fafc !important;
    color: #1d1d1f !important;
}

#mainNav .nav-item.nav-active {
    color: #1d1d1f !important;
    background: #f1f5f9 !important;
    font-weight: 700;
}

#mainNav .auth-btn-login {
    background: #f1f5f9 !important;
    color: #1d1d1f !important;
    border-radius: 0.5rem !important;
    padding: 0.625rem 1.25rem !important;
    box-shadow: none !important;
}

#mainNav .auth-btn-login:hover {
    background: #1d1d1f !important;
    color: #ffffff !important;
    transform: none !important;
}

#mainNav .sys-avatar {
    width: 34px;
    height: 34px;
    border-radius: 9999px;
    background: #e7edfb;
    color: #2c4f7a;
    font-size: 14px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

#mainNav .nav-dropdown {
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px) scale(0.98);
    transform-origin: top left;
    transition: all 0.2s ease;
    border: 1px solid #e2e8f0 !important;
    border-radius: 0.75rem !important;
    box-shadow: 0 20px 40px rgba(148, 163, 184, 0.28) !important;
    background: #ffffff !important;
    padding: 0.375rem !important;
}

#mainNav .group:hover > .nav-dropdown,
#mainNav .user-trigger:hover > .nav-dropdown,
#mainNav #helpersDropdown.is-open > .nav-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

#mainNav #helpersMenu.nav-dropdown {
    width: 8rem !important;
}

#mainNav .mobile-nav-panel {
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
}

#mainNav .mobile-nav-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    color: #334155;
    font-size: 13px;
    font-weight: 600;
    background: #ffffff;
}

#mainNav .mobile-nav-link.nav-active {
    background: #f1f5f9;
    color: #1d1d1f;
    border-color: #dbe4ef;
}

#mainNav .mobile-helper-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    font-size: 12px;
}

/* ---------- User Center Main Layout ---------- */
.service-page {
    background: transparent;
}

.uc-layout.service-layout {
    max-width: 1600px !important;
    gap: 2rem !important;
    align-items: flex-start !important;
}

.service-sidebar-wrap {
    top: 112px;
}

.workspace-board {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
    border-radius: 1rem !important;
}

.workspace-board .space-y-12 {
    gap: 3rem !important;
}

/* In shim source, section shell is visually merged inside one white workspace */
.workspace-board .service-shell {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    overflow: visible !important;
}

/* ---------- Sidebar ---------- */
.service-sidebar-wrap .h-full.flex.flex-col.py-6.bg-transparent {
    height: 100%;
}

.service-sidebar-wrap .space-y-8 {
    gap: 2rem !important;
}

.service-sidebar-wrap h4 {
    margin-bottom: 0.5rem !important;
}

.uc-menu-item {
    text-decoration: none !important;
    min-height: auto !important;
    padding: 0.5rem 0.75rem !important;
    border-radius: 0.5rem !important;
    color: #475569 !important;
    background: transparent !important;
    transition: all 0.2s ease !important;
}

.uc-menu-item:hover {
    color: #1d1d1f !important;
    background: #f8fafc !important;
    transform: none !important;
}

.uc-menu-item i[data-lucide] {
    transition: color 0.2s ease;
}

.uc-menu-item.is-active {
    font-weight: 700;
}

.uc-menu-item.is-active::after {
    content: none !important;
}

.uc-menu-item[data-uc-menu="paper"].is-active {
    background: #eff6ff !important;
    color: #2563eb !important;
    box-shadow: inset 0 0 0 1px #bfdbfe;
}

.uc-menu-item[data-uc-menu="paper"].is-active i[data-lucide] { color: #2563eb !important; }

.uc-menu-item[data-uc-menu="aigc_check"].is-active {
    background: #f5f3ff !important;
    color: #7c3aed !important;
    box-shadow: inset 0 0 0 1px #ddd6fe;
}

.uc-menu-item[data-uc-menu="aigc_check"].is-active i[data-lucide] { color: #7c3aed !important; }

.uc-menu-item[data-uc-menu="rewrite_ai"].is-active {
    background: #eef2ff !important;
    color: #4f46e5 !important;
    box-shadow: inset 0 0 0 1px #c7d2fe;
}

.uc-menu-item[data-uc-menu="rewrite_ai"].is-active i[data-lucide] { color: #4f46e5 !important; }

.uc-menu-item[data-uc-menu="rewrite_manual"].is-active {
    background: #fff7ed !important;
    color: #ea580c !important;
    box-shadow: inset 0 0 0 1px #fed7aa;
}

.uc-menu-item[data-uc-menu="rewrite_manual"].is-active i[data-lucide] { color: #ea580c !important; }

.uc-menu-item[data-uc-menu="self_check"].is-active {
    background: #ecfdf5 !important;
    color: #059669 !important;
    box-shadow: inset 0 0 0 1px #a7f3d0;
}

.uc-menu-item[data-uc-menu="self_check"].is-active i[data-lucide] { color: #059669 !important; }

.uc-menu-item[data-uc-menu="ai_writing"].is-active {
    background: #ecfeff !important;
    color: #0891b2 !important;
    box-shadow: inset 0 0 0 1px #a5f3fc;
}

.uc-menu-item[data-uc-menu="ai_writing"].is-active i[data-lucide] { color: #0891b2 !important; }

.uc-menu-item[data-uc-menu="ai_ppt"].is-active {
    background: #fdf2f8 !important;
    color: #db2777 !important;
    box-shadow: inset 0 0 0 1px #fbcfe8;
}

.uc-menu-item[data-uc-menu="ai_ppt"].is-active i[data-lucide] { color: #db2777 !important; }

.uc-menu-item[data-uc-menu="helper_red"].is-active {
    background: #fef2f2 !important;
    color: #dc2626 !important;
    box-shadow: inset 0 0 0 1px #fecaca;
}

.uc-menu-item[data-uc-menu="helper_red"].is-active i[data-lucide] { color: #dc2626 !important; }

.uc-menu-item[data-uc-menu="helper_format"].is-active {
    background: #fffbeb !important;
    color: #d97706 !important;
    box-shadow: inset 0 0 0 1px #fde68a;
}

.uc-menu-item[data-uc-menu="helper_format"].is-active i[data-lucide] { color: #d97706 !important; }

.uc-menu-item[data-uc-menu="helper_trans"].is-active {
    background: #f0f9ff !important;
    color: #0284c7 !important;
    box-shadow: inset 0 0 0 1px #bae6fd;
}

.uc-menu-item[data-uc-menu="helper_trans"].is-active i[data-lucide] { color: #0284c7 !important; }

.uc-menu-item[data-uc-menu="helper_pdf"].is-active {
    background: #f0fdfa !important;
    color: #0d9488 !important;
    box-shadow: inset 0 0 0 1px #99f6e4;
}

.uc-menu-item[data-uc-menu="helper_pdf"].is-active i[data-lucide] { color: #0d9488 !important; }

.uc-menu-item[data-uc-menu="service_records"].is-active {
    background: #f8fafc !important;
    color: #334155 !important;
    box-shadow: inset 0 0 0 1px #e2e8f0;
}

.uc-menu-item[data-uc-menu="service_records"].is-active i[data-lucide] {
    color: #475569 !important;
}

/* ---------- Section internals / cards ---------- */
.brand-card {
    transition: all 0.3s ease;
}

.brand-card:hover {
    transform: translateY(-2px);
}

.brand-card.active {
    background: rgba(239, 246, 255, 0.65) !important;
}

body.aigc-mode .brand-card.active {
    background: rgba(245, 243, 255, 0.65) !important;
}

#ai-file-pane > div,
#manual-file-pane > div {
    min-height: 240px;
}

#ai-text-pane textarea,
#manual-text-pane textarea {
    min-height: 240px !important;
}

/* ---------- Shared record list ---------- */
#historySection table,
#historySection-aigc table,
#selfHistorySection table,
#aiToolsHistorySection table,
#helperHistorySection table {
    border-collapse: collapse;
}

#historySection tbody tr:hover,
#historySection-aigc tbody tr:hover,
#selfHistorySection tbody tr:hover,
#aiToolsHistorySection tbody tr:hover,
#helperHistorySection tbody tr:hover {
    background: #f8fafc;
}

#pageButtons button,
#pageButtons-aigc button,
#selfPageButtons button,
#aiToolsPageButtons button,
#helperPageButtons button {
    min-width: 28px;
    height: 28px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
    background: #ffffff;
    transition: all 0.2s ease;
}

#pageButtons button:hover,
#pageButtons-aigc button:hover,
#selfPageButtons button:hover,
#aiToolsPageButtons button:hover,
#helperPageButtons button:hover {
    border-color: #cbd5e1;
    color: #334155;
}

#pageButtons button.is-active,
#pageButtons-aigc button.is-active,
#selfPageButtons button.is-active,
#aiToolsPageButtons button.is-active,
#helperPageButtons button.is-active {
    background: #1d1d1f;
    color: #ffffff;
    border-color: #1d1d1f;
}

/* keep submit buttons visually active (match reference) */
#btn-submit,
#btn-submit-aigc {
    opacity: 1 !important;
}

#btn-submit:disabled,
#btn-submit-aigc:disabled {
    opacity: 1 !important;
    cursor: pointer !important;
    filter: none !important;
}

/* ---------- Footer ---------- */
#smartFooter {
    background: transparent !important;
}

#smartFooter i[data-lucide] {
    width: 18px;
    height: 18px;
    stroke-width: 1.8;
}

/* ---------- Responsive ---------- */
@media (max-width: 1279px) {
    .service-sidebar-wrap {
        top: 92px;
    }
}

@media (max-width: 1023px) {
    .service-sidebar-wrap {
        position: relative !important;
        top: 0 !important;
        height: auto !important;
        width: 100% !important;
    }

    .workspace-board {
        padding: 1rem !important;
    }

    .service-sidebar-wrap > aside {
        border: none;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        padding: 0.5rem;
    }

    .service-sidebar-wrap .space-y-8 {
        gap: 0.5rem !important;
    }

    .service-sidebar-wrap h4 {
        display: none;
    }

    .service-sidebar-wrap ul.space-y-1 {
        display: flex;
        gap: 0.35rem;
        overflow-x: auto;
        white-space: nowrap;
    }

    .service-sidebar-wrap ul.space-y-1 li {
        flex: 0 0 auto;
    }

    .service-sidebar-wrap .uc-menu-item {
        min-height: 36px;
        padding: 0.38rem 0.62rem !important;
        font-size: 13px;
    }
}

@media (max-width: 640px) {
    #mainNav .auth-btn-login {
        padding: 0.46rem 0.86rem !important;
        font-size: 13px;
    }

    #mainNav .user-trigger .nav-dropdown {
        right: 0;
        width: min(320px, 92vw) !important;
    }
}

/* QR code hover popup */
.qr-hover-wrap .qr-popup { display: none; pointer-events: none; }
.qr-hover-wrap:hover .qr-popup { display: block; pointer-events: auto; }