@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Inter:wght@400;500;600&display=swap');

#ts-app {
  --bg:      #ffffff;
  --surf:    #ffffff;
  --card:    #ffffff;
  --card2:   #fafafa;
  --bord:    #e8e8e8;
  --bord2:   #dddddd;
  --accent:  #111111;
  --acch:    #333333;
  --accl:    #f5f5f5;
  --acc2:    #6d28d9;
  --green:   #16a34a;
  --greenl:  #f0fdf4;
  --red:     #dc2626;
  --redl:    #fef2f2;
  --yellow:  #854d0e;
  --yellowl: #fef9c3;
  --tx:      #111111;
  --tx2:     #888888;
  --mt:      #aaaaaa;
  --r:       10px;
  --sh:      0 1px 3px rgba(0,0,0,.06);
  --shm:     0 4px 12px rgba(0,0,0,.08);

  font-family:'Inter',-apple-system,sans-serif;
  background:var(--bg);color:var(--tx);
  border-radius:var(--r);overflow:hidden;
  border:1px solid var(--bord);
  max-width:880px;margin:24px auto;
}

.ts-view{display:none}
.ts-view.active{display:block}

.ts-header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 20px;background:var(--surf);border-bottom:1px solid var(--bord);flex-wrap:wrap}
.ts-logo{display:flex;align-items:center;gap:10px}
.ts-logo-icon{font-size:1.3rem}
.ts-logo-title{font-family:'Playfair Display',Georgia,serif;font-weight:700;font-size:1rem;letter-spacing:-.3px;color:var(--tx)}
.ts-logo-sub{font-size:.7rem;color:var(--tx2);margin-top:1px}

.ts-card{margin:12px 14px;background:var(--card);border:1px solid var(--bord);border-radius:var(--r);padding:14px 16px}

.ts-step-hdr{display:flex;align-items:flex-start;gap:9px;margin-bottom:12px}
.ts-step-num{width:22px;height:22px;flex-shrink:0;background:var(--tx);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:500;font-size:.7rem}
.ts-step-title{font-weight:500;font-size:.82rem;color:var(--tx)}
.ts-step-sub{font-size:.69rem;color:var(--tx2);margin-top:2px}
.ts-hint{font-weight:400;color:var(--mt);font-size:.69rem}

