/* ==============================
   Workflow Store Styles
   ============================== */

/* Workflow Store */
    .store-header {
      padding: 6rem 0 0;
      text-align: center;
    }
    .store-header h1 {
      font-size: 2rem;
      font-weight: 800;
      color: #0F172A;
      margin-bottom: 0.5rem;
    }
    .store-header p {
      color: #64748B;
      font-size: 1rem;
      max-width: 500px;
      margin: 0 auto 2rem;
    }
    .store-layout {
      display: flex;
      gap: 1.25rem;
      padding: 2rem 0 0;
      align-items: flex-start;
    }
    .store-sidebar {
      width: 275px;
      flex-shrink: 0;
      position: sticky;
      top: 84px;
      background: #FAFBFC;
      border-radius: 10px;
      padding: 0.75rem 0.5rem;
    }
    .store-sidebar-title {
      font-size: 0.9375rem;
      font-weight: 700;
      color: #1E293B;
      letter-spacing: 0.05em;
      margin-bottom: 0.75rem;
      padding-left: 0.5rem;
    }
    .store-filters {
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
    }
    .store-filters .filter-btn {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.75rem 0.75rem;
      font-size: 0.9375rem;
      font-weight: 500;
      -webkit-font-smoothing: auto;
      -moz-osx-font-smoothing: auto;
      color: #64748B;
      background: transparent;
      border: none;
      border-radius: 6px;
      cursor: pointer;
      transition: all 0.15s;
      font-family: 'PingFang SC', 'Microsoft YaHei', 'Noto Sans SC', sans-serif;
      text-align: left;
      width: 100%;
    }
    .store-filters .filter-btn svg {
      flex-shrink: 0;
      color: #475569;
    }
    .store-filters .filter-btn:hover svg {
      color: #2563EB;
    }
    .store-filters .filter-btn.active svg {
      color: #2563EB;
    }
    .store-filters .filter-btn:hover {
      color: #2563EB;
      background: #F1F5F9;
    }
    .store-filters .filter-btn.active {
      color: #2563EB;
      background: #EFF6FF;
    }
    .store-main {
      flex: 1;
      min-width: 0;
    }
    .store-search {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.5rem 0.75rem;
      border: 1.5px solid #E2E8F0;
      border-radius: 8px;
      transition: border-color 0.15s;
      margin-bottom: 1rem;
      margin-left: auto;
      width: 300px;
    }
    .store-search:focus-within {
      border-color: #2563EB;
    }
    .store-search svg {
      flex-shrink: 0;
      color: #94A3B8;
    }
    .store-search input {
      flex: 1;
      border: none;
      outline: none;
      font-size: 0.875rem;
      font-family: inherit;
      color: #1E293B;
      background: transparent;
    }
    .store-search input::placeholder {
      color: #94A3B8;
    }

    /* ===== Card Grid ===== */
    .store-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1.25rem;
      padding: 1.5rem 0 4rem;
    }

    /* ===== Card with Thumbnail ===== */
    .store-card {
      background: #fff;
      border: 1px solid #E2E8F0;
      border-radius: 14px;
      overflow: hidden;
      transition: all 0.25s;
      cursor: pointer;
      display: flex;
      flex-direction: column;
    }
    .store-card:hover {
      border-color: #93C5FD;
      box-shadow: 0 8px 30px rgba(37,99,235,0.1);
      transform: translateY(-3px);
    }

    /* Thumbnail */
    .store-card-thumb {
      width: 100%;
      height: 180px;
      overflow: hidden;
      position: relative;
      flex-shrink: 0;
    }
    .store-card-thumb.video-thumb {
      background: #0F172A;
      cursor: pointer;
    }
    .store-card-thumb.video-thumb video {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .store-card-thumb.icon-thumb {
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .store-card-thumb-letter {
      font-size: 3rem;
      font-weight: 800;
      color: rgba(255,255,255,0.85);
      text-shadow: 0 2px 8px rgba(0,0,0,0.15);
      user-select: none;
    }

    /* Image thumbnail */
    .store-card-thumb.image-thumb,
    .store-card-thumb.image-video-thumb {
      background: #F1F5F9;
      position: relative;
    }
    .store-card-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      transition: opacity 0.3s;
    }
    .store-card-hover-video {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      opacity: 0;
      transition: opacity 0.3s;
    }
    .store-card-thumb.image-video-thumb:hover .store-card-hover-video {
      opacity: 1;
    }
    .store-card-thumb.image-video-thumb:hover .store-card-img {
      opacity: 0;
    }
    .store-card-thumb.image-video-thumb:hover .store-card-play {
      opacity: 0;
    }

    /* Play button overlay on video thumb */
    .store-card-play {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 54px;
      height: 54px;
      border-radius: 50%;
      background: rgba(255,255,255,0.9);
      display: flex;
      align-items: center;
      justify-content: center;
      color: #2563EB;
      transition: all 0.2s;
      box-shadow: 0 4px 16px rgba(0,0,0,0.2);
    }
    .store-card-thumb.video-thumb:hover .store-card-play {
      background: #fff;
      transform: translate(-50%, -50%) scale(1.08);
      box-shadow: 0 6px 24px rgba(0,0,0,0.3);
    }

    /* Card Body */
    .store-card-body {
      padding: 1rem 1.25rem 1.25rem;
      flex: 1;
      display: flex;
      flex-direction: column;
    }
    .store-card-name {
      font-size: 1.0625rem;
      font-weight: 700;
      color: #0F172A;
      margin-bottom: 0.35rem;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .store-card-desc {
      font-size: 0.8125rem;
      color: #64748B;
      line-height: 1.5;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      margin-bottom: 0.75rem;
      flex: 1;
    }
    .store-card-tags {
      display: flex;
      gap: 0.375rem;
      margin-bottom: 0.75rem;
      flex-wrap: wrap;
    }
    .store-card-tag {
      font-size: 0.6875rem;
      font-weight: 600;
      padding: 0.2rem 0.5rem;
      border-radius: 4px;
    }
    .store-card-tag.coze { background: #EFF6FF; color: #2563EB; }
    .store-card-tag.make { background: #F3E8FF; color: #9333EA; }
    .store-card-tag.n8n { background: #FEF3C7; color: #D97706; }
    .store-card-tag.comfyui { background: #FCE7F3; color: #DB2777; }
    .store-card-tag.video { background: #E0F2FE; color: #0284C7; }
    .store-card-tag.audio { background: #F3E8FF; color: #7C3AED; }
    .store-card-tag.image { background: #FCE7F3; color: #DB2777; }
    .store-card-tag.chat { background: #D1FAE5; color: #059669; }
    .store-card-tag.text { background: #FEF3C7; color: #D97706; }
    .store-card-tag.download { background: #E0F2FE; color: #0284C7; }
    .store-card-tag.other { background: #F1F5F9; color: #64748B; }
    .store-card-footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-top: 0.75rem;
      border-top: 1px solid #F1F5F9;
    }
    .store-card-price {
      font-size: 1rem;
      font-weight: 700;
      color: #2563EB;
    }
    .store-card-price.free { color: #059669; }
    .store-card-stat {
      display: inline-flex;
      align-items: center;
      gap: 0.25rem;
      font-size: 0.75rem;
      color: #94A3B8;
    }
    .store-card-stat svg {
      flex-shrink: 0;
      color: #94A3B8;
    }
    .store-card-footer-right {
      display: flex;
      align-items: center;
      gap: 1rem;
    }
    .store-empty {
      grid-column: 1 / -1;
      text-align: center;
      padding: 4rem 0;
      color: #94A3B8;
    }

    /* ===== Full-Page Detail Panel ===== */
    .store-detail-panel {
      flex: 1;
      min-width: 0;
    }
    .store-detail-back {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.5rem 1rem;
      font-size: 0.9375rem;
      font-weight: 600;
      color: #475569;
      background: #F1F5F9;
      border: none;
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.15s;
      font-family: inherit;
      margin-bottom: 1.5rem;
    }
    .store-detail-back:hover {
      background: #E2E8F0;
      color: #1E293B;
    }

    /* Detail Content */
    .store-detail-content {
      background: #fff;
      border: 1px solid #E2E8F0;
      border-radius: 16px;
      overflow: hidden;
    }

    /* Video Player */
    .store-detail-video {
      background: #0F172A;
    }
    .store-detail-video-inner video {
      display: block;
      width: 100%;
      max-height: 480px;
      object-fit: contain;
      background: #000;
    }

    /* Detail Body */
    .store-detail-body {
      padding: 1.5rem 2rem 2rem;
    }

    /* Header with Icon */
    .store-detail-header {
      display: flex;
      align-items: center;
      gap: 1rem;
      margin-bottom: 1rem;
    }
    .store-detail-header .store-detail-actions {
      flex-shrink: 0;
      margin-left: auto;
    }
    .store-detail-icon {
      width: 56px;
      height: 56px;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.375rem;
      font-weight: 700;
      flex-shrink: 0;
    }
    .store-detail-title { flex: 1; min-width: 0; }
    .store-detail-title h1 {
      font-size: 1.5rem;
      font-weight: 800;
      color: #0F172A;
      margin: 0 0 0.25rem;
      line-height: 1.3;
    }
    .store-detail-meta {
      font-size: 0.875rem;
      color: #94A3B8;
    }

    /* Tags */
    .store-detail-tags {
      display: flex;
      gap: 0.5rem;
      margin-bottom: 1.25rem;
      flex-wrap: wrap;
    }
    .detail-tag {
      padding: 0.3rem 0.75rem;
      font-size: 0.8125rem;
      font-weight: 600;
      border-radius: 6px;
    }

    /* Description */
    .store-detail-desc {
      font-size: 0.9375rem;
      line-height: 1.8;
      color: #334155;
      margin-bottom: 1.5rem;
      white-space: pre-wrap;
    }

    /* Info Grid */
    .store-detail-info {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1rem;
      padding: 1.25rem;
      background: #F8FAFC;
      border-radius: 12px;
      margin-bottom: 1.5rem;
      border: 1px solid #F1F5F9;
    }
    .store-detail-info-item {
      display: flex;
      flex-direction: column;
      gap: 0.25rem;
    }
    .store-detail-info-item .label {
      font-size: 0.75rem;
      color: #94A3B8;
      font-weight: 500;
    }
    .store-detail-info-item .value {
      font-size: 1rem;
      font-weight: 700;
      color: #1E293B;
    }

    /* Action Buttons */
    .store-detail-actions {
      display: flex;
      gap: 0.75rem;
    }
    .store-detail-actions .btn {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.75rem 1.5rem;
      font-size: 0.9375rem;
      font-weight: 600;
      border-radius: 10px;
      transition: all 0.15s;
      cursor: pointer;
      text-decoration: none;
      font-family: inherit;
    }
    .store-detail-actions .btn-primary {
      background: #2563EB;
      color: #fff;
      border: none;
    }
    .store-detail-actions .btn-primary:hover {
      background: #1D4ED8;
    }
    .store-detail-actions .btn-outline {
      background: transparent;
      color: #2563EB;
      border: 1.5px solid #2563EB;
    }
    .store-detail-actions .btn-outline:hover {
      background: #EFF6FF;
    }

@media (max-width: 768px) {
      .nav-tabs {
        display: none;
        position: absolute;
        top: 64px;
        left: 0;
        right: 0;
        background: #fff;
        border-bottom: 1px solid #E2E8F0;
        padding: 0.5rem;
        flex-direction: column;
        box-shadow: 0 10px 30px rgba(0,0,0,0.08);
      }
      .nav-tabs.open { display: flex; }
      .nav-tab { width: 100%; text-align: left; }
      .nav-toggle { display: flex; }

      .store-grid {
        grid-template-columns: 1fr;
      }
      .store-layout {
        flex-direction: column;
      }
      .store-sidebar {
        width: 100%;
        position: static;
      }
      .store-search {
        width: 100%;
      }
      .store-card-thumb {
        height: 200px;
      }
      .store-detail-info {
        grid-template-columns: 1fr 1fr;
      }
      .store-detail-body {
        padding: 1.25rem;
      }
      .store-detail-title h1 {
        font-size: 1.25rem;
      }
      .store-detail-actions {
        flex-direction: column;
      }
}