/* 20260716-1920_051 */
/* @CST:add:sf7c:css static/shopfish_app.css - dark default + light toggle, cards, badges,
   search rows, sections. Jobfish visual DNA, shopfish palette. */

:root {
    --sf-bg: #0f1923;
    --sf-panel: rgba(255,255,255,0.04);
    --sf-text: #e8eef4;
    --sf-dim: rgba(232,238,244,0.55);
    --sf-accent: #4fc3f7;
    --sf-border: rgba(128,128,128,0.18);
    --sf-card: rgba(255,255,255,0.03);
}
body.sf-light {
    --sf-bg: #f4f6f8;
    --sf-panel: rgba(0,0,0,0.03);
    --sf-text: #17222b;
    --sf-dim: rgba(23,34,43,0.55);
    --sf-border: rgba(0,0,0,0.12);
    --sf-card: #ffffff;
}

* { box-sizing: border-box; }
body {
    margin: 0; background: var(--sf-bg); color: var(--sf-text);
    font-family: 'DM Sans', sans-serif; font-size: 15px;
}

.sf-banner { text-align: center; padding: 18px 12px 6px; }
.sf-title { font-family: 'Bodoni Moda', serif; font-size: 2.1em; margin: 0; letter-spacing: 1px; }
.sf-fish { filter: drop-shadow(0 0 10px rgba(79,195,247,0.7)); }
.sf-tagline { color: var(--sf-dim); font-size: 0.9em; margin-top: 2px; }

.sf-toolbar { position: sticky; top: 0; z-index: 100; background: var(--sf-bg);
    border-bottom: 1px solid var(--sf-border); padding: 6px 14px; }
.sf-row { display: flex; align-items: center; gap: 10px; }
.sf-tool-btn { cursor: pointer; font-size: 1.3em; opacity: 0.8; user-select: none; }
.sf-tool-btn:hover { opacity: 1; transform: scale(1.1); }
.sf-status { margin-left: auto; font-size: 0.85em; color: var(--sf-dim); }

.sf-main { max-width: 980px; margin: 0 auto; padding: 14px; }

.sf-search-row { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.sf-search-emoji { font-size: 1.3em; flex-shrink: 0; }
.sf-search-row input {
    flex: 1; min-width: 0; padding: 9px 13px; border-radius: 9px; font-size: 16px;
    border: 1px solid var(--sf-border); background: var(--sf-panel); color: inherit;
}
.sf-search-all input { border-color: rgba(79,195,247,0.5); box-shadow: 0 0 10px rgba(79,195,247,0.25); }
.sf-search-btn {
    padding: 9px 18px; border-radius: 9px; border: none; cursor: pointer;
    color: #fff; font-weight: 700; flex-shrink: 0; font-family: inherit;
}
.sf-btn-all { background: linear-gradient(90deg, #4fc3f7, #0288d1); }
.sf-search-btn:disabled { opacity: 0.35; cursor: default; }
.sf-row-disabled input { opacity: 0.4; }

.sf-sources-toggle { cursor: pointer; color: var(--sf-dim); font-size: 0.9em; margin: 6px 0; user-select: none; }
.sf-sources-toggle:hover { color: var(--sf-accent); }

.sf-refine-row { display: flex; gap: 8px; align-items: center; margin: 10px 0; }
.sf-refine-row input {
    flex: 1; padding: 7px 12px; border-radius: 8px; font-size: 15px;
    border: 1px solid var(--sf-border); background: var(--sf-panel); color: inherit;
}
.sf-refine-count { font-size: 0.8em; color: var(--sf-dim); white-space: nowrap; }

.sf-section { margin: 14px 0; border: 1px solid var(--sf-border); border-radius: 10px; overflow: hidden; }
.sf-sec-head { display: flex; justify-content: space-between; align-items: center;
    padding: 8px 14px; cursor: pointer; background: var(--sf-panel);
    border-left: 4px solid; user-select: none; }
.sf-sec-title { font-weight: 700; }
.sf-sec-count { font-size: 0.82em; color: var(--sf-dim); }
.sf-sec-body { padding: 6px; }

/* @CST:add:SF4A:sec_scroll Independent per-section scroll box (adhdinfo pattern) */
.sf-sec-scroll { max-height: 520px; overflow-y: auto; overflow-x: hidden; }
.sf-sec-scroll::-webkit-scrollbar { width: 8px; }
.sf-sec-scroll::-webkit-scrollbar-thumb { background: rgba(128,128,128,0.4); border-radius: 4px; }
.sf-sec-empty { padding: 14px; opacity: 0.5; font-size: 0.9em; }
#sf-sec-top { border-color: rgba(255,215,0,0.4); }
#sf-sec-top .sf-sec-head { background: rgba(255,215,0,0.08); }

.sf-card {
    display: flex; gap: 12px; padding: 10px; margin: 6px 0; border-radius: 10px;
    background: var(--sf-card); border: 1px solid var(--sf-border);
    cursor: pointer; transition: transform 0.12s, box-shadow 0.12s;
}
.sf-card:hover { transform: translateY(-1px); box-shadow: 0 4px 18px rgba(0,0,0,0.35); border-color: rgba(79,195,247,0.4); }
.sf-card-thumb {
    width: 84px; height: 84px; border-radius: 8px; object-fit: contain; flex-shrink: 0;
    background: rgba(255,255,255,0.05); padding: 4px;
}
.sf-thumb-ph { width: 84px; height: 84px; border-radius: 8px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; font-size: 2em;
    background: rgba(255,255,255,0.05); }
.sf-card-body { flex: 1; min-width: 0; }
.sf-card-title { font-weight: 600; line-height: 1.3; margin-bottom: 3px; }
.sf-card-desc { font-size: 0.82em; color: var(--sf-dim); margin-bottom: 5px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-card-badges { display: flex; flex-wrap: wrap; gap: 5px; }

.sf-badge {
    display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px;
    border-radius: 5px; font-size: 0.76em; font-weight: 600;
    background: var(--sf-panel); border: 1px solid var(--sf-border);
}
.sf-b-price  { background: rgba(255,193,7,0.13); color: #ffc107; border-color: rgba(255,193,7,0.4); }
.sf-b-sale   { background: rgba(0,230,118,0.13); color: #00e676; border-color: rgba(0,230,118,0.4); text-decoration: line-through; }
.sf-b-ship   { background: rgba(38,198,218,0.13); color: #26c6da; border-color: rgba(38,198,218,0.4); }
.sf-b-cond   { background: rgba(255,167,38,0.13); color: #ffa726; border-color: rgba(255,167,38,0.4); }
.sf-b-rating { background: rgba(255,238,88,0.10); color: #ffee58; border-color: rgba(255,238,88,0.35); }
.sf-b-social { background: rgba(236,64,122,0.12); color: #ec407a; border-color: rgba(236,64,122,0.4); }
.sf-b-seller { background: rgba(171,71,188,0.12); color: #ba68c8; border-color: rgba(171,71,188,0.4); }
.sf-b-loc    { background: rgba(79,195,247,0.10); color: #4fc3f7; border-color: rgba(79,195,247,0.35); }

.sf-empty { text-align: center; padding: 40px; color: var(--sf-dim); font-size: 1.1em; }
.sf-footer { text-align: center; padding: 24px 12px; color: var(--sf-dim); font-size: 0.75em; }

@media (max-width: 640px) {
    .sf-card-thumb, .sf-thumb-ph { width: 64px; height: 64px; }
    .sf-search-btn { padding: 9px 12px; font-size: 0.85em; }
}