/* funprompts.easylife.solutions - layered on top of the shared EasyLife app.css */

.fp-hero{padding:86px 0 56px}
.fp-hero .sub{max-width:640px}
/* The shared hero chips assume a dark backdrop, these read on the light one. */
.fp-hero .badge{background:var(--bg-2)!important;color:var(--accent)!important;border:1px solid var(--line)}
.fp-hero .chip-i{background:var(--bg-2);border:1px solid var(--line);color:var(--ink-2)}

/* ---------- filters ---------- */
.fp-filters{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center;justify-content:center;margin:0 0 28px}
.fp-search{flex:1 1 280px;max-width:420px;padding:.7rem 1rem;border:1px solid var(--line);border-radius:12px;
  background:var(--bg-2);color:var(--ink);font:inherit;font-size:.95rem}
.fp-select{padding:.7rem .9rem;border:1px solid var(--line);border-radius:12px;background:var(--bg-2);
  color:var(--ink);font:inherit;font-size:.95rem;cursor:pointer}
.fp-search:focus,.fp-select:focus{outline:none;border-color:var(--accent)}

/* ---------- unstructured 3-column grid ----------
   Columns keep the natural height of every image, so landscape, portrait and
   square pictures all sit in the same wall without being cropped. */
.fp-grid{columns:3;column-gap:22px}
@media (max-width:980px){.fp-grid{columns:2}}
@media (max-width:620px){.fp-grid{columns:1}}

/* Once fp.js re-deals the cards, the wall becomes flex columns so reading
   order runs left to right. The columns rule above is the no-JS fallback. */
.fp-grid.fp-wall{columns:auto;display:flex;gap:22px;align-items:flex-start}
.fp-grid.fp-wall .fp-col{flex:1 1 0;min-width:0;display:flex;flex-direction:column}

.fp-card{break-inside:avoid;-webkit-column-break-inside:avoid;page-break-inside:avoid;
  display:inline-block;width:100%;margin:0 0 22px;
  background:var(--card-solid,var(--bg-2));border:1px solid var(--line);border-radius:18px;
  overflow:hidden;box-shadow:var(--shadow);transition:transform .2s,box-shadow .2s,border-color .2s}
.fp-card:hover{transform:translateY(-3px);border-color:var(--accent);box-shadow:0 14px 40px rgba(0,0,0,.14)}

.fp-media{display:block;width:100%;background:linear-gradient(135deg,#eef2ff,#faf5ff);overflow:hidden}
[data-theme=dark] .fp-media{background:linear-gradient(135deg,#14141a,#1b1b24)}
.fp-media img{display:block;width:100%;height:100%;object-fit:cover}

.fp-body{padding:16px 18px 18px}
.fp-head{margin:0 0 .5rem;font-size:1.05rem;line-height:1.35}
.fp-head a{color:var(--ink);text-decoration:none}
.fp-head a:hover{color:var(--accent)}

.fp-tools{display:flex;flex-wrap:wrap;gap:.35rem;margin-bottom:.7rem}
.fp-pill{font-size:.7rem;padding:.2rem .55rem;border-radius:999px;border:1px solid var(--line);
  color:var(--ink-2);background:var(--bg);white-space:nowrap}
.fp-pill-cat{border-style:dashed}

/* Fixed-height prompt box so every card reads the same, long prompts scroll. */
.fp-prompt{height:132px;overflow:auto;white-space:pre-wrap;word-break:break-word;
  font-size:.85rem;line-height:1.55;color:var(--ink-2);
  background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:.7rem .8rem}
.fp-prompt::-webkit-scrollbar{width:6px}
.fp-prompt::-webkit-scrollbar-thumb{background:var(--line);border-radius:6px}

.fp-actions{display:flex;gap:.5rem;margin-top:.8rem}
.fp-actions .btn{flex:1;text-align:center;padding:.55rem .8rem;font-size:.88rem}
.fp-copy.done{background:#16a34a;border-color:#16a34a}

.fp-empty{text-align:center;padding:48px 24px;max-width:520px;margin:0 auto}

/* ---------- single prompt page ---------- */
.fp-detail{display:grid;grid-template-columns:1.1fr .9fr;gap:30px;align-items:start}
@media (max-width:860px){.fp-detail{grid-template-columns:1fr}}
/* height:auto is essential, without it the img height attribute overrides the
   aspect ratio and the picture is stretched. contain is a second guard. */
.fp-detail-img{width:100%;height:auto;object-fit:contain;border-radius:18px;
  border:1px solid var(--line);display:block}
.fp-detail-prompt{white-space:pre-wrap;word-break:break-word;font-size:.95rem;line-height:1.65;
  background:var(--bg);border:1px solid var(--line);border-radius:14px;padding:1rem 1.1rem;
  max-height:420px;overflow:auto}

/* ---------- toast ---------- */
.fp-toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,24px);opacity:0;pointer-events:none;
  background:#111;color:#fff;padding:.6rem 1.1rem;border-radius:999px;font-size:.9rem;z-index:99;
  transition:opacity .2s,transform .2s}
.fp-toast.show{opacity:1;transform:translate(-50%,0)}

/* ---------- admin ---------- */
.fp-admin-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px}
.fp-row-thumb{width:84px;height:60px;object-fit:cover;border-radius:8px;border:1px solid var(--line)}
.fp-stat{background:var(--bg-2);border:1px solid var(--line);border-radius:14px;padding:16px 18px}
.fp-stat .n{font-size:1.7rem;font-weight:700}
.fp-stat .l{color:var(--ink-2);font-size:.85rem}
.fp-table{width:100%;border-collapse:collapse;font-size:.9rem}
.fp-table th,.fp-table td{padding:.6rem .5rem;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle}
.fp-checks{display:flex;flex-wrap:wrap;gap:.5rem}
.fp-checks label{display:inline-flex;align-items:center;gap:.35rem;border:1px solid var(--line);
  border-radius:999px;padding:.3rem .7rem;font-size:.85rem;cursor:pointer;background:var(--bg-2)}
.fp-checks input{accent-color:var(--accent)}
.fp-drop{border:2px dashed var(--line);border-radius:14px;padding:22px;text-align:center;color:var(--ink-2);cursor:pointer}
.fp-drop.over{border-color:var(--accent);color:var(--ink)}
.fp-preview{max-width:100%;max-height:260px;border-radius:12px;margin-top:12px;display:none}
.fp-note{color:var(--ink-2);font-size:.85rem}
.fp-flash{border-radius:12px;padding:.7rem 1rem;margin-bottom:16px;font-size:.92rem}
.fp-flash.ok{background:#dcfce7;color:#14532d}
.fp-flash.err{background:#fee2e2;color:#7f1d1d}