/* BioCE webapps hub — light + dark, three layouts (grid / carousel / list).
   Theme resolution order:
     1. :root[data-theme="light"|"dark"]  -> the visitor's explicit choice (localStorage)
     2. @media (prefers-color-scheme:dark) guarded by :not([data-theme="light"]) -> OS default
     3. bare :root -> light
   Every colour has its definition on bare :root, so nothing depends on a media query firing. */

:root{
  --bg:#eef2f6; --surface:#ffffff; --surface-2:#f1f5f8; --ink:#10202b; --muted:#5b6b78;
  --line:#e2e8ef; --accent:#0e7c86; --accent-2:#13a4b0; --accent-soft:#e2f3f4;
  --hero-p:#33454f; --pill-ink:#54636e; --placeholder:#93a2ad;
  --top-bg:rgba(255,255,255,.84); --foot-bg:rgba(255,255,255,.5);
  --live-ink:#0a6b4f; --live-bg:#dbf3e7;
  --ex-ink:#7e8c97; --ex-bg:#eef2f5; --ex-rail:#c2ccd4;
  --mark-bg:#fde9a8; --mark-ink:#10202b;
  --glow-1:#dff0f1; --glow-2:#e8eef6;
  --shadow:0 1px 2px rgba(16,32,43,.06),0 10px 30px rgba(16,32,43,.08);
  --shadow-hover:0 10px 30px rgba(14,124,134,.18);
  --radius:16px;
  --font:'Google Sans','Product Sans',Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  color-scheme:light;
}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0d1620; --surface:#152230; --surface-2:#1c2b3a; --ink:#e8eef4; --muted:#93a7b8;
    --line:#233445; --accent:#37b3bd; --accent-2:#5fd0d8; --accent-soft:#123039;
    --hero-p:#b9c9d6; --pill-ink:#a8bccb; --placeholder:#6d8296;
    --top-bg:rgba(21,34,48,.86); --foot-bg:rgba(21,34,48,.5);
    --live-ink:#7ee0b4; --live-bg:#123a2c;
    --ex-ink:#8fa3b4; --ex-bg:#1c2b3a; --ex-rail:#3a4d61;
    --mark-bg:#6b5a12; --mark-ink:#ffeaa0;
    --glow-1:#12333a; --glow-2:#131f2c;
    --shadow:0 1px 2px rgba(0,0,0,.35),0 10px 30px rgba(0,0,0,.38);
    --shadow-hover:0 10px 30px rgba(55,179,189,.22);
    color-scheme:dark;
  }
}

:root[data-theme="dark"]{
  --bg:#0d1620; --surface:#152230; --surface-2:#1c2b3a; --ink:#e8eef4; --muted:#93a7b8;
  --line:#233445; --accent:#37b3bd; --accent-2:#5fd0d8; --accent-soft:#123039;
  --hero-p:#b9c9d6; --pill-ink:#a8bccb; --placeholder:#6d8296;
  --top-bg:rgba(21,34,48,.86); --foot-bg:rgba(21,34,48,.5);
  --live-ink:#7ee0b4; --live-bg:#123a2c;
  --ex-ink:#8fa3b4; --ex-bg:#1c2b3a; --ex-rail:#3a4d61;
  --mark-bg:#6b5a12; --mark-ink:#ffeaa0;
  --glow-1:#12333a; --glow-2:#131f2c;
  --shadow:0 1px 2px rgba(0,0,0,.35),0 10px 30px rgba(0,0,0,.38);
  --shadow-hover:0 10px 30px rgba(55,179,189,.22);
  color-scheme:dark;
}

*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0}
body{
  font-family:var(--font);color:var(--ink);line-height:1.5;-webkit-font-smoothing:antialiased;
  background:
    radial-gradient(1100px 460px at 82% -12%, var(--glow-1) 0%, transparent 60%),
    radial-gradient(900px 380px at -5% 8%, var(--glow-2) 0%, transparent 55%),
    var(--bg);
  min-height:100vh;
  transition:background-color .18s ease,color .18s ease;
}
.wrap{max-width:1120px;margin:0 auto;padding:0 22px}
.muted{color:var(--muted)}
mark{background:var(--mark-bg);color:var(--mark-ink);border-radius:3px;padding:0 1px}

