@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
        body {
            font-family: 'Inter', sans-serif;
            background-color: #0D0D0D;
            color: #E8E8E8;
        }
        button.btn-primary,
        button.btn-outline {
          appearance: none;
          border: none;
          font: inherit;
        }
        .btn-primary {
            background: #6C5CE7;
            transition: all 0.3s;
        }
        .btn-primary:hover {
            background: #5A4ED1;
            transform: none;
            box-shadow: none;
        }
        .glass-card,
        .template-card {
            position: relative;
            z-index: 0;
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(255, 255, 255, 0.05);
            transition: all 0.3s;
        }
        .glass-card:hover,
        .template-card:hover {
            z-index: 5;
            border-color: #6C5CE7;
            transform: translateY(-4px);
        }
        /* 导航栏统一样式 */
        header {
          position: fixed;
          top: 0;
          left: 0;
          right: 0;
          z-index: 50;
          background: rgba(10, 10, 11, 0.8);
          backdrop-filter: blur(12px);
          border-bottom: 1px solid rgba(255,255,255,0.05);
        }
        .nav-link {
          text-decoration: none;
          font-size: 14px;
          color: #9CA3AF;
          transition: color 0.2s;
        }
        .nav-link:hover { color: #FFFFFF; }
        .nav-link.active { color: #6C5CE7; font-weight: 600; }
        .btn-outline {
          padding: 8px 20px;
          border: 1px solid rgba(255,255,255,0.15);
          border-radius: 8px;
          background: transparent;
          color: #D1D5DB;
          font-size: 13px;
          text-decoration: none;
          cursor: pointer;
          transition: all 0.2s;
        }
        .btn-outline:hover { border-color: rgba(255,255,255,0.3); color: #FFFFFF; }
        .btn-primary {
          padding: 8px 20px;
          border: none;
          border-radius: 8px;
          background: #6C5CE7;
          color: #FFFFFF;
          font-size: 13px;
          font-weight: 600;
          text-decoration: none;
          cursor: pointer;
          transition: background-color 0.2s ease, color 0.2s ease;
        }
        .btn-primary:hover {
            background: #5A4ED1;
        }
        .template-btn-primary {
          background: #6C5CE7;
          transition: all 0.3s;
        }
        .template-btn-primary:hover {
            background: #5A4ED1;
        }
        .template-filter-btn {
          transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
        }
        .template-filter-btn.active {
          background: #2A2A2A !important;
          color: #FFFFFF !important;
        }
        .template-empty-state {
          min-height: 220px;
          margin-top: 32px;
          border: 1px dashed rgba(255,255,255,0.08);
          border-radius: 24px;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          gap: 10px;
          color: #9CA3AF;
          background: rgba(255,255,255,0.02);
        }
        .template-empty-icon {
          font-size: 34px;
          color: #6B7280;
        }
        .template-empty-title {
          font-size: 16px;
          font-weight: 600;
          color: #E5E7EB;
        }
        .template-cover-frame {
          position: relative;
          overflow: hidden;
          border-radius: 20px;
          background: #1A1A1A;
          flex: 0 0 auto;
        }
        .template-cover-badge {
          position: absolute;
          left: 8px;
          top: 8px;
          bottom: auto;
          z-index: 2;
          padding: 2px 6px;
          border-radius: 4px;
          border: 0;
          background: rgba(0, 0, 0, 0.6);
          color: #9CA3AF;
          font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
          font-size: 10px;
          font-weight: 400;
          line-height: 1.5;
          letter-spacing: 0;
          pointer-events: none;
          backdrop-filter: none;
        }
        .template-cover-frame img {
          width: 100%;
          height: auto;
          object-fit: contain;
          object-position: top;
          display: block;
          opacity: 1 !important;
        }
        .template-search-input {
          color: #E8E8E8;
        }
        .template-search-input::placeholder {
          color: rgba(139, 139, 139, 0.42);
          opacity: 1;
        }
        /* 三列独立瀑布流：每列按自身内容自然累积，不会出现网格断层。 */
        .template-masonry {
          display: grid;
          grid-template-columns: repeat(3, minmax(0, 1fr));
          gap: 32px;
          align-items: start;
        }
        .template-masonry-column {
          display: flex;
          min-width: 0;
          flex-direction: column;
          gap: 32px;
        }
        .template-masonry .template-card {
          display: flex;
          width: 100%;
          margin: 0;
        }
        .template-masonry .template-cover-frame--public,
        .template-masonry .template-cover-frame--modal {
          width: 100%;
          height: auto;
          display: block;
        }
        .template-masonry .template-cover-frame img {
          width: 100%;
          height: auto;
          object-fit: contain;
          object-position: top;
          margin: 0;
        }
        /* 超长图在卡片内只展示顶部缩略，完整图通过“长图”标识查看。 */
        .template-cover-frame--long {
          width: 100%;
          height: auto !important;
          max-height: none !important;
          aspect-ratio: 9 / 16;
          display: block !important;
          overflow: visible;
          background: #151515;
        }
        .template-cover-frame--long > img {
          position: absolute;
          inset: 0;
          width: 100% !important;
          height: 100% !important;
          max-height: none !important;
          object-fit: cover !important;
          object-position: top !important;
          border-radius: inherit;
        }
        .template-long-image-control {
          position: absolute;
          right: 10px;
          bottom: 10px;
          z-index: 4;
        }
        .template-long-image-indicator {
          display: inline-flex;
          align-items: center;
          border: 1px solid rgba(255, 255, 255, 0.2);
          border-radius: 999px;
          padding: 5px 9px;
          background: rgba(12, 12, 14, 0.82);
          color: #F5F3FF;
          font-size: 12px;
          font-weight: 600;
          line-height: 1;
          cursor: zoom-in;
        }
        .template-long-image-indicator:hover,
        .template-long-image-indicator:focus-visible {
          border-color: #8B7BFF;
          background: #332B69;
          outline: none;
        }
        .template-long-image-dialog {
          position: fixed;
          inset: 0;
          z-index: 100;
          display: grid;
          place-items: center;
          padding: 24px;
        }
        .template-long-image-dialog__backdrop {
          position: absolute;
          inset: 0;
          background: rgba(0, 0, 0, 0.72);
          backdrop-filter: blur(6px);
        }
        .template-long-image-dialog__panel {
          position: relative;
          z-index: 1;
          display: flex;
          flex-direction: column;
          width: min(480px, calc(100vw - 48px));
          height: min(853px, calc(100vh - 48px));
          overflow: hidden;
          border: 1px solid rgba(139, 123, 255, 0.55);
          border-radius: 16px;
          background: #111114;
          box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
        }
        .template-long-image-dialog__header {
          display: flex;
          flex: 0 0 auto;
          align-items: center;
          justify-content: space-between;
          padding: 12px 14px 12px 16px;
          border-bottom: 1px solid rgba(255, 255, 255, 0.08);
          color: #F5F3FF;
          font-size: 14px;
          font-weight: 600;
        }
        .template-long-image-dialog__header button {
          display: grid;
          place-items: center;
          width: 30px;
          height: 30px;
          border: 0;
          border-radius: 8px;
          background: rgba(255, 255, 255, 0.08);
          color: #E5E7EB;
          cursor: pointer;
        }
        .template-long-image-dialog__header button svg {
          width: 18px;
          height: 18px;
          fill: none;
          stroke: currentColor;
          stroke-linecap: round;
          stroke-width: 1.7;
        }
        .template-long-image-dialog__content {
          flex: 1;
          overflow: auto;
          padding: 12px;
          scrollbar-width: thin;
          scrollbar-color: rgba(255, 255, 255, 0.38) transparent;
        }
        .template-long-image-dialog__content::-webkit-scrollbar { width: 8px; }
        .template-long-image-dialog__content::-webkit-scrollbar-track { background: transparent; }
        .template-long-image-dialog__content::-webkit-scrollbar-thumb {
          border: 2px solid transparent;
          border-radius: 999px;
          background: rgba(255, 255, 255, 0.38);
          background-clip: padding-box;
        }
        .template-long-image-dialog__content img {
          display: block;
          width: 100%;
          height: auto;
          border-radius: 8px;
        }
        .template-scroll-area {
          scrollbar-gutter: stable;
          scrollbar-width: thin;
          scrollbar-color: rgba(255, 255, 255, 0.28) transparent;
        }
        .template-scroll-area::-webkit-scrollbar {
          width: 8px;
        }
        .template-scroll-area::-webkit-scrollbar-track {
          background: transparent;
        }
        .template-scroll-area::-webkit-scrollbar-thumb {
          background: rgba(255, 255, 255, 0.28);
          border-radius: 9999px;
        }
        .template-scroll-area::-webkit-scrollbar-thumb:hover {
          background: rgba(255, 255, 255, 0.28);
        }
        @media (max-width: 640px) {
          .template-masonry {
            grid-template-columns: 1fr;
            gap: 20px;
          }
          .template-masonry-column {
            gap: 20px;
          }
        }
        header .btn-outline,
        header .btn-primary {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          min-height: 40px;
          font-size: 14px;
          line-height: 1;
          white-space: nowrap;
        }