/* 20261108 */
        /* 全局样式重置和基础设置 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: "Microsoft Yahei", "PingFang SC", "Helvetica Neue", Arial, sans-serif;
        }

        body {
            background-color: #f8f9fa;
            color: #333;
            line-height: 1.6;
        }

        a {
            text-decoration: none;
            color: inherit;
            transition: all 0.3s ease;
        }

        ul {
            list-style: none;
        }

        .main {
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }

        /* 顶部导航栏样式 */
        .top-nav {
            background-color: #fff;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
            padding: 15px 0;
            position: sticky;
            top: 0;
            z-index: 100;
        }

        .top-nav .main {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .nav {
            display: flex;
            gap: 25px;
            margin: 0 20px;
        }

        .nav-item a {
            color: #555;
            font-size: 15px;
            font-weight: 500;
            padding: 5px 0;
            border-bottom: 2px solid transparent;
        }

        .nav-item a:hover {
            color: #e74c3c;
            border-bottom: 2px solid #e74c3c;
        }

        /* 搜索框样式 */
        .top-search {
            flex-shrink: 0;
        }

        .top-search form {
            display: flex;
        }

        .top-search input {
            padding: 8px 15px;
            border: 1px solid #ddd;
            border-radius: 4px 0 0 4px;
            outline: none;
            font-size: 14px;
            width: 200px;
        }

        .top-search input:focus {
            border-color: #e74c3c;
        }

        .top-search button {
            padding: 8px 15px;
            background-color: #e74c3c;
            color: white;
            border: none;
            border-radius: 0 4px 4px 0;
            cursor: pointer;
            font-size: 14px;
        }

        .top-search button:hover {
            background-color: #c0392b;
        }

        /* 主要内容区域 */
        .content-wrapper {
            padding: 20px 0 30px;
        }

        /* 沉浸式大图舞台 */
        .stage {
            position: relative;
            background: radial-gradient(ellipse at center, #2a2a30 0%, #16161a 70%);
            border-radius: 14px;
            padding: 34px 20px;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 260px;
        }

        .stage img {
            max-width: 100%;
            max-height: 72vh;
            height: auto;
            border-radius: 8px;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.55);
            display: block;
        }

        /* 左右切换箭头 */
        .stage-nav {
            position: absolute;
            top: 50%;
            width: 44px;
            height: 44px;
            margin-top: -22px;
            border-radius: 50%;
            background: rgba(255,255,255,.12);
            border: 1px solid rgba(255,255,255,.25);
            color: #fff;
            font-size: 22px;
            line-height: 42px;
            text-align: center;
            text-decoration: none;
            user-select: none;
            transition: background .2s ease, transform .2s ease;
        }

        .stage-nav:hover { background: rgba(255,255,255,.28); transform: scale(1.06); }
        .stage-nav.prev { left: 14px; }
        .stage-nav.next { right: 14px; }

        @media (max-width: 640px) {
            .stage { padding: 26px 52px; }
            .stage-nav { width: 36px; height: 36px; margin-top: -18px; font-size: 18px; line-height: 34px; }
            .stage-nav.prev { left: 8px; }
            .stage-nav.next { right: 8px; }
        }

        /* 标题与元信息卡 */
        .gif-head {
            background-color: white;
            border-radius: 12px;
            padding: 22px 25px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
            margin-top: 18px;
        }

        .gif-title {
            font-size: 21px;
            font-weight: 700;
            color: #222;
            margin-bottom: 10px;
            word-break: break-all;
        }

        .meta-bar {
            display: flex;
            flex-wrap: wrap;
            gap: 8px 18px;
            font-size: 13px;
            color: #888;
            padding-bottom: 14px;
            border-bottom: 1px solid #f0f0f0;
        }

        .tags-section {
            margin-top: 16px;
        }

        .section-title {
            font-size: 16px;
            font-weight: 600;
            color: #333;
            margin-bottom: 15px;
            display: flex;
            align-items: center;
        }

        .section-title::after {
            content: '';
            flex: 1;
            height: 1px;
            background-color: #eee;
            margin-left: 10px;
        }

        .tag {
            display: inline-block;
            background-color: #f1f1f1;
            padding: 6px 12px;
            border-radius: 20px;
            margin-right: 8px;
            margin-bottom: 8px;
            font-size: 13px;
        }

        .tag a {
            color: #555;
        }

        .tag:hover {
            background-color: #e74c3c;
        }

        .tag:hover a {
            color: white;
        }

        .no-tags {
            color: #999;
            font-size: 14px;
            padding: 10px 0;
        }

        /* 新增：添加标签按钮样式 */
        .add-tag-btn {
            display: inline-block;
            background-color: #f1f1f1;
            padding: 6px 12px;
            border-radius: 20px;
            margin-right: 8px;
            margin-bottom: 8px;
            font-size: 13px;
            border: none;
            cursor: pointer;
            color: #555;
        }
        .add-tag-btn:hover {
            background-color: #e74c3c;
            color: white;
        }

        /* 打分/举报小图标 */
        .mini-actions {
            margin-left: auto;
            display: flex;
            gap: 8px;
        }

        .mini-btn {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            border: 1px solid #e3e3e3;
            background: #fff;
            cursor: pointer;
            padding: 0;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            transition: all .2s ease;
        }

        .mini-btn img { width: 16px; height: 16px; display: block; }
        .mini-btn.rate:hover { border-color: #e74c3c; background: #fef1f0; }
        .mini-btn.report:hover { border-color: #3498db; background: #eef6fd; }

        /* 相关图片瀑布流（与 list.php 一致：静止第一帧 + 播放按钮） */
        .related-gifs {
            margin-top: 36px;
        }

        .wf { column-count: 4; column-gap: 16px; margin-top: 18px; }
        @media (max-width: 1100px) { .wf { column-count: 3; } }
        @media (max-width: 760px)  { .wf { column-count: 2; column-gap: 10px; } }
        .wf-item { break-inside: avoid; -webkit-column-break-inside: avoid; position: relative; display: block; margin-bottom: 16px; background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,.06); transition: transform .2s ease, box-shadow .2s ease; }
        .wf-item:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0,0,0,.13); }
        .wf-item img { width: 100%; display: block; background: #eef0f2; min-height: 60px; }
        .wf-play { position: absolute; top: 50%; left: 50%; margin: -24px 0 0 -24px; width: 48px; height: 48px; border-radius: 50%; background: rgba(0,0,0,.45); box-shadow: 0 2px 8px rgba(0,0,0,.3); pointer-events: none; transition: background .2s ease, transform .2s ease; }
        .wf-play::after { content: ''; position: absolute; top: 50%; left: 50%; margin: -10px 0 0 -6px; border-left: 15px solid #fff; border-top: 10px solid transparent; border-bottom: 10px solid transparent; }
        .wf-item:hover .wf-play { background: rgba(26,115,232,.75); transform: scale(1.08); }
        .wf-info { padding: 9px 12px 10px; font-size: 13px; }
        .wf-name { color: #444; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

        .no-records {
            text-align: center;
            padding: 40px 0;
            color: #999;
            font-size: 16px;
        }

        /* 页脚样式 */
        .footer-bottom {
            text-align: center;
            padding: 30px 0;
            margin-top: 50px;
            border-top: 1px solid #eee;
            color: #666;
            font-size: 14px;
        }

        .text-red {
            color: #e74c3c;
            font-weight: 600;
        }

        .text-underline {
            text-decoration: underline;
            color: #e74c3c;
        }

        /* 模态框通用样式 */
        .modal {
            display: none;
            position: fixed;
            z-index: 9999;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.8);
            justify-content: center;
            align-items: center;
            padding: 20px;
        }

        .modal-content {
            background-color: #fff;
            padding: 10px;
            max-width: 90%;
            max-height: 90%;
            border-radius: 8px;
            position: relative;
        }

        .modal-content img {
            max-width: 100%;
            max-height: 80vh;
        }

        .close-btn {
            position: absolute;
            top: -40px;
            right: 0;
            background-color: transparent;
            border: none;
            font-size: 30px;
            color: #fff;
            cursor: pointer;
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .close-btn:hover {
            color: #e74c3c;
        }

        /* 打分弹窗样式 */
        .rating-modal {
            display: none;
            position: fixed;
            z-index: 10000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.7);
            justify-content: center;
            align-items: center;
        }

        .rating-container {
            background-color: #fff;
            padding: 30px;
            border-radius: 15px;
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
            width: 90%;
            max-width: 600px;
            text-align: center;
            position: relative;
        }

        .rating-container h2 {
            font-size: 24px;
            color: #333;
            margin-bottom: 20px;
        }

        .rating-img {
            max-width: 100%;
            height: auto;
            border-radius: 10px;
            margin-bottom: 20px;
        }

        /* 修改1：评分按钮添加边框 + 2px空隙 */
        .rating-options {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 2px; /* 按钮之间2px空隙 */
            margin-top: 20px;
        }

        .rating-btn {
            padding: 10px 20px;
            background-color: #28a745;
            color: #fff;
            border-radius: 8px;
            text-decoration: none;
            font-size: 16px;
            transition: background-color 0.3s ease;
            border: 1px solid #218838; /* 添加边框 */
            margin: 0; /* 重置margin */
            cursor: pointer;
        }

        .rating-btn:hover {
            background-color: #218838;
            border-color: #1e7e34; /*  hover时边框颜色加深 */
        }

        .close-rating {
            position: absolute;
            top: 15px;
            right: 20px;
            font-size: 24px;
            color: #666;
            cursor: pointer;
            background: none;
            border: none;
        }

        .close-rating:hover {
            color: #e74c3c;
        }

        /* 评分结果样式 */
        .rating-result {
            margin-top: 20px;
            padding: 20px;
            background-color: #e8f5e9;
            border: 1px solid #4CAF50;
            border-radius: 8px;
            display: none;
        }

        .rating-result.error {
            background-color: #ffebee;
            border-color: #f44336;
            color: #b71c1c;
        }

        .rating-result p {
            font-size: 16px;
            margin-bottom: 8px;
        }

        .rating-result strong {
            color: #2e7d32;
        }

        .rating-result.error strong {
            color: #b71c1c;
        }

        /* 举报弹窗样式 */
        .report-modal {
            display: none;
            position: fixed;
            z-index: 10001;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.7);
            justify-content: center;
            align-items: center;
        }

        .report-container {
            background-color: #fff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            width: 90%;
            max-width: 400px;
        }

        .report-container h2 {
            text-align: center;
            color: #333;
            margin-bottom: 15px;
        }

        .report-container p {
            text-align: center;
            color: #555;
            margin-bottom: 20px;
        }

        .report-form-group {
            margin-bottom: 15px;
        }

        .report-form-group label {
            font-weight: bold;
            margin-bottom: 8px;
            display: block;
            color: #333;
        }

        .report-form-group select,
        .report-form-group textarea,
        .report-form-group input[type="text"] {
            width: 100%;
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
            box-sizing: border-box;
        }

        .report-form-group textarea {
            min-height: 80px;
            resize: vertical;
        }

        .report-submit-btn {
            width: 100%;
            padding: 8px;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
        }

        .report-submit-btn:hover {
            background-color: #0056b3;
        }

        .close-report {
            position: absolute;
            top: 15px;
            right: 20px;
            font-size: 24px;
            color: #666;
            cursor: pointer;
            background: none;
            border: none;
        }

        .close-report:hover {
            color: #e74c3c;
        }

        /* 举报结果样式 */
        .report-result {
            margin-top: 20px;
            padding: 20px;
            border-radius: 8px;
            display: none;
            text-align: center;
        }

        .report-result.success {
            background-color: #e8f5e9;
            border: 1px solid #4CAF50;
            color: #2e7d32;
        }

        .report-result.error {
            background-color: #ffebee;
            border: 1px solid #f44336;
            color: #b71c1c;
        }

        /* 新增：添加标签弹窗样式 */
        .add-tag-modal {
            display: none;
            position: fixed;
            z-index: 10002;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.7);
            justify-content: center;
            align-items: center;
        }
        .add-tag-container {
            background-color: #fff;
            padding: 30px;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            width: 90%;
            max-width: 400px;
            position: relative;
        }
        .add-tag-container h2 {
            text-align: center;
            color: #333;
            margin-bottom: 20px;
            font-size: 18px;
        }
        .add-tag-form-group {
            margin-bottom: 20px;
        }
        .add-tag-form-group input {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 14px;
        }
        .add-tag-submit {
            width: 100%;
            padding: 10px;
            background-color: #e74c3c;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
        }
        .add-tag-submit:hover {
            background-color: #c0392b;
        }
        .close-add-tag {
            position: absolute;
            top: 15px;
            right: 20px;
            font-size: 24px;
            color: #666;
            cursor: pointer;
            background: none;
            border: none;
        }
        .close-add-tag:hover {
            color: #e74c3c;
        }
        .add-tag-result {
            margin-top: 15px;
            padding: 10px;
            border-radius: 4px;
            display: none;
            text-align: center;
        }
        .add-tag-result.success {
            background-color: #e8f5e9;
            border: 1px solid #4CAF50;
            color: #2e7d32;
        }
        .add-tag-result.error {
            background-color: #ffebee;
            border: 1px solid #f44336;
            color: #b71c1c;
        }

        /* 搜索框：按钮内嵌输入框右侧 */
        .top-search form { position: relative; }
        .top-search input { padding: 8px 80px 8px 18px; border: 1px solid #ddd; border-radius: 21px; outline: none; font-size: 14px; width: 234px; background: #fff; }
        .top-search input:focus { border-color: #1a73e8; }
        .top-search button { position: absolute; right: 4px; top: 4px; bottom: 4px; padding: 0 18px; border: none; background: #1a73e8; color: #fff; border-radius: 17px; font-size: 14px; cursor: pointer; line-height: 1; }
        .top-search button:hover { background: #1557b0; }