/* ── VQL SHOWCASE ─────────────────────────────── */
.lv-intro { display:flex; flex-wrap:wrap; gap:8px 14px; align-items:center; margin-bottom:16px; }
.lv-intro h2 { font-size:23px; font-weight:700; letter-spacing:-0.02em; color:var(--ink); }
.lv-intro .lv-sub { color:var(--muted); font-weight:400; font-size:15px; letter-spacing:0; }
.lv-intro p { flex-basis:100%; color:var(--muted); font-size:13px; line-height:1.55; max-width:860px; }
.lv-intro b { color:var(--ink); font-weight:600; }
.lv-intro code, .lv-note code, .lv-help code, .lv-flabel code { font-family:var(--mono); font-size:11.5px; color:var(--blue-deep); background:var(--blue-soft); padding:1px 7px; border-radius:6px; }
.lv-recipes { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:18px; }
.lv-recipe { background:var(--card); border:none; border-radius:20px; color:var(--text); padding:12px 16px; text-align:left; cursor:pointer; max-width:260px; box-shadow:var(--shadow-card); transition:box-shadow .2s ease, transform .2s ease; }
.lv-recipe b { display:block; font-size:13px; font-weight:600; color:var(--ink); letter-spacing:-0.01em; }
.lv-recipe span { display:block; font-size:11.5px; color:var(--muted); line-height:1.35; margin-top:3px; }
.lv-recipe:hover { transform:translateY(-1px); box-shadow:var(--shadow-hover), 0 0 0 2px rgba(46,126,240,.35); }

