/* styles.css — CompFinder. Light, friendly, pastel-gradient look inspired by
   contester.life: big pill search, colorful category chips, rounded white card
   grid, dark footer. */

:root{
  --ink:#1a1626; --muted:#6b6780; --line:#ece9f2; --bg:#ffffff; --soft:#f7f6fb;
  --accent:#1a1626;
  --good:#0f9d77; --warn:#c2740a; --danger:#e0455e;
  /* category colors (chip outline + card cover) */
  --c-ai:#5b6cff; --c-cyber:#e0455e; --c-code:#8b5cf6; --c-sci:#0f9d77;
  --c-biz:#c2740a; --c-all:#6b6780;
  --radius:18px; --radius-sm:12px;
  --shadow:0 6px 24px rgba(40,30,80,.07);
  --shadow-hi:0 10px 32px rgba(40,30,80,.12);
}

*{ box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent; }
html,body{ background:var(--bg); }
body{
  font-family:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  color:var(--ink); line-height:1.5;
  max-width:1080px; margin:0 auto; padding:0 20px 0;
  overflow-x:hidden;
}

a{ color:inherit; }

/* ---------- top nav ---------- */
.nav{ display:flex; align-items:center; justify-content:space-between; padding:18px 2px 8px; }
.brand{ display:flex; align-items:center; gap:9px; text-decoration:none; }
.wordmark{ font-weight:800; font-size:1.18rem; letter-spacing:-.02em; }
.spark{ display:inline-flex; width:26px; height:26px; }
.spark svg{ width:100%; height:100%; fill:url(#g); }
/* gradient fill for the sparkle via CSS (svg uses fill, so paint with filter trick) */
.spark svg path{ fill:none; stroke:none; }
.spark{ background:linear-gradient(135deg,#5b6cff,#e0455e 45%,#f0a23c 75%,#8b5cf6);
        -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l2.2 6.4L21 12l-6.8 3.6L12 22l-2.2-6.4L3 12l6.8-3.6z'/%3E%3C/svg%3E") center/contain no-repeat;
        mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l2.2 6.4L21 12l-6.8 3.6L12 22l-2.2-6.4L3 12l6.8-3.6z'/%3E%3C/svg%3E") center/contain no-repeat; }
.spark.sm{ width:22px; height:22px; flex:0 0 auto; }
.navlinks{ display:flex; gap:20px; font-size:.9rem; font-weight:600; color:var(--muted); }
.navlinks a{ text-decoration:none; }
.navlinks a:hover{ color:var(--ink); }

/* ---------- hero ---------- */
.hero{ position:relative; text-align:center; padding:40px 10px 26px; }
.glow{ position:absolute; top:-160px; left:50%; transform:translateX(-50%);
       width:900px; max-width:140vw; height:520px; z-index:-1; filter:blur(60px); opacity:.55;
       background:
         radial-gradient(closed,#fff),
         conic-gradient(from 120deg at 50% 40%, #bcd0ff, #ffd2e6, #ffe3c2, #e6d6ff, #c9f3e4, #bcd0ff); }
.tagline{ font-size:.72rem; font-weight:800; letter-spacing:.18em; text-transform:uppercase;
          color:var(--c-ai); margin-bottom:14px; }
.headline{ font-size:clamp(1.9rem,5vw,3.1rem); font-weight:800; letter-spacing:-.03em; line-height:1.08; }
.headline u{ text-decoration-thickness:3px; text-underline-offset:5px; text-decoration-color:var(--c-cyber); }
.sub{ color:var(--muted); font-size:1.02rem; margin:14px auto 26px; max-width:560px; }

.searchbar{ display:flex; align-items:center; gap:8px; background:var(--bg);
            border:1px solid var(--line); border-radius:999px; box-shadow:var(--shadow);
            padding:7px 7px 7px 18px; max-width:640px; margin:0 auto; }
.searchbar:focus-within{ box-shadow:var(--shadow-hi); border-color:#d9d4ea; }
.searchbar input{ flex:1; min-width:0; border:none; outline:none; background:transparent;
                  font-family:inherit; font-size:1rem; color:var(--ink); padding:8px 0; }
.searchbar input::placeholder{ color:#a7a2b8; }
.searchbtn{ flex:0 0 auto; border:none; cursor:pointer; font-family:inherit; font-weight:700;
            font-size:.95rem; color:#fff; background:var(--accent); border-radius:999px; padding:11px 22px; }
.searchbtn:active{ transform:scale(.97); }
.searchbtn:disabled{ opacity:.5; cursor:default; }

/* ---------- category chips ---------- */
.chips{ display:flex; flex-wrap:wrap; gap:9px; justify-content:center; margin:26px auto 6px; max-width:780px; }
.chip{ font-family:inherit; font-size:.85rem; font-weight:600; cursor:pointer;
       background:var(--bg); color:var(--muted); border:1.5px solid var(--line);
       border-radius:999px; padding:8px 15px; transition:.15s; }
.chip:hover{ border-color:#d9d4ea; color:var(--ink); }
.chip[data-c="ai"].on{ color:var(--c-ai); border-color:var(--c-ai); background:#5b6cff12; }
.chip[data-c="cyber"].on{ color:var(--c-cyber); border-color:var(--c-cyber); background:#e0455e12; }
.chip[data-c="code"].on{ color:var(--c-code); border-color:var(--c-code); background:#8b5cf612; }
.chip[data-c="sci"].on{ color:var(--c-sci); border-color:var(--c-sci); background:#0f9d7712; }
.chip[data-c="biz"].on{ color:var(--c-biz); border-color:var(--c-biz); background:#c2740a12; }
.chip[data-c="all"].on{ color:#fff; border-color:var(--accent); background:var(--accent); }

/* ---------- filter row ---------- */
.filters{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:center;
          margin:18px auto 8px; }
.ctl{ font-family:inherit; font-size:.9rem; color:var(--ink); background:var(--bg);
      border:1.5px solid var(--line); border-radius:999px; padding:9px 15px; outline:none; cursor:pointer; }
.ctl:focus{ border-color:#d9d4ea; }
input.ctl{ cursor:text; min-width:160px; }
.sortwrap{ display:flex; align-items:center; gap:7px; margin-left:auto; }
.sortlbl{ font-size:.78rem; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.08em; }

/* ---------- status ---------- */
.status{ text-align:center; font-size:.95rem; color:var(--muted); padding:40px 16px; font-weight:600; }
.status.err{ color:var(--danger); }
.hide{ display:none; }

/* ---------- results grid ---------- */
.grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin:18px 0 50px; }
@media (max-width:680px){ .grid{ grid-template-columns:1fr; } }

.notice{ grid-column:1/-1; font-size:.85rem; color:var(--warn); background:#c2740a10;
         border:1px solid #c2740a40; border-radius:var(--radius-sm); padding:11px 14px; font-weight:600; }

.card{ position:relative; background:var(--bg); border:1px solid var(--line); border-radius:var(--radius);
       box-shadow:var(--shadow); overflow:hidden; display:flex; flex-direction:column; transition:.18s; }
.card:hover{ box-shadow:var(--shadow-hi); transform:translateY(-2px); }

/* colored cover; a real poster thumbnail layers on top when we have one
   (broken/missing image → onerror removes it → gradient shows, same as before) */
.cover{ height:96px; display:flex; align-items:center; justify-content:center; position:relative;
        font-weight:800; font-size:1.7rem; color:#fff; letter-spacing:-.02em; overflow:hidden; }
.cover .poster{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.cover .cat{ z-index:1; }
.cover .cat{ position:absolute; left:12px; bottom:10px; font-size:.66rem; font-weight:700;
             letter-spacing:.04em; background:rgba(255,255,255,.92); color:var(--ink);
             padding:4px 9px; border-radius:999px; }
.cover .acts{ position:absolute; right:10px; top:10px; display:flex; gap:6px; }
.iconbtn{ width:30px; height:30px; border:none; cursor:pointer; border-radius:50%;
          background:rgba(255,255,255,.92); color:var(--ink); display:flex; align-items:center; justify-content:center; }
.iconbtn:hover{ background:#fff; }
.iconbtn svg{ width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2; }
.iconbtn.on{ background:var(--accent); color:#fff; }

.cv-ai{ background:linear-gradient(135deg,#5b6cff,#8aa0ff); }
.cv-cyber{ background:linear-gradient(135deg,#e0455e,#ff7d92); }
.cv-code{ background:linear-gradient(135deg,#8b5cf6,#b794ff); }
.cv-sci{ background:linear-gradient(135deg,#0f9d77,#4fd3ac); }
.cv-biz{ background:linear-gradient(135deg,#e8932a,#ffc06b); }
.cv-all{ background:linear-gradient(135deg,#6b6780,#a39fb5); }

.body{ padding:14px 16px 16px; display:flex; flex-direction:column; flex:1; }
.card h3{ font-size:1.05rem; font-weight:800; letter-spacing:-.01em; line-height:1.22; margin-bottom:7px; }
.flag{ font-size:.76rem; color:var(--warn); font-weight:700; margin-bottom:7px; }
.desc{ font-size:.86rem; color:var(--muted); line-height:1.45; margin-bottom:12px;
       display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

.statusrow{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:11px; }
.pill{ font-size:.68rem; font-weight:700; padding:3px 9px; border-radius:999px; background:var(--soft); color:var(--muted); }
.pill.open{ color:var(--good); background:#0f9d7714; }
.pill.closed{ color:var(--danger); background:#e0455e14; }
.pill.verify{ color:var(--warn); background:#c2740a14; }
.pill.vetted{ color:var(--c-ai); background:#5b6cff14; }

.meta{ margin-top:auto; display:grid; grid-template-columns:1fr 1fr; gap:8px 10px;
       border-top:1px solid var(--line); padding-top:12px; }
.meta .k{ font-size:.64rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:#a7a2b8; }
.meta .v{ font-size:.82rem; font-weight:700; color:var(--ink); }
.meta .v.time{ color:var(--c-cyber); }

.openbtn{ display:block; text-align:center; text-decoration:none; margin-top:13px;
          background:var(--accent); color:#fff; font-weight:700; font-size:.9rem;
          padding:11px; border-radius:999px; }
.openbtn:active{ transform:scale(.98); }

/* ---------- footer ---------- */
.foot{ background:#16121f; color:#cfcad9; border-radius:22px 22px 0 0; margin:0 -20px;
       padding:34px 28px 40px; display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
@media (max-width:680px){ .foot{ grid-template-columns:1fr; gap:18px; } }
.foott{ font-weight:800; color:#fff; margin-bottom:9px; font-size:.95rem; }
.footcol p{ font-size:.82rem; color:#9a93ad; line-height:1.5; }
.footcol a{ display:block; font-size:.85rem; color:#cfcad9; text-decoration:none; margin-bottom:5px; }
.footcol a:hover{ color:#fff; }

@media (prefers-reduced-motion:no-preference){
  .card{ animation:rise .22s ease both; }
  @keyframes rise{ from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:none;} }
}

/* ===== v2 filter engine ===== */
.chip.on[data-c="all"]{ color:#fff; border-color:var(--accent); background:var(--accent); }

.quickbar{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin:14px auto 4px; max-width:820px; }
.qt{ font-family:inherit; font-size:.82rem; font-weight:600; cursor:pointer; color:var(--muted);
     background:var(--bg); border:1.5px solid var(--line); border-radius:999px; padding:7px 13px; }
.qt:hover{ border-color:#d9d4ea; color:var(--ink); }
.qt.on{ color:#fff; background:var(--accent); border-color:var(--accent); }
.qt.morebtn{ color:var(--c-ai); border-color:var(--c-ai); }
.qt.profilebtn.on{ background:var(--c-ai); border-color:var(--c-ai); }

.more{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; align-items:end; margin:12px auto; max-width:820px;
       padding:14px; border:1px solid var(--line); border-radius:var(--radius); background:var(--soft); }
.more label{ display:flex; flex-direction:column; gap:5px; font-size:.7rem; font-weight:700; color:var(--muted);
             text-transform:uppercase; letter-spacing:.06em; }
.more .ctl{ min-width:150px; }

.resultbar{ display:flex; align-items:center; justify-content:space-between; gap:12px; max-width:1080px; margin:20px auto 6px; }
.count{ font-size:1.05rem; font-weight:800; }
.updated{ font-size:.78rem; color:var(--muted); margin-left:8px; font-weight:600; }
.rsort{ display:flex; align-items:center; gap:7px; font-size:.72rem; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; }

.activechips{ display:flex; flex-wrap:wrap; gap:7px; margin:4px auto 0; max-width:1080px; }
.achip{ font-family:inherit; font-size:.76rem; font-weight:600; cursor:pointer; color:var(--ink);
        background:var(--soft); border:1px solid var(--line); border-radius:999px; padding:5px 11px; }
.achip span{ color:var(--muted); margin-left:3px; }
.achip:hover{ border-color:var(--danger); color:var(--danger); }
.achip.clear{ color:var(--danger); border-color:transparent; background:transparent; text-decoration:underline; }

.pill.trust{ color:var(--good); background:#0f9d7714; }
.pill.ai{ color:var(--warn); background:#c2740a14; }
.verifynote{ font-size:.72rem; color:var(--warn); margin-top:9px; }

.loadmore-wrap{ text-align:center; margin:6px 0 50px; }
.loadmore{ font-family:inherit; font-weight:700; font-size:.92rem; cursor:pointer; color:var(--ink);
           background:var(--bg); border:1.5px solid var(--line); border-radius:999px; padding:11px 28px; }
.loadmore:hover{ border-color:var(--accent); }

.empty{ grid-column:1/-1; text-align:center; padding:48px 16px; color:var(--muted); }
.empty .emoji{ font-size:2.4rem; }
.empty h3{ font-size:1.2rem; font-weight:800; color:var(--ink); margin:10px 0 6px; }
.btn{ font-family:inherit; font-weight:700; cursor:pointer; color:#fff; background:var(--accent);
      border:none; border-radius:999px; padding:11px 22px; margin-top:14px; }
.btn.ghost{ background:transparent; color:var(--ink); border:1.5px solid var(--line); }

.dlg{ border:none; border-radius:var(--radius); padding:0; box-shadow:var(--shadow-hi); max-width:380px; width:92%; }
.dlg::backdrop{ background:rgba(20,15,30,.4); }
.dlgform{ padding:22px; display:flex; flex-direction:column; gap:12px; }
.dlgform h3{ font-size:1.2rem; font-weight:800; }
.dlgsub{ font-size:.82rem; color:var(--muted); }
.dlgform label{ display:flex; flex-direction:column; gap:5px; font-size:.78rem; font-weight:700; color:var(--muted); }
.dlgform input, .dlgform select, .dlgform textarea{ font-family:inherit; font-size:.95rem; padding:9px 11px; border:1.5px solid var(--line); border-radius:10px; resize:vertical; }
.dlgbtns{ display:flex; gap:10px; justify-content:flex-end; margin-top:6px; }
.foot a{ color:#cfcad9; }

/* ===== detail page ===== */
.titlelink{ color:inherit; text-decoration:none; }
.titlelink:hover{ text-decoration:underline; }
.detail{ max-width:680px; margin:24px auto 60px; padding:0 4px; }
.back{ display:inline-block; font-size:.85rem; font-weight:700; color:var(--muted); text-decoration:none; margin-bottom:18px; }
.back:hover{ color:var(--ink); }
.dcover{ height:120px; border-radius:var(--radius); display:flex; align-items:center; justify-content:center;
         font-size:2.2rem; font-weight:800; color:#fff; position:relative; margin-bottom:18px; overflow:hidden; }
.dcover .poster{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.dcover .cat{ z-index:1; }
.imgcredit{ font-size:.68rem; color:var(--muted); margin:-12px 0 12px; }
.dcover .cat{ position:absolute; left:14px; bottom:12px; font-size:.7rem; font-weight:700; background:rgba(255,255,255,.92);
              color:var(--ink); padding:5px 11px; border-radius:999px; }
.detail h1{ font-size:1.9rem; font-weight:800; letter-spacing:-.02em; line-height:1.15; margin-bottom:12px; }
.detail .dsum{ font-size:1rem; color:var(--ink); margin:14px 0; line-height:1.6; }
.detail .flag{ color:var(--warn); font-weight:700; font-size:.88rem; margin:8px 0; }
.facts{ display:grid; grid-template-columns:1fr 1fr; gap:14px 18px; margin:20px 0 24px;
        border-top:1px solid var(--line); padding-top:20px; }
@media (max-width:560px){ .facts{ grid-template-columns:1fr; } }
.facts dt{ font-size:.64rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#a7a2b8; }
.facts dd{ font-size:.95rem; font-weight:600; color:var(--ink); margin-top:3px; }
.detail .openbtn{ max-width:320px; }
.rel{ font-size:.7rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin:32px 0 10px; }
.rellist{ list-style:none; display:flex; flex-direction:column; gap:8px; }
.rellist li{ display:flex; justify-content:space-between; gap:12px; border:1px solid var(--line); border-radius:10px; padding:11px 14px; }
.rellist a{ font-weight:700; color:var(--ink); text-decoration:none; }
.rellist a:hover{ color:var(--c-ai); }
.rellist span{ font-size:.8rem; color:var(--muted); }