/* ---------- top bar ---------- */
.hub-top{position:sticky;top:0;z-index:10;background:var(--top-bg);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.top-inner{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px 22px}
.brand{display:flex;align-items:center;gap:9px;text-decoration:none;color:inherit}
.brand-dot{width:13px;height:13px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent-2));box-shadow:0 0 0 4px var(--accent-soft)}
.brand-name{font-weight:800;font-size:16px;letter-spacing:.3px}
.brand-div{color:var(--line)}
.brand-sub{font-weight:600;font-size:14px;color:var(--accent)}
.top-right{display:flex;align-items:center;gap:10px}
.domain-pill{font-size:12.5px;color:var(--muted);background:var(--surface);border:1px solid var(--line);padding:6px 13px;border-radius:999px;box-shadow:var(--shadow);font-weight:600;white-space:nowrap}

/* ---------- segmented text controls (theme + layout) ----------
   Text labels on purpose: no sun/moon glyphs, no icon guessing. */
.seg{display:inline-flex;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:3px;box-shadow:var(--shadow)}
.seg-btn{
  font-family:inherit;font-size:12.5px;font-weight:700;letter-spacing:.2px;
  color:var(--muted);background:transparent;border:0;border-radius:999px;
  padding:6px 13px;cursor:pointer;transition:.14s;white-space:nowrap;
}
.seg-btn:hover{color:var(--ink)}
.seg-btn[aria-pressed="true"]{background:var(--accent);color:#fff}
:root[data-theme="dark"] .seg-btn[aria-pressed="true"]{color:#07161c}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .seg-btn[aria-pressed="true"]{color:#07161c}
}

/* ---------- hero ---------- */
.hero{padding:54px 0 18px;text-align:center}
.hero-h{font-size:38px;font-weight:800;letter-spacing:-.8px;margin:0 0 12px}
.hero-p{font-size:16px;color:var(--hero-p);max-width:64ch;margin:0 auto 26px}

.search-bar{position:relative;max-width:620px;margin:0 auto;display:flex;align-items:center}
.search-ic{position:absolute;left:18px;font-size:16px;opacity:.7;pointer-events:none}
#search{width:100%;font-family:inherit;font-size:16px;color:var(--ink);background:var(--surface);
  border:1px solid var(--line);border-radius:14px;padding:15px 48px;box-shadow:var(--shadow);transition:.15s}
#search::placeholder{color:var(--placeholder)}
#search:focus{outline:none;border-color:var(--accent-2);box-shadow:0 0 0 4px var(--accent-soft),var(--shadow)}
.search-kbd{position:absolute;right:16px;font-size:12px;color:var(--muted);background:var(--surface-2);border:1px solid var(--line);
  border-bottom-width:2px;border-radius:7px;padding:2px 8px;font-family:inherit;font-weight:700}

.filter-row{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:16px}
.chip-btn{font-family:inherit;font-size:13px;font-weight:600;color:var(--muted);background:var(--surface);
  border:1px solid var(--line);border-radius:999px;padding:7px 14px;cursor:pointer;transition:.13s}
.chip-btn:hover{border-color:var(--accent-2);color:var(--ink)}
.chip-btn.active{background:var(--accent);border-color:var(--accent);color:#fff}
:root[data-theme="dark"] .chip-btn.active{color:#07161c}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .chip-btn.active{color:#07161c}
}

/* ---------- results head ---------- */
.results{margin-top:8px}
.results-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;min-height:22px;margin-bottom:12px;font-size:13px}
.count{color:var(--muted);font-weight:600}

/* ---------- the three layouts ----------
   One card markup, three container classes. The card itself never changes shape
   in JS - only .app-view's class does. */
.view-shell{position:relative}
.app-view{display:grid;gap:18px}
.app-view.view-grid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.app-view.view-list{grid-template-columns:1fr;gap:10px}

.app-view.view-carousel{
  display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:4px 2px 16px;scrollbar-width:thin;
}
.app-view.view-carousel .app-card{flex:0 0 320px;scroll-snap-align:start}
.app-view.view-carousel::-webkit-scrollbar{height:8px}
.app-view.view-carousel::-webkit-scrollbar-thumb{background:var(--line);border-radius:999px}

/* carousel arrows - only rendered visible in carousel mode by JS */
.car-nav{
  position:absolute;top:calc(50% - 26px);z-index:4;width:38px;height:38px;border-radius:50%;
  border:1px solid var(--line);background:var(--surface);color:var(--ink);
  font-size:22px;line-height:1;cursor:pointer;box-shadow:var(--shadow);transition:.14s;
  display:none;align-items:center;justify-content:center;
}
.view-shell.is-carousel .car-nav{display:flex}
.car-nav.prev{left:-8px}
.car-nav.next{right:-8px}
.car-nav:hover{border-color:var(--accent-2);color:var(--accent)}
.car-nav:disabled{opacity:.32;cursor:default}
.car-hint{font-size:12px;color:var(--muted);text-align:center;margin:-4px 0 8px}