.lv-layout { display:grid; grid-template-columns:minmax(340px,430px) 1fr; gap:20px; align-items:start; }
@media (max-width:1000px) { .lv-layout { grid-template-columns:1fr; } }
#lv-builder { display:flex; flex-direction:column; gap:10px; }
.lv-card { background:var(--card); border-radius:20px; box-shadow:var(--shadow-card); overflow:hidden; }
.lv-card > summary { list-style:none; cursor:pointer; padding:12px 16px; display:flex; align-items:center; gap:8px; font-size:13px; color:var(--ink); user-select:none; transition:background .14s; }
.lv-card > summary:hover { background:#fafafa; }
.lv-card > summary::-webkit-details-marker { display:none; }
.lv-card > summary::after { content:''; margin-left:auto; flex-shrink:0; width:7px; height:7px; border-right:2px solid var(--faint); border-bottom:2px solid var(--faint); transform:rotate(-45deg); transition:transform .2s var(--ease); }
.lv-card[open] > summary::after { transform:rotate(45deg); }
.lv-card > summary .lv-op { font-family:var(--mono); font-size:12.5px; font-weight:700; color:var(--blue-deep); }
.lv-card > summary .lv-hint { color:var(--muted); font-size:11.5px; }
.lv-card > summary .lv-count { background:var(--blue); color:#fff; border-radius:30px; padding:0 8px; font-size:10.5px; font-weight:600; line-height:18px; }
.lv-card-body { padding:4px 16px 16px; display:flex; flex-direction:column; gap:10px; border-top:1px solid var(--line); }
.lv-help { font-size:12px; color:var(--muted); line-height:1.5; padding-top:10px; }
.lv-help b { color:var(--ink); font-weight:600; }

.lv-clause { background:var(--panel); border-radius:16px; padding:10px; display:flex; flex-direction:column; gap:8px; }
.lv-row { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.lv-clause select, .lv-clause input[type=text], .lv-sel, .lv-num {
  background:var(--card); border:1px solid var(--line); border-radius:12px; color:var(--ink); font-size:12.5px; padding:7px 10px; outline:none; transition:border-color .15s, box-shadow .15s; }
.lv-clause input[type=text] { flex:1; min-width:120px; }
.lv-clause input[type=text]::placeholder { color:#999; }
.lv-clause select:focus, .lv-clause input[type=text]:focus, .lv-sel:focus, .lv-num:focus { border-color:var(--blue); box-shadow:0 0 0 3px rgba(46,126,240,.15); }
.lv-x { background:none; border:none; color:var(--faint); cursor:pointer; font-size:18px; line-height:1; width:28px; height:28px; border-radius:50%; flex-shrink:0; transition:background .14s, color .14s; }
.lv-x:hover { color:var(--coral); background:var(--coral-soft); }
.lv-add { background:transparent; border:1.5px dashed rgba(0,0,0,.14); border-radius:30px; color:var(--muted); font-size:12px; font-weight:500; padding:8px; cursor:pointer; transition:border-color .14s, color .14s, background .14s; }
.lv-add:hover { border-color:var(--blue); color:var(--blue); background:var(--blue-soft); }
.lv-slider { display:flex; align-items:center; gap:8px; font-size:12px; color:var(--muted); }
.lv-slider input[type=range] { flex:1; accent-color:var(--blue); min-width:80px; }
.lv-slider output { min-width:38px; text-align:right; color:var(--ink); font-family:var(--mono); font-size:11.5px; font-weight:600; }
.lv-slider label { min-width:78px; font-family:var(--mono); font-size:11.5px; }
.lv-thumb { width:38px; height:38px; border-radius:10px; object-fit:cover; box-shadow:0 1px 4px rgba(0,0,0,.12); }
.lv-mini { font-size:11.5px; font-weight:500; background:var(--card); border:1px solid var(--line); color:var(--ink); border-radius:30px; padding:5px 11px; cursor:pointer; white-space:nowrap; transition:background .14s, border-color .14s, color .14s; }
.lv-mini:hover { border-color:var(--blue); color:var(--blue); background:#f7faff; }
.lv-or { font-family:var(--mono); font-size:10.5px; font-weight:600; color:var(--teal); }
.lv-chips { display:flex; flex-wrap:wrap; gap:6px; }
.lv-chip { display:inline-flex; align-items:center; font-size:11.5px; background:var(--panel); color:var(--text); border-radius:30px; padding:4px 11px; cursor:pointer; user-select:none; transition:background .14s, color .14s, box-shadow .14s; }
.lv-chip:hover { background:var(--hover); }
.lv-chip.on { background:var(--blue); color:#fff; box-shadow:var(--shadow-active); }
.lv-chip i { font-style:normal; font-family:var(--mono); font-size:10.5px; color:var(--faint); margin-left:5px; }
.lv-chip.on i { color:rgba(255,255,255,.75); }
.lv-flabel { font-family:var(--mono); font-size:11px; color:var(--muted); margin:2px 0 4px; }
.lv-flabel b { color:var(--ink); font-weight:600; }
.lv-toggle { display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--text); cursor:pointer; }
.lv-toggle b { color:var(--ink); font-weight:600; }
.lv-toggle input { accent-color:var(--blue); width:15px; height:15px; }

/* output */
#lv-out { min-width:0; display:flex; flex-direction:column; gap:14px; }
.lv-bar { display:flex; flex-wrap:wrap; gap:10px 14px; align-items:center; background:var(--card); border-radius:20px; padding:10px 12px; box-shadow:var(--shadow-card); }
.lv-bar .send-btn { margin-top:0; padding:9px 18px; }
.lv-bar .timing-chip { background:var(--panel); box-shadow:none; }
.lv-note { font-size:12px; color:var(--muted); line-height:1.5; }
.lv-cols { display:grid; gap:18px; grid-template-columns:1fr; }
.lv-colh { font-size:15px; font-weight:700; color:var(--ink); letter-spacing:-0.02em; margin-bottom:10px; display:flex; gap:8px; align-items:center; }
.lv-colsub { color:var(--faint); font-weight:400; font-size:13px; letter-spacing:0; }
.dot-muted { background:var(--faint); }
.lv-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:12px; }
.lv-photo { background:var(--card); border-radius:20px; overflow:hidden; display:flex; flex-direction:column; position:relative; box-shadow:var(--shadow-card); transition:box-shadow .2s ease; }
.lv-photo:hover { box-shadow:var(--shadow-hover); }
.lv-photo.pinned { box-shadow:0 0 0 2px var(--coral), var(--shadow-card); }
.lv-photo .im { aspect-ratio:4/3; background:var(--hover); cursor:zoom-in; overflow:hidden; }
.lv-photo .im img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .3s ease; }
.lv-photo .im:hover img { transform:scale(1.03); }
.lv-rank { position:absolute; top:8px; left:8px; background:rgba(255,255,255,.92); color:var(--ink); font-family:var(--mono); font-size:11px; font-weight:700; border-radius:30px; padding:2px 9px; box-shadow:0 1px 4px rgba(0,0,0,.12); }
.lv-move { position:absolute; top:8px; right:8px; font-family:var(--mono); font-size:10.5px; font-weight:700; border-radius:30px; padding:2px 8px; background:rgba(255,255,255,.92); box-shadow:0 1px 4px rgba(0,0,0,.12); }
.lv-move.up { color:var(--teal); } .lv-move.down { color:var(--coral); } .lv-move.new { color:var(--purple); }
.lv-info { padding:10px 12px 12px; display:flex; flex-direction:column; gap:7px; }
.lv-cap { font-size:12.5px; color:var(--text); line-height:1.4; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.lv-score { height:6px; background:#ebebeb; border-radius:30px; overflow:hidden; }
.lv-score i { display:block; height:100%; background:linear-gradient(90deg,#5b9ef5,#1a55c8); border-radius:30px; }
.lv-meta { display:flex; flex-wrap:wrap; gap:4px; font-size:10.5px; color:var(--muted); }
.lv-meta span { display:inline-flex; align-items:center; background:var(--panel); border-radius:30px; padding:1px 8px; }
.lv-dot { display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:4px; vertical-align:middle; border:1px solid rgba(0,0,0,.15); }
.lv-acts { display:flex; gap:4px; }
.lv-acts button { flex:1; padding:5px 6px; }
.lv-scoreline { font-family:var(--mono); font-size:10.5px; color:var(--muted); display:flex; justify-content:space-between; align-items:center; }
.lv-scoreline a { color:var(--purple); font-family:var(--sans); font-size:11.5px; font-weight:600; text-decoration:none; }
.lv-scoreline a:hover { text-decoration:underline; }
.lv-why { font-family:var(--mono); font-size:10.5px; color:var(--muted); background:var(--panel); border-radius:12px; padding:8px 10px; display:none; flex-direction:column; gap:4px; }
.lv-photo.open .lv-why { display:flex; }
.lv-why .r { display:flex; align-items:center; gap:6px; }
.lv-why .r em { font-style:normal; min-width:64px; color:var(--muted); }
.lv-why .r u { text-decoration:none; height:5px; border-radius:30px; background:var(--purple); display:block; }
.lv-why .r b { color:var(--ink); font-weight:600; }
.lv-why .eq, .lv-why .eq b { color:var(--teal); }

.lv-facets { display:flex; flex-direction:column; gap:8px; background:var(--card); border-radius:20px; padding:14px 16px; box-shadow:var(--shadow-card); }
.lv-tabs { display:flex; gap:6px; }
.lv-code { background:#10211f; color:#e7fff8; border-radius:16px; padding:14px 16px; font-family:var(--mono); font-size:11.5px; overflow:auto; max-height:420px; white-space:pre; line-height:1.55; }
.lv-code .k { color:#8cc2ff; } .lv-code .s { color:#7ee0c3; } .lv-code .n { color:#f7c97e; } .lv-code .e { color:#ff9e8f; }
.lv-sample-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:10px; max-height:70vh; overflow:auto; padding:2px; }
.lv-sample-grid img { width:100%; aspect-ratio:1; object-fit:cover; border-radius:14px; cursor:pointer; border:2px solid transparent; transition:border-color .14s; }
.lv-sample-grid img:hover { border-color:var(--blue); }
.lv-modal-inner { background:var(--card); border-radius:24px; padding:18px; width:min(760px,94vw); box-shadow:var(--shadow-panel); }
.lv-modal-title { font-size:15px; font-weight:700; color:var(--ink); letter-spacing:-0.02em; }

#lv-timing { display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
#lv-timing .timing-chip { margin:0; font-size:11.5px; padding:4px 10px; }
.lv-clause .lv-row input[type=text] { flex:1 1 100%; order:5; }
.lv-cols.cmp { grid-template-columns:minmax(0,1fr) minmax(0,2.2fr); }
.lv-cols.cmp .lv-grid.base { grid-template-columns:1fr 1fr; }
.lv-cols.cmp .lv-grid.base .lv-cap { -webkit-line-clamp:3; }
@media (max-width:620px) {
  .lv-cols.cmp { grid-template-columns:1fr; }
  .lv-cols.cmp .lv-grid.base { grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); }
}