body { background: #0a0e1a; color: #eaf6fb; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; overflow-x: hidden; }
        .pan-page-top { margin-bottom: 14px; }
        .pan-home-link {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            color: #7dd3fc;
            text-decoration: none;
            font-size: 0.95rem;
            font-weight: 600;
        }
        .pan-home-link:hover { color: #bae6fd; text-decoration: underline; }
        .pan-container {
            max-width: 900px;
            width: 100%;
            margin: 60px auto 0;
            padding: 36px 40px;
            background: rgba(24,28,43,0.95);
            border-radius: 16px;
            box-shadow: 0 8px 32px #0006;
            position: relative;
            z-index: 2;
            box-sizing: border-box;
            overflow-x: hidden;
        }
        .pan-title { font-size: 2rem; margin-bottom: 18px; color: #00ffd0; }
        .pan-search-wrap { position: relative; margin-bottom: 24px; min-height: 280px; }
        .pan-search { display: flex; gap: 10px; margin-bottom: 24px; position: relative; z-index: 3; }
        .tunnel-scene { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 100%; height: 280px; perspective: 1200px; overflow: hidden; }
        .tunnel-scene::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 0%, rgba(0,0,0,0.4) 70%); pointer-events: none; }
        .tunnel-tube { position: absolute; left: 50%; top: 50%; width: 1px; height: 1px; transform-style: preserve-3d; transform: translate(-50%, -50%) rotateX(12deg); }
        .tunnel-item { position: absolute; left: 0; top: 0; transform-style: preserve-3d; transform-origin: 0 0; animation: tunnelFly 10s linear infinite; }
        .tunnel-item-inner { display: inline-block; white-space: nowrap; font-size: 18px; color: rgba(0, 255, 208, 0.85); text-shadow: 0 0 12px rgba(0,255,208,0.6); cursor: pointer; letter-spacing: 3px; transform: rotateY(calc(-1 * var(--angle, 0deg))); transition: color 0.2s, text-shadow 0.2s; }
        .tunnel-item:hover { animation-play-state: paused; }
        .tunnel-item:hover .tunnel-item-inner { color: #00ffd0; text-shadow: 0 0 25px rgba(0,255,208,0.95), 0 0 50px rgba(0,195,255,0.6); z-index: 100; }
        .tunnel-item-hot .tunnel-item-inner { color: rgba(255, 200, 100, 0.9); text-shadow: 0 0 12px rgba(255,200,100,0.6); }
        .tunnel-item-hot { animation: tunnelFlyHot 16s linear infinite; }
        .tunnel-item-fast { animation: tunnelFly 8s linear infinite; }
        .tunnel-item-slow { animation: tunnelFly 14s linear infinite; }
        .tunnel-item-hot:hover .tunnel-item-inner { color: #ffd700; text-shadow: 0 0 25px rgba(255,215,0,0.95); }
        .tunnel-digit { position: absolute; left: 0; top: 0; transform-style: preserve-3d; transform-origin: 0 0; pointer-events: none; font-size: 22px; color: rgba(0, 195, 255, 0.6); text-shadow: 0 0 10px rgba(0,195,255,0.5); letter-spacing: 6px; }
        .tunnel-digit-inner { display: inline-block; transform: rotateY(calc(-1 * var(--angle, 0deg))); }
        .tunnel-digit-fast { animation: tunnelFly 6s linear infinite; }
        .tunnel-digit-slow { animation: tunnelFly 14s linear infinite; }
        @keyframes tunnelFly { 0% { transform: rotateY(var(--angle, 0deg)) translateZ(200px) translateZ(-700px) scale(0.15); opacity: 0.35; } 100% { transform: rotateY(var(--angle, 0deg)) translateZ(200px) translateZ(500px) scale(1.2); opacity: 0.98; } }
        @keyframes tunnelFlyHot { 0% { transform: rotateY(var(--angle, 0deg)) translateZ(200px) translateZ(-700px) scale(0.15); opacity: 0.5; } 100% { transform: rotateY(var(--angle, 0deg)) translateZ(200px) translateZ(500px) scale(1.2); opacity: 1; } }
        .grid-bg { position: fixed; inset: 0; background: linear-gradient(180deg, #0a0e1a 0%, #0d1220 50%, #0a0e1a 100%); z-index: 0; }
        .grid-bg::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(0,255,208,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(0,255,208,0.03) 1px, transparent 1px); background-size: 40px 40px; animation: gridPulse 4s ease-in-out infinite; }
        .grid-bg::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 30%, rgba(0,195,255,0.08) 0%, transparent 50%); }
        @keyframes gridPulse { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } }
        .pan-search input { flex: 1; padding: 10px; border-radius: 8px; border: 1px solid #2afd8d44; font-size: 1.1rem; }
        .pan-search button { background: linear-gradient(90deg, #00c3ff 0%, #7f53ac 100%); color: #fff; border: none; border-radius: 8px; padding: 0 22px; font-size: 1.1rem; cursor: pointer; }
        .pan-search-pager {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: center;
            gap: 12px;
            margin-top: 16px;
            padding-top: 14px;
            border-top: 1px solid rgba(42, 253, 141, 0.15);
        }
        .pan-search-pager-info { color: #94a3b8; font-size: 0.88rem; }
        .search-pager-btn {
            background: #00ffd0;
            color: #232946;
            border: none;
            border-radius: 6px;
            padding: 6px 16px;
            cursor: pointer;
            font-weight: 600;
            font-size: 0.88rem;
        }
        .search-pager-btn:disabled { background: #555; color: #bbb; cursor: not-allowed; }
        .pan-list { margin-top: 18px; }
        .pan-list table { width: 100%; border-collapse: collapse; }
        .pan-list th, .pan-list td { padding: 10px 6px; border-bottom: 1px solid #2afd8d22; }
        .pan-list th { color: #00ffd0; }
        .pan-list tr:hover { background: #232946; }
        .pan-list button { background: #00ffd0; color: #232946; border: none; border-radius: 6px; padding: 4px 14px; cursor: pointer; }
        .pan-list button:disabled { background: #888; color: #eee; }
        .pan-msg { margin: 18px 0; color: #ffb37b; }
        .pan-hint { color: #ffb37b; }
        .pan-btn-ml { margin-left: 5px; }
        .pan-account-name { color: #7dd3fc; }
        .pan-pathbar { margin-bottom: 10px; }
        .pan-link { cursor: pointer; }
        .pan-link--folder { color: #00ffd0; }
        .pan-accounts-grid {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 12px;
            margin-top: 4px;
            width: 100%;
            max-width: 100%;
            min-width: 0;
            box-sizing: border-box;
        }
        @media (max-width: 960px) {
            .pan-accounts-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        }
        @media (max-width: 520px) {
            .pan-accounts-grid { grid-template-columns: 1fr; }
        }
        .pan-account-list-wrap { width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; }
        .pan-account-card {
            min-width: 0;
            max-width: 100%;
            width: 100%;
            padding: 8px 10px 10px;
            box-sizing: border-box;
            overflow: hidden;
            border: 1px solid rgba(56, 189, 248, 0.22);
            border-radius: 8px;
            background: linear-gradient(165deg, rgba(30, 41, 59, 0.92) 0%, rgba(15, 23, 42, 0.88) 100%);
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
        }
        .pan-card-line1 {
            display: flex;
            align-items: baseline;
            justify-content: space-between;
            gap: 8px;
            margin-bottom: 6px;
            text-align: left;
        }
        .pan-card-title { font-weight: 600; color: #e2e8f0; font-size: 0.92rem; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .pan-card-status { font-size: 0.72rem; color: #7dd3fc; white-space: nowrap; flex-shrink: 0; }
        .pan-card-status--expired { color: #fbbf24; opacity: 0.95; }
        .pan-card-line2 {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-bottom: 8px;
            justify-content: flex-start;
            align-items: center;
        }
        .pan-card-line2 .auth-btn,
        .pan-card-line2 .pan-account-remove-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 30px;
            padding: 0 12px;
            font-size: 12px;
            line-height: 1;
            border-radius: 6px;
            box-sizing: border-box;
            font-weight: 600;
            cursor: pointer;
            vertical-align: middle;
        }
        .pan-card-line2 .auth-btn { background: #38bdf8; color: #0f172a; border: none; }
        .pan-card-line2 .auth-btn:hover { background: #7dd3fc; color: #0f172a; }
        .pan-card-line2 .pan-account-remove-btn {
            background: #be123c;
            color: #fff;
            border: none;
        }
        .pan-card-line2 .pan-account-remove-btn:hover { background: #e11d48; }
        .pan-card-mgrid {
            display: grid;
            grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
            gap: 3px 10px;
            text-align: left;
            font-size: 0.78rem;
            min-width: 0;
        }
        .pan-mk { color: #94a3b8; font-size: 0.72rem; letter-spacing: 0.02em; }
        .pan-mv { color: #cbd5e1; font-variant-numeric: tabular-nums; line-height: 1.35; }
        .pan-num-files, .pan-num-dirs {
            display: inline-block;
            min-width: 7ch;
            font-weight: 500;
            color: #f1f5f9;
            font-variant-numeric: tabular-nums;
            text-align: left;
        }
        .pan-num-space, .pan-num-usage {
            display: inline-block;
            min-width: 7ch;
            font-weight: 500;
            color: #f1f5f9;
            font-variant-numeric: tabular-nums;
            text-align: left;
        }
        .pan-account-add-wrap { position: relative; display: inline-block; }
        .pan-add-dropdown { position: absolute; top: calc(100% + 4px); left: 0; min-width: 140px; z-index: 20; background: #1b243a; border: 1px solid rgba(0,255,208,0.35); border-radius: 6px; box-shadow: 0 8px 24px rgba(0,0,0,.35); }
        .pan-add-item { display: block; width: 100%; text-align: left; padding: 8px 10px; border: 0; background: transparent; color: #eaf6fb; cursor: pointer; }
        .pan-add-item:hover { background: rgba(0,255,208,.12); }

        .is-hidden { display: none !important; }

        /* tunnel positioning without inline styles */
        .tunnel-angle-0 { --angle: 0deg; }
        .tunnel-angle-1 { --angle: 30deg; }
        .tunnel-angle-2 { --angle: 60deg; }
        .tunnel-angle-3 { --angle: 90deg; }
        .tunnel-angle-4 { --angle: 120deg; }
        .tunnel-angle-5 { --angle: 150deg; }
        .tunnel-angle-6 { --angle: 180deg; }
        .tunnel-angle-7 { --angle: 210deg; }
        .tunnel-angle-8 { --angle: 240deg; }
        .tunnel-angle-9 { --angle: 270deg; }
        .tunnel-angle-10 { --angle: 300deg; }
        .tunnel-angle-11 { --angle: 330deg; }

        .tunnel-delay-0 { animation-delay: 0s; }
        .tunnel-delay-1 { animation-delay: -1s; }
        .tunnel-delay-2 { animation-delay: -2s; }
        .tunnel-delay-3 { animation-delay: -3s; }
        .tunnel-delay-4 { animation-delay: -4s; }
        .tunnel-delay-5 { animation-delay: -5s; }
        .tunnel-delay-6 { animation-delay: -6s; }
        .tunnel-delay-7 { animation-delay: -7s; }
        .tunnel-delay-8 { animation-delay: -8s; }
        .tunnel-delay-9 { animation-delay: -9s; }
        .auth-section {
            margin-bottom: 20px;
            padding: 14px 16px;
            background: rgba(15, 23, 42, 0.55);
            border-radius: 10px;
            border: 1px solid rgba(56, 189, 248, 0.14);
            max-width: 100%;
            min-width: 0;
            box-sizing: border-box;
        }
        .pan-admin-toolbar {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 16px;
            margin-bottom: 12px;
        }
        .pan-index-stats-inline { font-size: 0.88rem; color: #7dd3fc; font-variant-numeric: tabular-nums; }
        .auth-btn { background: #38bdf8; color: #0f172a; border: none; border-radius: 6px; padding: 8px 16px; cursor: pointer; font-weight: 600; }
        .auth-btn:hover { background: #7dd3fc; color: #0f172a; }
        .user-section { margin-bottom: 20px; padding: 15px; background: rgba(0, 195, 255, 0.05); border-radius: 8px; border: 1px solid rgba(0, 195, 255, 0.1); }
        .share-link-modal {
            position: fixed;
            z-index: 1000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.8);
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 16px;
            box-sizing: border-box;
        }
        .share-link-modal.is-hidden { display: none !important; }
        .share-link-content { background-color: #181c2b; margin: 0; padding: 20px; border: 1px solid #38bdf8; border-radius: 8px; width: 100%; max-width: 600px; }
        .close-btn { color: #ffb37b; float: right; font-size: 28px; font-weight: bold; cursor: pointer; }
        .close-btn:hover { color: #fff; }
        .share-link { word-break: break-all; background: #232946; padding: 10px; border-radius: 4px; margin: 10px 0; }
        .copy-btn { background: #00ffd0; color: #232946; border: none; border-radius: 6px; padding: 8px 16px; cursor: pointer; }
        /* 显示/隐藏统一用 .is-hidden，勿在此写死 display:none，否则 JS 移除 is-hidden 后仍不可见 */
        #user-actions { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
        .pan-flex-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
        .pan-flex-row.gap-10 { gap: 10px; }
        .pan-flex-row.mb-10 { margin-bottom: 10px; }
        /* 与 #admin-auth-section 同理：勿写死 display:none，用 .is-hidden 控制，否则 showMyPanel 无法显示 */
        .user-section #my-panel {
            margin-top: 16px;
            padding: 14px 16px;
            background: rgba(0, 255, 208, 0.06);
            border-radius: 8px;
            border: 1px solid rgba(0, 255, 208, 0.18);
        }
        #my-panel-title { color: #00ffd0; margin-bottom: 12px; }
        #my-panel-empty { color: #888; }
        #sharePassword { margin: 8px 0; font-size: 15px; }
        #passwordText { color: #00ffd0; letter-spacing: 3px; font-size: 18px; }
        .share-note { font-size: 12px; color: #aaa; margin: 4px 0 10px 0; }
        @media (max-width: 768px) {
            .pan-container { max-width: 95%; width: 100%; padding: 24px 20px; box-sizing: border-box; }
            .pan-search-wrap { min-height: 220px; }
            .tunnel-scene { height: 220px; }
            .tunnel-item-inner { font-size: 15px; }
            .tunnel-digit { font-size: 18px; }
        }