/* ---------- card ---------- */
.app-card{position:relative;display:flex;flex-direction:column;gap:9px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow);padding:20px;text-decoration:none;color:inherit;transition:.16s;overflow:hidden}
.app-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--card-accent,var(--accent))}
.app-card.live{cursor:pointer}
.app-card.live:hover{transform:translateY(-4px);border-color:var(--accent-2);box-shadow:var(--shadow-hover)}
.app-card.example{opacity:.78;cursor:default}
.app-card.example::before{background:var(--ex-rail)}

.ac-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.ac-ic{font-size:28px;line-height:1}
.ac-status{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;padding:4px 10px;border-radius:999px;white-space:nowrap}
.ac-status.live{color:var(--live-ink);background:var(--live-bg)}
.ac-status.example{color:var(--ex-ink);background:var(--ex-bg)}
.ac-cat{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--card-accent,var(--accent))}
.ac-name{font-size:17.5px;font-weight:800;letter-spacing:-.3px;line-height:1.25}
.ac-tag{font-size:13.5px;color:var(--muted);flex:1}
.ac-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
.ac-pill{font-size:11px;color:var(--pill-ink);background:var(--surface-2);border:1px solid var(--line);border-radius:999px;padding:2px 9px}
.ac-go{font-size:13.5px;font-weight:700;color:var(--card-accent,var(--accent));margin-top:6px}
.ac-go.soon{color:var(--ex-ink)}

/* list layout reflows the same card into a row */
.view-list .app-card{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;
  gap:8px 16px;padding:14px 18px 14px 22px;
}
.view-list .app-card:hover{transform:none}
.view-list .ac-top{grid-row:1/3;grid-column:1;display:block}
.view-list .ac-ic{font-size:24px}
.view-list .ac-cat{grid-column:2;grid-row:1;font-size:10.5px}
.view-list .ac-name{grid-column:2;grid-row:2;font-size:15.5px}
.view-list .ac-tag{grid-column:2;grid-row:3;font-size:12.5px;margin-top:2px}
.view-list .ac-tags{grid-column:2;grid-row:4}
.view-list .ac-status{grid-column:3;grid-row:1/3;justify-self:end}
.view-list .ac-go{grid-column:3;grid-row:3/5;justify-self:end;margin-top:0;white-space:nowrap}

/* ---------- examples section ---------- */
.examples{margin-top:40px;border-top:1px solid var(--line);padding-top:22px}
.ex-head{display:flex;align-items:center;gap:10px;width:100%;background:transparent;border:0;padding:0;cursor:pointer;font-family:inherit;color:inherit;text-align:left}
.ex-title{font-size:15px;font-weight:800;letter-spacing:-.2px}
.ex-sub{font-size:12.5px;color:var(--muted);font-weight:600}
.ex-chev{margin-left:auto;color:var(--muted);transition:transform .16s}
.ex-head[aria-expanded="true"] .ex-chev{transform:rotate(180deg)}
.ex-note{font-size:12.5px;color:var(--muted);max-width:78ch;margin:8px 0 14px}

/* ---------- misc ---------- */
.empty{text-align:center;padding:48px 0;color:var(--muted)}
.empty-ic{font-size:40px;margin-bottom:8px}
.btn{border:0;border-radius:10px;padding:10px 18px;font-family:inherit;font-weight:700;font-size:14px;cursor:pointer}
.btn.ghost{background:var(--surface);color:var(--accent);border:1px solid var(--line)}
.btn.ghost:hover{border-color:var(--accent-2)}

.hub-foot{margin-top:36px;border-top:1px solid var(--line);background:var(--foot-bg)}
.hub-foot .wrap{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding-top:18px;padding-bottom:26px;font-size:12.5px;color:var(--muted)}
.foot-meta{color:var(--placeholder)}

@media (max-width:560px){
  .hero{padding:34px 0 12px}
  .hero-h{font-size:28px}
  .app-view.view-grid{grid-template-columns:1fr}
  .app-view.view-carousel .app-card{flex-basis:82vw}
  .top-inner{flex-wrap:wrap;gap:10px}
  .view-list .app-card{grid-template-columns:auto 1fr;gap:6px 12px}
  .view-list .ac-status{grid-column:2;grid-row:5;justify-self:start;margin-top:4px}
  .view-list .ac-go{grid-column:2;grid-row:6;justify-self:start}
  .car-nav{display:none!important}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important;scroll-behavior:auto!important}
  .app-card.live:hover{transform:none}
}

:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:6px}