.ts-btn{display:inline-flex;align-items:center;gap:5px;font-family:inherit;font-size:.76rem;font-weight:500;border:1px solid var(--bord2);border-radius:7px;padding:0 13px;height:32px;cursor:pointer;transition:all .15s;white-space:nowrap;text-decoration:none;background:var(--surf);color:var(--tx)}
.ts-btn:hover{background:var(--card2)}
.ts-btn:active{transform:scale(.98)}
.ts-btn-primary{background:var(--tx);color:#fff;border-color:var(--tx)}
.ts-btn-primary:hover{background:var(--acch);border-color:var(--acch)}
.ts-btn-ai{background:var(--acc2);color:#fff;border-color:var(--acc2)}
.ts-btn-ai:hover{background:#5b21b6;border-color:#5b21b6}
.ts-btn-success{background:#fff;color:var(--green);border-color:var(--green)}
.ts-btn-success:hover{background:var(--greenl)}
.ts-btn-danger{background:var(--red);color:#fff;border-color:var(--red)}
.ts-btn-ghost{background:var(--surf);color:var(--tx2);border:1px solid var(--bord2)}
.ts-btn-ghost:hover{background:var(--card2);color:var(--tx)}
.ts-btn-sm{padding:0 10px;height:26px;font-size:.7rem;border-radius:6px}
.ts-icon-btn{background:var(--surf);border:1px solid var(--bord2);border-radius:6px;width:24px;height:24px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;font-size:.8rem;flex-shrink:0;transition:background .15s}
.ts-icon-btn:hover{background:var(--card2)}

input[type="url"],input[type="text"],input[type="email"],input[type="number"],select,textarea{width:100%;background:var(--card2);border:1px solid var(--bord2);border-radius:7px;color:var(--tx);font-family:inherit;font-size:.76rem;padding:0 10px;height:32px;outline:none;transition:border-color .15s;box-sizing:border-box}
textarea{height:auto;padding:8px 10px}
input:focus,select:focus,textarea:focus{border-color:var(--tx);background:var(--surf)}
input::placeholder,textarea::placeholder{color:var(--mt)}

.ts-url-row{display:flex;gap:7px;flex-wrap:wrap}
.ts-url-row input{flex:1;min-width:200px}

.ts-options-row{display:flex;gap:16px;align-items:center;margin-top:8px;flex-wrap:wrap}
.ts-toggle-label{display:flex;align-items:center;gap:6px;font-size:.76rem;cursor:pointer;color:var(--tx2)}
.ts-toggle-label input{width:auto;accent-color:var(--tx)}
.ts-pages-row{display:flex;align-items:center;gap:6px;font-size:.76rem;color:var(--tx2)}
.ts-pages-row input{width:50px !important;height:28px}

#ts-analyze-status{margin-top:8px;padding:7px 11px;border-radius:7px;font-size:.72rem;border:1px solid var(--bord);background:var(--card2);color:var(--tx2)}
#ts-analyze-status.ok{background:var(--greenl);border-color:#bbf7d0;color:var(--green)}
#ts-analyze-status.err{background:var(--redl);border-color:#fca5a5;color:var(--red)}
#ts-analyze-status.info{background:#f5f3ff;border-color:#ddd6fe;color:var(--acc2)}

.ts-badge{display:inline-flex;align-items:center;height:20px;padding:0 8px;font-size:.67rem;font-weight:500;border-radius:99px;background:var(--card2);border:1px solid var(--bord2);color:var(--tx2)}
.ts-badge.high{background:var(--greenl);border-color:#bbf7d0;color:var(--green)}
.ts-badge.medium{background:var(--yellowl);border-color:#fde047;color:var(--yellow)}
.ts-badge.low{background:var(--redl);border-color:#fca5a5;color:var(--red)}

.ts-fields-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:8px;margin-bottom:10px}
.ts-field-card{background:var(--card2);border:1px solid var(--bord);border-radius:8px;padding:8px 10px;transition:border-color .15s}
.ts-field-card.active{border-color:var(--tx);background:var(--surf)}
.ts-field-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.ts-field-toggle{display:flex;align-items:center;gap:6px;cursor:pointer;font-size:.78rem;font-weight:500;user-select:none;color:var(--tx)}
.ts-field-toggle input{width:13px;height:13px;accent-color:var(--tx);cursor:pointer}
.ts-field-actions{display:flex;align-items:center;gap:3px}
.ts-sel-row{display:flex;gap:5px;align-items:center}
.ts-sel-inp{font-size:.7rem !important;padding:0 8px !important;height:28px !important}

.ts-transform-panel{margin-top:8px;padding:8px 10px;background:var(--surf);border:1px solid var(--bord);border-radius:6px;display:flex;flex-direction:column;gap:6px}
.ts-transform-panel select,.ts-transform-panel input{font-size:.72rem !important;height:26px !important}
.ts-tfm-result{font-size:.72rem;color:var(--green);font-weight:500}
.ts-examples-panel{padding:8px;background:var(--card2);border-radius:6px}
.ts-examples-title{font-size:.69rem;color:var(--tx2);margin-bottom:5px;font-weight:500}
.ts-example-row{display:flex;gap:5px;margin-bottom:4px;align-items:center}
.ts-example-row input{font-size:.69rem !important;height:26px !important}
.ts-example-sep{font-size:.72rem;color:var(--mt);flex-shrink:0}

.ts-dot{display:inline-block;width:7px;height:7px;border-radius:50%}
.ts-dot-green{background:var(--green)}
.ts-dot-gray{background:#ccc}

.ts-product-sel-row,.ts-pagination-row{margin-top:10px}
.ts-product-sel-row label,.ts-pagination-row label{display:block;font-size:.72rem;color:var(--tx2);font-weight:500;margin-bottom:4px}
.ts-pagination-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}

.ts-custom-field{background:var(--card2);border:1px solid var(--bord);border-radius:8px;padding:9px 11px;margin-bottom:7px}
.ts-custom-field-hdr{display:flex;align-items:center;gap:7px;margin-bottom:7px}
.ts-custom-field-hdr input{flex:1}
.ts-custom-field-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.ts-mapping-row{display:flex;gap:5px;margin-bottom:4px;align-items:center}
.ts-mapping-arrow{flex-shrink:0;color:var(--mt);font-size:.76rem}

.ts-ai-suggest-table{width:100%;border-collapse:collapse;font-size:.72rem}
.ts-ai-suggest-table tr{border-bottom:1px solid var(--bord)}
.ts-ai-suggest-table tr:last-child{border-bottom:none}
.ts-ai-suggest-table td{padding:7px 8px;vertical-align:middle}
.ts-suggest-name{font-weight:500;color:var(--tx);white-space:nowrap}
.ts-suggest-sel{font-family:'Courier New',monospace;font-size:.65rem;color:var(--acc2);background:#f5f3ff;padding:2px 6px;border-radius:4px}
.ts-suggest-desc{color:var(--tx2)}

.ts-product-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(185px,1fr));gap:10px}
.ts-product-card{background:var(--surf);border:1px solid var(--bord);border-radius:8px;overflow:hidden;transition:box-shadow .2s,transform .15s}
.ts-product-card:hover{box-shadow:var(--shm);transform:translateY(-2px)}
.ts-product-card.invalid{border-color:#fca5a5;opacity:.8}

.ts-carousel{position:relative;overflow:hidden;height:130px;background:var(--card2)}
.ts-carousel-imgs{display:flex;transition:transform .3s ease;height:100%}
.ts-carousel-img{min-width:100%;height:130px;object-fit:cover}
.ts-carousel-nav{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.9);border:1px solid var(--bord);border-radius:50%;width:24px;height:24px;cursor:pointer;font-size:.75rem;display:flex;align-items:center;justify-content:center}
.ts-carousel-prev{left:4px}
.ts-carousel-next{right:4px}
.ts-carousel-dots{position:absolute;bottom:4px;left:50%;transform:translateX(-50%);display:flex;gap:3px}
.ts-carousel-dot{width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.6);cursor:pointer}
.ts-carousel-dot.active{background:#fff}
.ts-img-placeholder{height:130px;background:var(--card2);display:flex;align-items:center;justify-content:center;font-size:1.8rem;color:var(--bord2)}

.ts-product-body{padding:9px 11px}
.ts-product-title{font-weight:500;font-size:.76rem;color:var(--tx);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:3px}
.ts-product-price{color:var(--green);font-weight:600;font-size:.82rem;margin-bottom:3px}
.ts-product-loc{font-size:.68rem;color:var(--tx2);margin-bottom:3px}
.ts-product-link{font-size:.68rem;color:var(--acc2);text-decoration:none;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ts-product-link:hover{text-decoration:underline}
.ts-product-flags{display:flex;gap:3px;flex-wrap:wrap;margin-top:4px}
.ts-flag{font-size:.6rem;padding:1px 5px;border-radius:3px;background:var(--redl);color:var(--red);font-weight:500}
.ts-product-custom{margin-top:5px;font-size:.67rem;color:var(--tx2);border-top:1px solid var(--bord);padding-top:4px}

.ts-save-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px}
.ts-save-col label{display:block;font-size:.72rem;color:var(--tx2);font-weight:500;margin-bottom:4px}

.ts-feed-urls{margin-top:12px;padding:11px 13px;background:#f5f3ff;border:1px solid #ddd6fe;border-radius:8px;font-size:.74rem}
.ts-feed-urls-title{font-weight:500;margin-bottom:7px;color:var(--acc2)}
.ts-url-item{display:flex;align-items:center;gap:7px;margin-bottom:4px;flex-wrap:wrap}
.ts-url-item label{color:var(--tx2);min-width:100px;font-weight:500;font-size:.68rem}
.ts-url-item a{color:var(--acc2);word-break:break-all;text-decoration:none;font-size:.68rem}
.ts-url-item a:hover{text-decoration:underline}

.ts-export-bar{display:flex;align-items:center;gap:8px;padding:9px 14px;background:#f5f3ff;border-bottom:1px solid #ddd6fe;flex-wrap:wrap}

.ts-diff-bar{padding:7px 14px;background:var(--yellowl);border-bottom:1px solid #fde047;font-size:.74rem;color:#92400e;display:flex;gap:12px;flex-wrap:wrap}
.ts-diff-new{color:var(--green);font-weight:500}
.ts-diff-removed{color:var(--red);font-weight:500}
.ts-diff-price{color:var(--yellow);font-weight:500}

#ts-list-body{padding:14px}
.ts-feed-row{background:var(--card);border:1px solid var(--bord);border-radius:8px;padding:12px 14px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;transition:box-shadow .2s,border-color .2s;margin-bottom:8px}
.ts-feed-row:hover{box-shadow:var(--shm);border-color:var(--tx)}
.ts-feed-info{flex:1;min-width:140px}
.ts-feed-name{font-weight:500;font-size:.84rem;margin-bottom:3px;color:var(--tx)}
.ts-feed-meta{display:flex;gap:7px;flex-wrap:wrap;font-size:.68rem;color:var(--tx2)}
.ts-feed-tag{background:var(--card2);border:1px solid var(--bord2);border-radius:4px;padding:1px 6px;color:var(--tx2);font-size:.63rem;font-weight:500}
.ts-feed-tag.warn{background:var(--yellowl);border-color:#fde047;color:var(--yellow)}
.ts-feed-tag.err{background:var(--redl);border-color:#fca5a5;color:var(--red)}
.ts-feed-tag.ok{background:var(--greenl);border-color:#bbf7d0;color:var(--green)}
.ts-feed-actions{display:flex;gap:5px;flex-wrap:wrap}

.ts-log-panel{padding:14px}
.ts-log-entry{padding:7px 11px;border-left:2px solid var(--bord);background:var(--card2);margin-bottom:5px;border-radius:0 6px 6px 0;font-size:.72rem}
.ts-log-entry.ok{border-color:var(--green)}
.ts-log-entry.error{border-color:var(--red);background:var(--redl)}
.ts-log-meta{color:var(--mt);font-size:.67rem;margin-top:2px}

.ts-loading{display:flex;align-items:center;gap:10px;padding:24px 14px;font-size:.78rem;color:var(--tx2)}
.ts-spin{width:16px;height:16px;flex-shrink:0;border:2px solid var(--bord2);border-top-color:var(--tx);border-radius:50%;animation:tsSpin .65s linear infinite}
@keyframes tsSpin{to{transform:rotate(360deg)}}

.ts-empty{text-align:center;padding:40px 24px}
.ts-empty-icon{font-size:2.5rem;margin-bottom:10px}
.ts-empty-title{font-family:'Playfair Display',Georgia,serif;font-size:1rem;font-weight:700;margin-bottom:5px;color:var(--tx)}
.ts-empty-sub{font-size:.78rem;color:var(--tx2);line-height:1.6}

.ts-alert{margin:10px 14px 0;padding:9px 13px;border-radius:7px;font-size:.76rem;font-weight:500}
.ts-alert.ok{background:var(--greenl);border:1px solid #bbf7d0;color:var(--green)}
.ts-alert.err{background:var(--redl);border:1px solid #fca5a5;color:var(--red)}

.ts-notice{margin:0;padding:9px 14px;font-size:.74rem}
.ts-notice-warn{background:var(--yellowl);border-bottom:1px solid #fde047;color:#92400e}

#ts-picker-overlay{position:fixed;inset:0;z-index:99999;display:flex;flex-direction:column;background:#000}
.ts-picker-bar{display:flex;align-items:center;justify-content:space-between;padding:9px 14px;background:#111;color:#e2e8f0;font-size:.78rem;gap:10px;flex-shrink:0}
#ts-picker-frame{flex:1;border:none;background:#fff}

.ts-source-urls{margin-top:10px;display:flex;flex-direction:column;gap:5px}
#ts-source-urls{width:100%;min-height:80px;border:1px solid var(--bord2);border-radius:8px;padding:8px 10px;background:var(--card2);color:var(--tx);resize:vertical;font:inherit;font-size:.74rem;line-height:1.6}
#ts-source-urls:focus{outline:none;border-color:var(--tx);background:var(--surf)}

.ts-discovery-wrap{margin-top:10px}
.ts-discovery-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:8px}
.ts-discovery-col{border:1px solid var(--bord);border-radius:8px;background:var(--surf);padding:10px 12px}
.ts-discovery-title{font-weight:500;font-size:.72rem;margin-bottom:7px;color:var(--tx2);text-transform:uppercase;letter-spacing:.4px}
.ts-discovery-list{display:flex;flex-direction:column;gap:5px;max-height:160px;overflow:auto}
.ts-discovery-item{display:flex;align-items:flex-start;gap:7px;border:1px solid var(--bord);border-radius:7px;padding:6px 9px;background:var(--card2);font-size:.72rem}
.ts-discovery-item small{display:block;color:var(--tx2);margin-top:1px;word-break:break-all;font-size:.65rem}
.ts-discovery-empty{color:var(--mt);font-size:.76rem}
.ts-source-chip{display:inline-flex;gap:5px;align-items:center;padding:3px 8px;border-radius:999px;background:#f5f3ff;color:var(--acc2);font-size:.7rem;margin-right:5px;margin-top:5px}
.ts-preview-meta{margin-top:6px;color:var(--tx2);font-size:.72rem}

@media(max-width:540px){
  .ts-card{margin:8px;padding:12px 10px}
  .ts-fields-grid{grid-template-columns:1fr}
  .ts-product-grid{grid-template-columns:1fr 1fr}
  .ts-pagination-grid{grid-template-columns:1fr}
  .ts-discovery-grid{grid-template-columns:1fr}
}
@media(max-width:380px){
  .ts-product-grid{grid-template-columns:1fr}
}
@media(max-width:900px){
  .ts-discovery-grid{grid-template-columns:1fr}
}

/* ── Progress pulse animation ─────────────────────────────── */
.ts-pulse {
    animation: ts-pulse-fade 1.8s ease-in-out infinite;
    color: #7c3aed !important;
    font-weight: 500;
}
@keyframes ts-pulse-fade {
    0%   { opacity: 1; }
    50%  { opacity: 0.4; }
    100% { opacity: 1; }
}

/* ── Analyze status box ───────────────────────────────── */
.ts-analyze-status-box {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: #f5f3ff;
    border: 1px solid #ddd6fe;
    border-radius: 8px;
    margin-top: 12px;
    font-size: 14px;
    font-weight: 500;
    color: #6d28d9;
}
.ts-analyze-status-box:empty { display: none !important; }

.ts-product-desc {
    font-size: 11px;
    color: var(--tx2, #666);
    margin: 2px 0 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4;
}

/* ── Hide field button ────────────────────────────────── */
.ts-hide-field {
    opacity: 0;
    transition: opacity .15s;
    font-size: 11px !important;
    color: #aaa !important;
    padding: 0 4px !important;
}
.ts-field-card:hover .ts-hide-field {
    opacity: 1;
}
.ts-field-custom {
    border-color: rgba(167,139,250,.3) !important;
    background: var(--card2, #faf5ff) !important;
}

/* Hide spinner when status box is empty */
.ts-analyze-status-box:empty { display: none !important; }
.ts-analyze-status-box:empty::before { display: none !important; }