/* Trang "Khám phá" (#/kham-pha): hai chế độ nền sáng/tối, đổi bằng nút
   .ex-theme (lưu localStorage "vcbg.explore.theme", xem initExploreTheme()
   trong app.js). Mọi màu đi qua token trên .ex-scope nên hai chế độ chỉ
   khác nhau ở khối token; nền sáng dùng cùng bảng màu giấy kem + mực nâu
   + cyan đậm mà trang truyện / nhật ký bình luận đang dùng. Header và
   footer đổi theo qua #app[data-theme="light"] (story-page-signal-v1.css). */
.ex-scope{
  --ex-bg:transparent;
  --ex-ink:#eef2f8;
  --ex-muted:#93a0b6;
  --ex-accent:#26c2dc;
  --ex-field:rgba(255,255,255,.06);
  --ex-field-line:rgba(255,255,255,.14);
  --ex-field-on:rgba(38,194,220,.14);
  --ex-field-on-line:rgba(38,194,220,.55);
  --ex-go-bg:#26c2dc;
  --ex-go-ink:#04161b;
  --ex-cover-ring:rgba(255,255,255,.08);
  --ex-cover-shadow:0 2px 6px rgba(0,0,0,.45),0 14px 30px -12px rgba(0,0,0,.85);
  --ex-cover-shadow-hover:0 4px 10px rgba(0,0,0,.5),0 22px 40px -14px rgba(0,0,0,.9),0 0 0 1px rgba(38,194,220,.35);
  --ex-chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2393a0b6' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  /* status tags sit on top of cover art, so they keep a solid fill */
  --ex-st-ongoing-bg:#26c2dc;   --ex-st-ongoing-ink:#04161b;
  --ex-st-completed-bg:#0f1622; --ex-st-completed-ink:#e9f9fc;
  --ex-st-upcoming-bg:#f2c46d;  --ex-st-upcoming-ink:#2a1d05;
  color-scheme:dark;
  display:block;color:var(--ex-ink);background:var(--ex-bg);
  font-family:"Plus Jakarta Sans","Be Vietnam Pro",system-ui,sans-serif;
}
.ex-scope[data-theme="light"]{
  --ex-bg:#f7f4ee;
  --ex-ink:#221d16;
  --ex-muted:#6b655c;
  --ex-accent:#0f90a8;
  --ex-field:#fffdf9;
  --ex-field-line:rgba(34,29,22,.16);
  --ex-field-on:rgba(15,144,168,.1);
  --ex-field-on-line:rgba(15,144,168,.6);
  --ex-go-bg:#221d16;
  --ex-go-ink:#f7f4ee;
  --ex-cover-ring:rgba(34,29,22,.08);
  --ex-cover-shadow:0 1px 2px rgba(34,29,22,.12),0 6px 14px -4px rgba(34,29,22,.22),0 20px 34px -14px rgba(34,29,22,.42);
  --ex-cover-shadow-hover:0 2px 4px rgba(34,29,22,.14),0 12px 22px -6px rgba(34,29,22,.28),0 30px 46px -18px rgba(34,29,22,.5);
  --ex-chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b655c' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  --ex-st-ongoing-bg:#0f90a8;   --ex-st-ongoing-ink:#ffffff;
  --ex-st-completed-bg:#221d16; --ex-st-completed-ink:#f7f4ee;
  --ex-st-upcoming-bg:#b9771a;  --ex-st-upcoming-ink:#ffffff;
  color-scheme:light;
}
.ex-wrap{padding:1.4rem 1rem 2.6rem}

/* ---- head ---- */
.ex-head{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;margin-bottom:1.15rem}
.ex-kicker{display:inline-flex;align-items:center;gap:.5rem;color:var(--ex-accent);
  font:700 .7rem/1 "JetBrains Mono",monospace;letter-spacing:.16em}
.ex-kicker i{width:7px;height:7px;border-radius:50%;background:var(--ex-accent);
  box-shadow:0 0 .55rem var(--ex-accent)}
.ex-title{margin:.5rem 0 .3rem;color:var(--ex-ink);
  font:800 clamp(1.9rem,7vw,2.6rem)/1.05 "Plus Jakarta Sans",system-ui,sans-serif;letter-spacing:-.01em}
.ex-count{margin:0;color:var(--ex-muted);font-size:.86rem}
.ex-count b{color:var(--ex-ink);font-weight:700;font-variant-numeric:tabular-nums}

.ex-theme{flex-shrink:0;display:inline-flex;align-items:center;gap:.4rem;margin-top:.1rem;
  padding:.5rem .8rem .5rem .62rem;border-radius:999px;cursor:pointer;
  border:1px solid var(--ex-field-line);background:var(--ex-field);color:var(--ex-ink);
  font:600 .78rem/1 "Plus Jakarta Sans",system-ui,sans-serif;
  -webkit-tap-highlight-color:transparent;transition:border-color .2s,background .2s,transform .15s}
