:root {
            --surface: #f5f4ed;
            --surface-low: #f0f0e8;
            --surface-mid: #e8e8df;
            --ink: #2c2c2c;
            --ink-soft: #7a7a7a;
            --sage: #5c614e;
            --indigo: #5d5c7a;
            --outline: rgba(0, 0, 0, 0.06);
        }

        body {
            opacity: 0;
            transition: opacity 0.3s ease-in-out;
            font-family: Inter, sans-serif;
            color: var(--ink);
            background: var(--surface);
        }

        .font-serif,
        h1,
        h2,
        h3,
        #main-nav .nav-btn {
            font-family: Newsreader, serif;
        }

        .glass {
            background: color-mix(in srgb, var(--surface) 86%, white 14%);
            border: 1px solid var(--outline);
            box-shadow: 0 18px 44px rgba(49, 51, 46, 0.05);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
        }

        .glass-nav {
            background: color-mix(in srgb, var(--surface-low) 90%, white 10%);
            border: 1px solid var(--outline);
            box-shadow: 0 12px 30px rgba(49, 51, 46, 0.04);
        }

        .glass-input {
            background: color-mix(in srgb, var(--surface-low) 86%, white 14%);
            border: 1px solid var(--outline);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
        }

        .glass-item {
            background: var(--surface-low);
            border: 1px solid var(--outline);
        }

        @keyframes file-item-in {
            from {
                opacity: 0;
                transform: translateY(12px) scale(0.97);
            }
            to {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
        }
        .file-item-animate {
            animation: file-item-in 0.35s cubic-bezier(0.16, 1, 0.3, 1) both;
        }

        #main-nav .nav-btn {
            letter-spacing: 0.01em;
            position: relative;
            overflow: hidden;
            transition:
                background-color 0.22s ease,
                border-color 0.22s ease,
                color 0.22s ease,
                transform 0.18s cubic-bezier(0.16, 1, 0.3, 1);
            will-change: transform;
        }

        #main-nav .nav-btn.nav-active {
            background: var(--surface-mid) !important;
            border: 1px solid var(--outline);
            color: var(--ink) !important;
        }

        #main-nav .nav-btn::after {
            content: "";
            position: absolute;
            inset: 0;
            border-radius: inherit;
            background: radial-gradient(circle at var(--tap-x, 50%) var(--tap-y, 50%), rgba(255, 255, 255, 0.42), transparent 42%);
            opacity: 0;
            transform: scale(0.82);
            transition: opacity 0.24s ease, transform 0.34s cubic-bezier(0.16, 1, 0.3, 1);
            pointer-events: none;
        }

        #main-nav .nav-btn:hover {
            transform: translateY(-1px);
        }

        #main-nav .nav-btn:active {
            transform: translateY(1px) scale(0.985);
        }

        #main-nav .nav-btn:active::after {
            opacity: 1;
            transform: scale(1);
            transition-duration: 0.12s;
        }

        #main-nav .nav-btn svg,
        #main-nav .nav-btn span,
        #main-nav .nav-btn>div {
            position: relative;
            z-index: 1;
            transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.22s ease;
        }

        #main-nav .nav-btn:hover svg {
            transform: translateY(-1px);
        }

        #main-nav .nav-btn.nav-active svg {
            transform: scale(1.04);
        }



        #upload-card,
        #page-ai,
        #page-about {
            background: linear-gradient(180deg, #f8f7f1 0%, #f2f1ea 100%) !important;
        }

        #notice-card {
            padding: 1.75rem 2rem;
            background: #fff !important;
            border: 1px solid rgba(92, 97, 78, 0.08);
            box-shadow: 0 18px 48px rgba(49, 51, 46, 0.035);
        }

        #notice-content {
            max-width: 72rem;
        }

        #upload-card h1 {
            font-size: clamp(2rem, 3.2vw, 3rem);
            font-style: normal;
        }

        #student-auth-overlay .auth-shell {
            background: linear-gradient(145deg, #21293b 0%, #364b7b 65%, #4f698f 100%);
            border: 1px solid rgba(255, 255, 255, 0.16);
            box-shadow: 0 24px 64px rgba(17, 24, 39, 0.35);
        }

        #student-auth-overlay .auth-panel {
            background: rgba(251, 249, 244, 0.85);
            border: 1px solid rgba(255, 255, 255, 0.45);
            backdrop-filter: blur(14px);
            -webkit-backdrop-filter: blur(14px);
        }

        /* #student-auth-overlay button, */
        #change-password-overlay button,
        #change-password-modal button {
            box-shadow: none !important;
        }

        #first-change-password-btn,
        #change-password-submit {
            background: #2c2c2c !important;
            color: #f5f4ed !important;
            border: none !important;
        }

        #change-password-cancel {
            background: transparent !important;
            color: var(--ink) !important;
            border: 1px solid var(--outline) !important;
        }

        #student-logout-btn {
            background: transparent !important;
            color: #8a8a8a !important;
            border: none !important;
        }

        #student-logout-btn:hover {
            color: #c45c5c !important;
        }

        ::-webkit-scrollbar {
            width: 7px;
            height: 7px;
        }

        ::-webkit-scrollbar-track {
            background: transparent;
        }

        ::-webkit-scrollbar-thumb {
            background: rgba(92, 97, 78, 0.28);
            border-radius: 10px;
        }




        #page-ai {
            transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1), margin-left 0.6s, opacity 0.4s, transform 0.6s;
        }

        @media (min-width: 768px) {
            .view-home #app-container {
                max-width: 88rem;
            }

            .view-home #page-history {
                width: 0;
                opacity: 0;
                margin-left: 0;
                transform: translateX(30px);
                pointer-events: none;
            }

            .view-home #page-ai {
                display: none;
            }

            .view-home #page-home {
                width: 100%;
                opacity: 1;
                display: block;
            }

            .view-home #page-about {
                display: none;
            }

            .view-history #app-container {
                max-width: 88rem;
            }

            .view-history #page-history {
                width: 470px;
                opacity: 1;
                margin-left: 1.5rem;
                transform: translateX(0);
                pointer-events: auto;
                min-height: 0;
            }

            .view-history #page-ai {
                width: 0;
                opacity: 0;
                margin-left: 0;
                transform: translateX(30px);
                pointer-events: none;
            }

            .view-history #page-home {
                display: none;
            }

            .view-history #page-history {
                width: 100%;
                opacity: 1;
                display: block;
            }

            .view-history #page-about {
                display: none;
            }

            .view-about #app-container {
                max-width: 52rem;
            }

            .view-about #workspace {
                display: none;
            }

            .view-about #page-about {
                display: block;
            }
        }

        @media (max-width: 767px) {
            .view-home #app-container {
                max-width: 48rem;
            }

            .view-home #page-history {
                display: none;
            }

            .view-home #page-home {
                width: 100%;
                opacity: 1;
                display: block;
            }

            .view-home #page-ai {
                width: 100%;
                opacity: 1;
                margin-left: 0;
                transform: translateX(0);
                pointer-events: auto;
                display: block;
                margin-top: 1rem;
            }

            .view-home #page-about {
                display: none;
            }

            .view-history #app-container {
                max-width: 48rem;
            }

            .view-history #page-history {
                width: 100%;
                opacity: 1;
                margin-left: 0;
                transform: translateX(0);
                pointer-events: auto;
                display: block;
            }

            .view-history #page-ai {
                display: none;
            }

            .view-history #page-home {
                display: none;
            }

            .view-history #page-about {
                display: none;
            }

            .view-about #app-container {
                max-width: 48rem;
            }

            .view-about #workspace {
                display: none;
            }

            .view-about #page-about {
                display: block;
            }
        }

        .nav-hidden {
            transform: translate(-50%, -150%) scale(0.85) !important;
            opacity: 0;
            pointer-events: none;
        }

        body.auth-locked #main-nav,
        body.auth-locked #app-container {
            filter: blur(8px) saturate(85%);
            opacity: 0.45;
            pointer-events: none;
            user-select: none;
        }

        /* Scholarly layout: desktop sidebar + reading canvas */
        @media (min-width: 1024px) {
            #main-nav {
                left: 0 !important;
                top: 0 !important;
                transform: none !important;
                width: 16rem !important;
                max-width: none !important;
                height: 100vh;
                border-radius: 0;
                border: none;
                box-shadow: none;
                background: var(--surface);
                z-index: 60;
            }

            #main-nav>div {
                height: 100%;
                padding: 2.5rem 1.5rem;
                display: flex;
                flex-direction: column;
                justify-content: flex-start;
                align-items: stretch;
                gap: 1.5rem;
            }

            #main-nav>div>div:first-child {
                padding: 0 0.5rem;
                border-bottom: none;
                padding-bottom: 0;
                margin-bottom: 1rem;
            }

            #main-nav>div>div:last-child {
                flex-direction: column;
                align-items: stretch;
                gap: 0.25rem;
            }

            #main-nav .nav-btn {
                width: 100%;
                text-align: left;
                border-radius: 0.5rem;
                padding: 0.85rem 1rem !important;
                font-size: 0.9rem;
                font-weight: 600;
                color: var(--ink-soft) !important;
                background: transparent !important;
                border: none;
                display: flex;
                align-items: center;
                gap: 0.75rem;
            }

            #main-nav .nav-btn.nav-active {
                background: #e8e6dc !important;
                color: var(--ink) !important;
            }

            #app-container {
                margin-left: 16rem;
                max-width: none !important;
                width: calc(100% - 16rem);
                padding: 0;
            }

            #home-detail,
            #page-history,
            #page-about {
                padding: 2.25rem 2.25rem 3rem;
            }

            #workspace {
                gap: 1.75rem;
                align-items: stretch;
            }

            #page-home,
            #page-ai,
            #page-history {
                min-height: calc(100vh - 6rem);
            }

            #page-home {
                padding-right: 0 !important;
            }

            #home-overview:not(.hidden) {
                display: grid;
                grid-template-columns: minmax(0, 1fr) 340px;
                gap: 0;
                align-items: stretch;
                min-height: 100vh;
            }

            #home-overview>section {
                background: transparent;
                padding: 4rem 5rem;
                z-index: 10;
            }

            #home-overview>aside {
                background: transparent;
                padding: 4rem 2rem;
                border: none;
            }

            .view-home #page-ai,
            .view-history #page-history {
                width: 30rem;
                margin-left: 0;
            }

            .view-home #page-home,
            .view-history #page-home {
                width: calc(100% - 30rem - 1.75rem);
            }

            .nav-hidden {
                transform: none !important;
                opacity: 1 !important;
                pointer-events: auto !important;
            }
        }

        #page-home,
        #page-history {
            display: none;
        }

        .view-home #page-home {
            display: block;
        }

        .view-history #page-history {
            display: block;
        }

        .view-about #workspace {
            display: none;
        }

        .view-home #workspace,
        .view-history #workspace {
            display: block;
        }

        .view-home #page-home,
        .view-history #page-home {
            width: auto !important;
            opacity: 1 !important;
            padding-right: 0 !important;
        }

        .view-home #page-history,
        .view-history #page-history {
            width: auto !important;
            margin-left: 0 !important;
            opacity: 1 !important;
            transform: none !important;
            pointer-events: auto !important;
        }

        #home-detail #page-ai {
            width: auto !important;
            margin-left: 0 !important;
            opacity: 1 !important;
            transform: none !important;
            pointer-events: auto !important;
        }

        #workspace {
            view-transition-name: main-content;
        }

        ::view-transition-old(main-content) {
            animation: content-out 0.12s ease forwards;
            will-change: opacity;
        }

        ::view-transition-new(main-content) {
            animation: content-in 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
            will-change: transform, opacity;
        }

        @keyframes content-in {
            0% {
                transform: translate3d(0, 16px, 0);
                opacity: 0;
            }

            100% {
                transform: translate3d(0, 0, 0);
                opacity: 1;
            }
        }

        @keyframes content-out {
            0% {
                opacity: 1;
            }

            100% {
                opacity: 0;
            }
        }

        @keyframes card-exit {
            0% {
                transform: scale(1);
                opacity: 1;
            }

            100% {
                transform: scale(0.85);
                opacity: 0;
            }
        }

        @keyframes confirm-overlay-in {
            from {
                opacity: 0;
            }

            to {
                opacity: 1;
            }
        }

        @keyframes confirm-box-in {
            from {
                opacity: 0;
                transform: translate(-50%, -50%) scale(0.92);
            }

            to {
                opacity: 1;
                transform: translate(-50%, -50%) scale(1);
            }
        }

        /* Prevent the rest of the page (like sidebar) from animating */
        ::view-transition-old(root),
        ::view-transition-new(root) {
            animation: none;
            mix-blend-mode: normal;
        }

        ::view-transition-group(hero) {
            animation-duration: 0.4s;
            animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
        }

        .glow-capture {
            position: relative;
        }

        .glow-tilt {
            transition: transform 0.15s ease-out, box-shadow 0.2s ease;
            transform-style: preserve-3d;
            will-change: transform;
            contain: layout style paint;
        }

        .glow-tilt:hover {
            z-index: 10;
        }

        .animate-float-in {
            animation: floatIn 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
            opacity: 0;
            transform: translateY(20px);
        }

        @keyframes floatIn {
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .card-tilt {
            transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
            transform-style: preserve-3d;
        }

        .card-tilt:hover {
            box-shadow: 0 30px 60px -12px rgba(0, 0, 0, 0.12), 0 18px 36px -18px rgba(0, 0, 0, 0.08);
        }

        .btn-glow {
            position: relative;
            overflow: hidden;
            transition: all 0.3s ease;
        }

        .btn-glow::after {
            content: '';
            position: absolute;
            top: var(--glow-y, 50%);
            left: var(--glow-x, 50%);
            width: 220px;
            height: 220px;
            background: radial-gradient(circle closest-side, rgba(255, 255, 255, 0.45), transparent);
            transform: translate(-50%, -50%);
            pointer-events: none;
            opacity: 0;
            transition: opacity 0.3s;
        }

        .btn-glow:hover::after {
            opacity: 1;
        }

        /* 增加输入框的动感效果 */
        input {
            transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        }

        input:focus {
            transform: scale(1.02);
            box-shadow: 0 8px 20px -8px rgba(0, 0, 0, 0.08);
        }

        .subject-course-card .bg-\[\#efeef5\],
        .subject-course-card .bg-\[\#f0ece1\] {
            background: #f0ece1 !important;
            color: #6f695d !important;
        }

        .subject-course-card .text-\[\#6c689e\],
        .subject-course-card .text-\[\#7a7465\] {
            color: #6f695d !important;
        }

        .subject-course-card .bg-\[\#6a688a\],
        .subject-course-card .bg-\[\#656b55\] {
            background: #656b55 !important;
        }

        #mobile-assist-shell {
            display: none;
        }

        @media (max-width: 767px) {
            html {
                scroll-padding-top: 5rem;
            }

            body {
                background: linear-gradient(180deg, #f7f6ef 0%, var(--surface) 42%);
                overflow-x: hidden;
            }

            input:focus {
                transform: none;
            }

            #main-nav {
                border-left: none;
                border-right: none;
                border-top: none;
                border-radius: 0;
                background: rgba(245, 244, 237, 0.94);
                backdrop-filter: blur(14px);
                -webkit-backdrop-filter: blur(14px);
                box-shadow: 0 8px 22px rgba(49, 51, 46, 0.05);
            }

            #main-nav>div {
                padding: 0.7rem 1rem !important;
                min-height: 4.25rem;
                gap: 0.75rem;
            }

            #main-nav span.text-\[26px\] {
                font-size: 1.38rem !important;
                line-height: 1;
            }

            #main-nav>div>div:last-child {
                gap: 0.2rem !important;
                align-items: center;
                justify-content: flex-end;
                min-width: 0;
            }

            #main-nav .nav-btn {
                width: 3.25rem;
                min-height: 2.7rem;
                padding: 0.35rem 0.25rem !important;
                border-radius: 0.85rem;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                gap: 0.1rem;
                font-size: 0.75rem;
                font-weight: 700;
                line-height: 1.05;
                background: transparent !important;
                border: 1px solid transparent;
                color: var(--ink-soft) !important;
            }

            #main-nav .nav-btn svg {
                width: 1rem;
                height: 1rem;
                margin: 0 !important;
            }

            #main-nav .nav-btn.nav-active {
                background: #e8e6dc !important;
                border-color: rgba(92, 97, 78, 0.08);
            }

            #account-menu-btn span {
                max-width: 2.6rem;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            #account-settings-menu {
                position: fixed !important;
                top: 4.75rem !important;
                right: 0.75rem !important;
                bottom: auto !important;
                left: auto !important;
                transform: none !important;
                width: min(13.5rem, calc(100vw - 1.5rem)) !important;
                max-width: calc(100vw - 1.5rem) !important;
                border-radius: 1.05rem !important;
                background: rgba(251, 249, 244, 0.96) !important;
                border: 1px solid rgba(0, 0, 0, 0.08) !important;
                box-shadow: 0 18px 46px rgba(49, 51, 46, 0.14) !important;
                overflow: hidden;
            }

            #account-settings-menu>div {
                width: 100%;
                padding: 0.65rem !important;
            }

            #account-settings-menu .px-3.pb-2 {
                padding: 0.65rem 0.75rem 0.75rem !important;
                margin-bottom: 0.35rem !important;
            }

            #account-settings-menu button {
                min-height: 2.6rem;
                padding: 0.65rem 0.75rem !important;
                border-radius: 0.8rem !important;
                white-space: nowrap;
            }

            #account-settings-menu svg {
                width: 1rem;
                height: 1rem;
                flex-shrink: 0;
            }

            #account-settings-menu .h-px {
                margin: 0.35rem 0 !important;
            }

            #account-settings-menu span,
            #account-settings-menu button {
                word-break: keep-all;
            }

            #app-container {
                padding: 5.4rem 1rem 7.5rem !important;
            }

            #home-overview>section {
                max-width: none !important;
            }

            #home-overview header {
                margin-bottom: 2rem !important;
            }

            #home-overview header h1 {
                font-size: clamp(2.8rem, 13vw, 3.7rem) !important;
                line-height: 1.02 !important;
                margin-bottom: 1rem !important;
                letter-spacing: 0 !important;
                word-break: keep-all;
                overflow-wrap: normal;
            }

            #overview-user-name {
                white-space: nowrap;
            }

            #greeting-subtitle {
                font-size: 0.98rem !important;
                line-height: 1.6;
                max-width: 18rem;
            }

            #home-overview section.pt-2 {
                padding-top: 0 !important;
            }

            #home-overview section.pt-2 h2 {
                font-size: 1.35rem !important;
                margin-bottom: 1rem !important;
            }

            #home-overview section.pt-2 .h-px {
                margin-bottom: 1.1rem !important;
            }

            #subject-grid {
                gap: 1rem !important;
            }

            .subject-course-card {
                min-height: 11.2rem !important;
                padding: 1.35rem 1.45rem !important;
                border-radius: 1.15rem !important;
                box-shadow: 0 12px 32px rgba(49, 51, 46, 0.06) !important;
                transform: none !important;
            }

            .subject-course-card>div:first-child {
                display: none;
            }

            .subject-course-card .flex.items-center.justify-between.mb-5 {
                margin-bottom: 1.35rem !important;
            }

            .subject-course-card h3 {
                font-size: clamp(2.05rem, 10vw, 2.65rem) !important;
                line-height: 1.08 !important;
                margin-bottom: 1.25rem !important;
                min-height: 0;
                overflow-wrap: anywhere;
            }

            .subject-course-card .mt-auto {
                padding-top: 0.85rem !important;
            }

            .subject-course-card .text-\[11px\] {
                font-size: 0.72rem !important;
            }

            #home-overview>aside {
                display: none !important;
            }

            #ai-chat-list {
                max-height: 10rem !important;
                margin-bottom: 0.75rem !important;
            }

            #ai-chat-list .max-w-\[85\%\] {
                max-width: 92% !important;
            }

            #ai-chat-input {
                min-width: 0;
                height: 2.7rem;
                border-radius: 0.85rem !important;
                background: rgba(255, 255, 255, 0.8);
            }

            #ai-chat-send {
                width: 3.7rem;
                height: 2.7rem;
                border-radius: 0.85rem !important;
                background: var(--ink) !important;
            }

            #btt-btn {
                right: 1rem !important;
                bottom: 5.7rem !important;
                border-radius: 1rem !important;
                padding: 0.8rem !important;
            }

            #mobile-assist-shell {
                display: block;
                position: fixed;
                left: 0;
                right: 0;
                bottom: 0;
                z-index: 85;
                pointer-events: none;
                opacity: 1;
                transform: translateY(0);
                transition: opacity 0.24s ease, transform 0.42s cubic-bezier(0.16, 1, 0.3, 1);
            }

            #mobile-assist-shell.is-route-hidden {
                opacity: 0;
                transform: translateY(7rem);
            }

            .mobile-assist-capsule {
                position: absolute;
                left: 50%;
                bottom: max(0.85rem, env(safe-area-inset-bottom));
                transform: translateX(-50%);
                display: grid;
                grid-template-columns: 1fr 1fr;
                width: min(18.5rem, calc(100vw - 2rem));
                padding: 0.32rem;
                border: 1px solid rgba(0, 0, 0, 0.08);
                border-radius: 999px;
                background: rgba(251, 249, 244, 0.92);
                box-shadow: 0 18px 46px rgba(49, 51, 46, 0.18);
                backdrop-filter: blur(16px);
                -webkit-backdrop-filter: blur(16px);
                pointer-events: auto;
                opacity: 1;
                transition: transform 0.26s cubic-bezier(0.45, 0, 0.8, 0.35), opacity 0.2s ease;
            }

            .mobile-assist-capsule button {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                gap: 0.45rem;
                min-height: 2.65rem;
                border-radius: 999px;
                color: #5e6059;
                font-size: 0.82rem;
                font-weight: 800;
                transition: background 0.18s ease, color 0.18s ease;
            }

            .mobile-assist-capsule button svg {
                width: 1rem;
                height: 1rem;
            }

            .mobile-assist-capsule button.is-active,
            .mobile-assist-capsule button:active {
                background: #2c2c2c;
                color: #f5f4ed;
            }

            .mobile-assist-panel {
                position: absolute;
                left: 1rem;
                right: 1rem;
                bottom: calc(max(0.85rem, env(safe-area-inset-bottom)) + 4rem);
                max-height: min(27rem, calc(100vh - 8rem));
                display: flex;
                flex-direction: column;
                border: 1px solid rgba(0, 0, 0, 0.07);
                border-radius: 1.25rem;
                background: rgba(251, 249, 244, 0.96);
                box-shadow: 0 24px 70px rgba(49, 51, 46, 0.22);
                backdrop-filter: blur(18px);
                -webkit-backdrop-filter: blur(18px);
                overflow: hidden;
                opacity: 0;
                transform: translateY(4.5rem) scale(0.96);
                pointer-events: none;
                transition: opacity 0.34s ease, transform 0.48s cubic-bezier(0.16, 1, 0.3, 1);
            }

            .mobile-assist-panel.is-open {
                opacity: 1;
                transform: translateY(0) scale(1);
                pointer-events: auto;
                transition-delay: 0.12s;
            }

            .mobile-assist-panel-head {
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 1rem;
                padding: 0.95rem 1rem 0.8rem;
                border-bottom: 1px solid rgba(0, 0, 0, 0.06);
                background: rgba(255, 255, 255, 0.36);
            }

            .mobile-assist-panel-head p {
                margin: 0 0 0.15rem;
                color: #8a8a8a;
                font-size: 0.62rem;
                font-weight: 900;
                letter-spacing: 0.14em;
                text-transform: uppercase;
            }

            .mobile-assist-panel-head h3 {
                margin: 0;
                color: #2c2c2c;
                font-family: Inter, sans-serif;
                font-size: 1rem;
                font-weight: 900;
            }

            .mobile-assist-close {
                width: 2rem;
                height: 2rem;
                border-radius: 999px;
                background: #efeee7;
                color: #5e6059;
                font-size: 1.25rem;
                line-height: 1;
                font-weight: 600;
            }

            .mobile-assist-pane {
                min-height: 0;
                padding: 0.9rem 1rem 1rem;
                overflow-y: auto;
            }

            .mobile-upcoming-list button {
                padding: 0.35rem 0.15rem !important;
            }

            .mobile-upcoming-list button:last-child .pb-4 {
                padding-bottom: 0 !important;
            }

            .mobile-assist-empty {
                padding: 1.4rem 0.75rem;
                border: 1px dashed rgba(0, 0, 0, 0.1);
                border-radius: 1rem;
                color: #7a7a7a;
                font-size: 0.86rem;
                font-weight: 700;
                text-align: center;
                background: rgba(255, 255, 255, 0.38);
            }

            .mobile-ai-chat-list {
                max-height: 17rem;
                min-height: 5rem;
                overflow-y: auto;
                padding-right: 0.15rem;
                margin-bottom: 0.8rem;
                display: flex;
                flex-direction: column;
                gap: 0.62rem;
            }

            .mobile-ai-chat-list .max-w-\[85\%\] {
                max-width: 92% !important;
            }

            .mobile-ai-input-row {
                display: grid;
                grid-template-columns: minmax(0, 1fr) 3.6rem;
                gap: 0.55rem;
            }

            .mobile-ai-input-row input {
                min-width: 0;
                height: 2.75rem;
                border: 1px solid rgba(0, 0, 0, 0.08);
                border-radius: 0.85rem;
                background: rgba(255, 255, 255, 0.78);
                padding: 0 0.9rem;
                color: #2c2c2c;
                font-size: 0.85rem;
                outline: none;
            }

            .mobile-ai-input-row button {
                border-radius: 0.85rem;
                background: #2c2c2c;
                color: #f5f4ed;
                font-size: 0.82rem;
                font-weight: 800;
            }

            body.auth-locked #mobile-assist-shell {
                display: none;
            }

            #home-detail {
                padding-bottom: 1rem;
            }

            #back-to-overview {
                width: 100%;
                padding: 0.75rem 1rem !important;
                border-radius: 0.9rem !important;
            }

            #home-detail .grid {
                gap: 1.25rem !important;
            }

            #detail-title {
                font-size: clamp(2.65rem, 13vw, 3.4rem) !important;
                line-height: 1.02 !important;
                margin-bottom: 1rem !important;
            }

            #detail-desc {
                font-size: 1.05rem !important;
                line-height: 1.6 !important;
                margin-bottom: 1.5rem !important;
            }

            #notice-card {
                padding: 1.15rem !important;
                border-radius: 1rem !important;
                background: #fff !important;
                border: 1px solid rgba(92, 97, 78, 0.1);
            }

            #notice-card h2 {
                font-size: 1.85rem !important;
            }

            #upload-card {
                padding: 1.25rem !important;
                border-radius: 1.1rem !important;
            }

            #upload-card h2 {
                font-size: 2rem !important;
            }

            #dropzone {
                padding: 2rem 1rem !important;
            }

            #page-history {
                padding-top: 0.5rem;
            }

            #page-history header {
                margin-bottom: 1.5rem !important;
            }

            #page-history header h1 {
                font-size: 2.8rem !important;
            }

            #page-history .flex.flex-wrap.gap-2.mb-8 {
                display: grid !important;
                grid-template-columns: 1fr;
                margin-bottom: 1.25rem !important;
            }

            #page-history .flex.flex-wrap.gap-2.mb-8>span {
                display: none;
            }

            #page-history input[type="text"],
            #page-history input[type="date"] {
                width: 100% !important;
            }

            #history-list {
                grid-template-columns: 1fr !important;
            }
        }