/* ============================================================================
   11-demos-index.css — DMW-quality demos showcase (search, filters, cards)
   ============================================================================ */
.demo-search{max-width:600px;margin:0 auto 22px;position:relative}
.demo-search input{width:100%;padding:17px 20px 17px 52px;border:1.5px solid var(--line);border-radius:var(--r-full);
  font-family:var(--font-b);font-size:16px;background:var(--glass-hi);backdrop-filter:blur(12px);box-shadow:var(--shadow-sm);
  transition:border-color .18s,box-shadow .18s}
.demo-search input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 4px rgba(22,104,251,.13)}
.demo-search .ds-ic{position:absolute;left:20px;top:50%;transform:translateY(-50%);font-size:18px;opacity:.6}

.demo-filters{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;max-width:820px;margin:0 auto}
.df-pill{padding:9px 18px;border-radius:var(--r-full);border:1.5px solid var(--line);background:var(--surface);
  font-family:var(--font-b);font-weight:600;font-size:13.5px;color:var(--ink-2);cursor:pointer;transition:all .16s var(--ease)}
.df-pill:hover{border-color:rgba(22,104,251,.3);color:var(--blue)}
.df-pill.on{background:var(--grad);color:#fff;border-color:transparent;box-shadow:0 8px 18px -6px rgba(22,104,251,.6)}

.demo-showcase-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.showcase-card{background:var(--glass-hi);backdrop-filter:blur(14px);border:1px solid var(--glass-brd);border-radius:var(--r-lg);
  overflow:hidden;box-shadow:var(--shadow-sm);transition:transform .24s var(--ease),box-shadow .24s;display:flex;flex-direction:column}
.showcase-card:hover{transform:translateY(-7px);box-shadow:var(--shadow-lg)}
.sc-shot{position:relative;aspect-ratio:16/10;display:grid;place-items:center;
  background:linear-gradient(140deg,#E9F0FC,#F1F6FD);border-bottom:1px solid var(--line-2);overflow:hidden}
.sc-shot .sc-emoji{font-size:54px;filter:drop-shadow(0 8px 18px rgba(22,60,158,.18))}
.sc-shot .sc-tag{position:absolute;top:12px;right:12px;font-size:11px;font-weight:700;padding:5px 12px;border-radius:99px;
  background:rgba(22,104,251,.12);color:var(--blue);display:flex;align-items:center;gap:5px}
.sc-shot .sc-slot-hint{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);font-size:10.5px;font-weight:600;
  color:var(--blue);background:rgba(255,255,255,.85);padding:4px 12px;border-radius:99px;white-space:nowrap}
.sc-body{padding:22px 22px 24px;display:flex;flex-direction:column;flex:1}
.sc-body h3{font-size:19px;margin-bottom:8px;font-family:var(--font-d);letter-spacing:-.01em}
.sc-insight{font-size:13px;color:var(--blue);font-weight:600;line-height:1.45;margin-bottom:14px}
.sc-feats{list-style:none;display:grid;gap:8px;margin-bottom:18px;flex:1}
.sc-feats li{display:flex;gap:9px;align-items:flex-start;font-size:13.5px;color:var(--ink-2);line-height:1.4}
.sc-feats .scf-ic{color:#F5A623;flex:0 0 auto;font-size:12px;margin-top:1px}
.sc-actions{display:flex;align-items:center;gap:12px;margin-top:auto}
.sc-btn{flex:1;padding:11px 18px;font-size:14px}
.sc-build{font-size:14px;font-weight:600;color:var(--ink-2);white-space:nowrap;transition:color .16s}
.sc-build:hover{color:var(--blue)}

@media(max-width:1024px){ .demo-showcase-grid{grid-template-columns:1fr 1fr} }
@media(max-width:640px){ .demo-showcase-grid{grid-template-columns:1fr} }