.ex-theme:hover{border-color:var(--ex-field-on-line)}
.ex-theme:active{transform:scale(.96)}
.ex-theme svg{width:17px;height:17px;fill:none;stroke:var(--ex-accent);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ex-theme .ex-ico-moon{fill:var(--ex-accent);stroke:none}

/* ---- search: one calm, roomy field under the title ---- */
.ex-find{display:flex;align-items:center;gap:.7rem;margin:.2rem 0 1.8rem;padding:.4rem .4rem .4rem 1.15rem;border-radius:999px;
  border:1px solid var(--ex-field-line);background:var(--ex-field);
  box-shadow:0 10px 30px -18px rgba(0,0,0,.6);transition:border-color .2s,box-shadow .2s}
.ex-scope[data-theme="light"] .ex-find{background:#fff;box-shadow:0 12px 28px -20px rgba(34,29,22,.45)}
.ex-find:focus-within{border-color:var(--ex-field-on-line);box-shadow:0 0 0 4px var(--ex-field-on),0 10px 30px -18px rgba(0,0,0,.6)}
.ex-find > svg{flex-shrink:0;width:20px;height:20px;fill:none;stroke:var(--ex-accent);stroke-width:2.2;stroke-linecap:round}
.ex-find input{flex:1;min-width:0;border:0;outline:0;background:transparent;color:var(--ex-ink);-webkit-text-fill-color:var(--ex-ink);
  font:500 1rem/1.2 "Plus Jakarta Sans",system-ui,sans-serif;padding:.75rem 0}
.ex-find input::placeholder{color:var(--ex-muted);-webkit-text-fill-color:var(--ex-muted);opacity:1}
.ex-find input::-webkit-search-cancel-button{display:none}
.ex-go{flex-shrink:0;display:grid;place-items:center;width:2.75rem;height:2.75rem;border:0;border-radius:50%;cursor:pointer;
  background:var(--ex-accent);color:#04161b;transition:transform .15s}
.ex-scope[data-theme="light"] .ex-go{color:#fff}
.ex-go:active{transform:scale(.94)}
.ex-go svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.ex-active{display:flex;flex-wrap:wrap;align-items:center;gap:.3rem .6rem;margin:-1rem 0 1.6rem;color:var(--ex-muted);font-size:.84rem}
.ex-active b{color:var(--ex-ink)}
.ex-active a{color:var(--ex-accent);font-weight:700;text-decoration:none}

/* status groups */
.ex-group + .ex-group{margin-top:2rem}
.ex-group-h{display:flex;align-items:center;gap:.55rem;margin:0 0 1rem;color:var(--ex-ink);font:800 1.1rem/1.2 "Plus Jakarta Sans",system-ui,sans-serif}
.ex-group-h::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--ex-st-ongoing-bg);box-shadow:0 0 .6rem var(--ex-st-ongoing-bg)}
.ex-group-upcoming::before{background:var(--ex-st-upcoming-bg);box-shadow:0 0 .6rem var(--ex-st-upcoming-bg)}
.ex-group-completed::before{background:var(--ex-muted);box-shadow:none}
.ex-group-h span{padding:.18rem .5rem;border-radius:999px;background:var(--ex-field-on);color:var(--ex-accent);font-size:.75rem}
.ex-group-h::after{content:"";flex:1;height:1px;background:var(--ex-field-line)}
.ex-empty a{color:var(--ex-accent);font-weight:700}

/* ---- grid ---- */
.ex-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.6rem 1rem}
@media (min-width:640px){.ex-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:2rem 1.3rem}}
.ex-card{display:flex;flex-direction:column;gap:.7rem;color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}
.ex-cover{position:relative;display:block;aspect-ratio:2/3;border-radius:12px;overflow:hidden;
  box-shadow:var(--ex-cover-shadow);transition:transform .25s ease,box-shadow .25s ease}
.ex-cover::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 0 0 1px var(--ex-cover-ring)}
.ex-cover .cover-frame{position:absolute;inset:0;margin:0;border-radius:0;aspect-ratio:auto}
.ex-cover img{width:100%;height:100%;object-fit:cover;display:block}
@media (hover:hover){
  .ex-card:hover .ex-cover{transform:translateY(-4px);box-shadow:var(--ex-cover-shadow-hover)}
  .ex-card:hover h3{color:var(--ex-accent)}
}
.ex-card:active .ex-cover{transform:scale(.98)}
.ex-status{position:absolute;left:.5rem;top:.5rem;padding:.3rem .55rem;border-radius:999px;
  font:700 .64rem/1 "Plus Jakarta Sans",system-ui,sans-serif;letter-spacing:.02em;
  box-shadow:0 2px 8px rgba(0,0,0,.25)}
.ex-status--ongoing{background:var(--ex-st-ongoing-bg);color:var(--ex-st-ongoing-ink)}
.ex-status--completed{background:var(--ex-st-completed-bg);color:var(--ex-st-completed-ink)}
.ex-status--upcoming{background:var(--ex-st-upcoming-bg);color:var(--ex-st-upcoming-ink)}
.ex-meta{display:grid;gap:.2rem;padding:0 .1rem}
.ex-meta h3{margin:0;color:var(--ex-ink);font:700 1rem/1.3 "Plus Jakarta Sans",system-ui,sans-serif;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;transition:color .2s}
.ex-by{color:var(--ex-muted);font-size:.84rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ex-empty{padding:3rem 1rem;text-align:center;color:var(--ex-muted);
  border:1px dashed var(--ex-field-line);border-radius:16px}