/* ==========================================================================
   BOCAK — Crypto Passive & Active Earning
   Dark theme, static site. No build step, no dependencies.
   ========================================================================== */

:root {
  /* surfaces */
  --bg: #07080c;
  --bg-2: #0c0e14;
  --card: #11141c;
  --card-2: #161a24;
  --line: #232837;
  --line-soft: #1a1e29;

  /* text */
  --fg: #e9edf5;
  --fg-2: #a3abbd;
  --fg-3: #6d7488;

  /* brand */
  --accent: #24e39a;
  --accent-dim: #12b981;
  --accent-glow: rgba(36, 227, 154, .18);
  --violet: #8b7bff;
  --amber: #ffb020;
  --red: #ff5f6d;
  --blue: #49a9ff;

  --radius: 16px;
  --radius-sm: 10px;
  --maxw: 1180px;

  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 12px 32px -12px rgba(0,0,0,.7);

  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: hidden; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ambient glow behind the hero */
body::before {
  content: "";
  position: fixed;
  top: -300px; left: 0; right: 0;
  height: 720px;
  background: radial-gradient(460px 300px at 50% 60%, rgba(36,227,154,.17), transparent 70%);
  pointer-events: none;
  z-index: 0;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
  position: relative;
  z-index: 1;
}

.hidden { display: none !important; }

/* ---------- Header ---------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(7,8,12,.78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line-soft);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 62px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  letter-spacing: -.02em;
  font-size: 19px;
}

.logo-mark {
  width: 30px; height: 30px;
  border-radius: 9px;
  background: linear-gradient(140deg, var(--accent), #12b981 55%, #0e8f7e);
  display: grid; place-items: center;
  color: #04140d;
  font-size: 15px; font-weight: 900;
  box-shadow: 0 0 0 1px rgba(36,227,154,.35), 0 6px 20px -6px var(--accent-glow);
}

.logo small {
  display: block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fg-3);
  line-height: 1;
  margin-top: 3px;
}

.nav {
  display: flex;
  gap: 4px;
  margin-left: 18px;
}

.nav a {
  padding: 7px 12px;
  border-radius: 8px;
  color: var(--fg-2);
  font-size: 14px;
  font-weight: 500;
  transition: color .15s, background .15s;
}
.nav a:hover { color: var(--fg); background: var(--card-2); }

.header-tools { margin-left: auto; display: flex; align-items: center; gap: 10px; }

/* language switch */
.lang-switch {
  display: inline-flex;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px;
}
.lang-switch button {
  border: 0;
  background: transparent;
  color: var(--fg-3);
  font: 600 12px/1 var(--font);
  letter-spacing: .06em;
  padding: 7px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: all .15s;
}
.lang-switch button[aria-pressed="true"] {
  background: var(--accent);
  color: #04140d;
}

.menu-btn {
  display: none;
  background: var(--card);
  border: 1px solid var(--line);
  color: var(--fg);
  width: 38px; height: 38px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 16px;
}

/* ---------- Hero ------------------------------------------------------ */

.hero { padding-top: 64px; padding-bottom: 40px; text-align: center; }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--card);
  border: 1px solid var(--line);
  color: var(--fg-2);
  font-size: 12.5px;
  font-weight: 500;
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 22px;
}
.pill .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

.hero h1 {
  font-size: clamp(32px, 6vw, 54px);
  line-height: 1.08;
  letter-spacing: -.035em;
  font-weight: 800;
  margin: 0 0 18px;
}
.hero h1 .grad {
  background: linear-gradient(100deg, var(--accent), #6ee7d0 40%, var(--violet));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero p {
  max-width: 620px;
  margin: 0 auto 28px;
  color: var(--fg-2);
  font-size: 16.5px;
}

.hero-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 11px;
  font-weight: 600;
  font-size: 14.5px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .12s, box-shadow .18s, background .18s, border-color .18s;
  font-family: var(--font);
}
.btn:active { transform: translateY(1px); }
.btn-primary {
  background: var(--accent);
  color: #04140d;
  box-shadow: 0 8px 26px -10px var(--accent-glow);
}
.btn-primary:hover { box-shadow: 0 10px 32px -8px rgba(36,227,154,.45); }
.btn-ghost {
  background: var(--card);
  border-color: var(--line);
  color: var(--fg);
}
.btn-ghost:hover { border-color: #31384b; background: var(--card-2); }

/* stats strip */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin: 46px 0 8px;
}
.stat {
  background: linear-gradient(180deg, var(--card), var(--bg-2));
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 18px 16px;
  text-align: center;
}
.stat b {
  display: block;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.stat span {
  font-size: 11.5px;
  color: var(--fg-3);
  text-transform: uppercase;
  letter-spacing: .09em;
  font-weight: 600;
}

/* ---------- Sections -------------------------------------------------- */

.section { padding-top: 56px; padding-bottom: 56px; scroll-margin-top: 70px; }

.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 26px;
  flex-wrap: wrap;
}
.section-head h2 {
  font-size: clamp(23px, 3.4vw, 31px);
  letter-spacing: -.03em;
  font-weight: 800;
  margin: 0 0 6px;
}
.section-head p { margin: 0; color: var(--fg-2); font-size: 14.5px; max-width: 560px; }

.eyebrow {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 8px;
}

/* ---------- Filters --------------------------------------------------- */

.toolbar {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 22px;
  padding: 14px;
  background: var(--card);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
}

.search {
  position: relative;
  flex: 1 1 220px;
  min-width: 180px;
}
.search input {
  width: 100%;
  background: var(--bg-2);
  border: 1px solid var(--line);
  color: var(--fg);
  border-radius: var(--radius-sm);
  padding: 10px 12px 10px 34px;
  font: 14px/1.4 var(--font);
  outline: none;
}
.search input:focus { border-color: #2f5f50; box-shadow: 0 0 0 3px rgba(36,227,154,.10); }
.search svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--fg-3); }

.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip {
  background: var(--bg-2);
  border: 1px solid var(--line);
  color: var(--fg-2);
  font: 600 13px/1 var(--font);
  padding: 9px 13px;
  border-radius: 999px;
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
}
.chip:hover { color: var(--fg); border-color: #313a4d; }
.chip[aria-pressed="true"] {
  background: rgba(36,227,154,.12);
  border-color: rgba(36,227,154,.45);
  color: var(--accent);
}

select.sort {
  background: var(--bg-2);
  border: 1px solid var(--line);
  color: var(--fg-2);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font: 500 13.5px/1 var(--font);
  cursor: pointer;
  outline: none;
}

/* ---------- Project grid ---------------------------------------------- */

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, var(--card), #0e1119);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 18px;
  transition: transform .18s ease, border-color .18s, box-shadow .25s;
  overflow: hidden;
}
.card::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: var(--radius);
  background: radial-gradient(600px 120px at 50% -10%, rgba(36,227,154,.10), transparent 70%);
  opacity: 0;
  transition: opacity .25s;
  pointer-events: none;
}
.card:hover { transform: translateY(-3px); border-color: #2b3245; box-shadow: var(--shadow); }
.card:hover::after { opacity: 1; }

.card.is-featured { border-color: rgba(36,227,154,.32); }

.card-top { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }

.card-logo {
  width: 44px; height: 44px;
  flex: 0 0 44px;
  border-radius: 12px;
  background: var(--card-2);
  border: 1px solid var(--line);
  display: grid; place-items: center;
  font-weight: 800; font-size: 16px;
  color: var(--fg);
  overflow: hidden;
}
.card-logo img { width: 100%; height: 100%; object-fit: cover; }

.card-title { min-width: 0; }
.card-title h3 {
  margin: 0;
  font-size: 16.5px;
  font-weight: 700;
  letter-spacing: -.015em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.card-cat { font-size: 12px; color: var(--fg-3); font-weight: 500; }

.card-desc {
  color: var(--fg-2);
  font-size: 13.8px;
  margin: 0 0 14px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 62px;
}

/* badges */
.badges { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.badge {
  font: 700 10.5px/1 var(--font);
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: 5px 9px;
  border-radius: 6px;
  border: 1px solid;
  white-space: nowrap;
}
.badge-passive { color: var(--accent); border-color: rgba(36,227,154,.32); background: rgba(36,227,154,.10); }
.badge-active  { color: var(--violet); border-color: rgba(139,123,255,.32); background: rgba(139,123,255,.10); }
.badge-live    { color: #4ade80; border-color: rgba(74,222,128,.28); background: rgba(74,222,128,.08); }
.badge-upcoming{ color: var(--blue); border-color: rgba(73,169,255,.28); background: rgba(73,169,255,.08); }
.badge-ended   { color: var(--fg-3); border-color: var(--line); background: var(--bg-2); }
.badge-easy    { color: #4ade80; border-color: var(--line-soft); background: var(--bg-2); }
.badge-medium  { color: var(--amber); border-color: var(--line-soft); background: var(--bg-2); }
.badge-hard    { color: var(--red);   border-color: var(--line-soft); background: var(--bg-2); }
.badge-free    { color: var(--accent); border-color: rgba(36,227,154,.25); background: rgba(36,227,154,.07); }

/* meta rows */
.card-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin-bottom: 14px;
}
.meta-cell { background: var(--bg-2); padding: 9px 11px; }
.meta-cell span {
  display: block;
  font-size: 10.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--fg-3);
  font-weight: 600;
  margin-bottom: 2px;
}
.meta-cell b { font-size: 13.5px; font-weight: 600; color: var(--fg); }
.meta-cell b.pos { color: var(--accent); }

.card-foot {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 4px;
}

.rating { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--fg-2); }
.stars { color: var(--amber); letter-spacing: 1px; font-size: 13px; }

.card-link {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.card-link:hover { gap: 8px; }

.ribbon {
  position: absolute;
  top: 14px; right: -30px;
  transform: rotate(45deg);
  background: var(--accent);
  color: #04140d;
  font: 800 9.5px/1 var(--font);
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 5px 34px;
}

/* empty state */
.empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 56px 20px;
  color: var(--fg-3);
  border: 1px dashed var(--line);
  border-radius: var(--radius);
}
.empty b { display: block; color: var(--fg-2); font-size: 16px; margin-bottom: 6px; }

/* ---------- Info cards ------------------------------------------------ */

.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}
.info-card {
  background: var(--card);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 22px;
}
.info-card .ico {
  width: 40px; height: 40px;
  border-radius: 11px;
  display: grid; place-items: center;
  font-size: 18px;
  margin-bottom: 14px;
  background: rgba(36,227,154,.10);
  border: 1px solid rgba(36,227,154,.22);
}
.info-card.v .ico { background: rgba(139,123,255,.10); border-color: rgba(139,123,255,.22); }
.info-card.a .ico { background: rgba(255,176,32,.10); border-color: rgba(255,176,32,.22); }
.info-card h3 { margin: 0 0 8px; font-size: 17px; letter-spacing: -.02em; }
.info-card p { margin: 0; color: var(--fg-2); font-size: 14px; }

/* ---------- Risk note ------------------------------------------------- */

.note {
  display: flex;
  gap: 14px;
  background: linear-gradient(180deg, rgba(255,176,32,.06), transparent);
  border: 1px solid rgba(255,176,32,.22);
  border-radius: var(--radius);
  padding: 18px 20px;
}
.note .ico { font-size: 20px; line-height: 1.2; }
.note h4 { margin: 0 0 4px; font-size: 15px; }
.note p { margin: 0; color: var(--fg-2); font-size: 13.8px; }

/* ---------- Footer ---------------------------------------------------- */

.site-footer {
  border-top: 1px solid var(--line-soft);
  background: var(--bg-2);
  margin-top: 40px;
  padding: 40px 0 30px;
}
.footer-inner {
  display: flex;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
}
.footer-inner p { color: var(--fg-3); font-size: 13px; margin: 10px 0 0; max-width: 420px; }
.footer-links { display: flex; gap: 22px; flex-wrap: wrap; }
.footer-links a { color: var(--fg-2); font-size: 13.5px; }
.footer-links a:hover { color: var(--accent); }
.copyright {
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid var(--line-soft);
  color: var(--fg-3);
  font-size: 12.5px;
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}

/* ---------- Detail page ----------------------------------------------- */

.back-link {
  display: inline-flex; align-items: center; gap: 7px;
  color: var(--fg-2); font-size: 13.5px; font-weight: 500;
  margin: 28px 0 18px;
}
.back-link:hover { color: var(--accent); }

.detail-head { display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; margin-bottom: 22px; }
.detail-head .card-logo { width: 62px; height: 62px; flex-basis: 62px; border-radius: 16px; font-size: 22px; }
.detail-head h1 { margin: 0 0 8px; font-size: clamp(26px, 4.6vw, 38px); letter-spacing: -.03em; }

.detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  gap: 22px;
  align-items: start;
  padding-bottom: 40px;
}
.panel {
  background: var(--card);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 22px;
}
.panel + .panel { margin-top: 16px; }
.panel h2 { font-size: 18px; margin: 0 0 12px; letter-spacing: -.02em; }
.panel p { color: var(--fg-2); margin: 0 0 12px; }
.panel ol, .panel ul { color: var(--fg-2); padding-left: 20px; margin: 0; }
.panel li { margin-bottom: 8px; }
.panel li::marker { color: var(--accent); font-weight: 700; }

.sidebar { position: sticky; top: 78px; }
.kv { display: grid; gap: 1px; background: var(--line-soft); border: 1px solid var(--line-soft); border-radius: var(--radius-sm); overflow: hidden; margin-bottom: 16px; }
.kv div { background: var(--bg-2); padding: 11px 13px; display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; }
.kv div span { color: var(--fg-3); }
.kv div b { font-weight: 600; }

.prosecons { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.prosecons ul { list-style: none; padding: 0; }
.prosecons li { display: flex; gap: 8px; font-size: 13.8px; }
.prosecons .pro li::before { content: "+"; color: var(--accent); font-weight: 800; }
.prosecons .con li::before { content: "−"; color: var(--red); font-weight: 800; }

/* ---------- Responsive ------------------------------------------------ */

@media (max-width: 900px) {
  .detail-grid { grid-template-columns: 1fr; }
  .sidebar { position: static; }
  .stats { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 760px) {
  .nav {
    position: absolute;
    top: 62px; left: 0; right: 0;
    flex-direction: column;
    background: var(--bg-2);
    border-bottom: 1px solid var(--line);
    padding: 10px 16px 16px;
    margin: 0;
    gap: 2px;
    display: none;
  }
  .nav.open { display: flex; }
  .nav a { padding: 11px 12px; }
  .menu-btn { display: block; order: 3; }
  .hero { padding-top: 40px; padding-bottom: 26px; }
  .section { padding-top: 42px; padding-bottom: 42px; }
  .prosecons { grid-template-columns: 1fr; }
  .logo small { display: none; }
}

@media (max-width: 420px) {
  .card-meta { grid-template-columns: 1fr; }
}

/* accessibility */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}

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

/* ==========================================================================
   Read & Earn
   ========================================================================== */

.points-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(36,227,154,.10);
  border: 1px solid rgba(36,227,154,.32);
  color: var(--accent);
  font-size: 13px;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
}
.points-chip .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }

.earn-panel {
  background: linear-gradient(180deg, var(--card), #0e1119);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
}

.inline-form { display: flex; gap: 10px; flex-wrap: wrap; }
.inline-form input {
  flex: 1 1 170px;
  min-width: 0;
  background: var(--bg-2);
  border: 1px solid var(--line);
  color: var(--fg);
  border-radius: var(--radius-sm);
  padding: 11px 13px;
  font: 14.5px/1.4 var(--font);
  outline: none;
}
.inline-form input:focus { border-color: #2f5f50; box-shadow: 0 0 0 3px rgba(36,227,154,.10); }
#code-input { text-transform: uppercase; letter-spacing: .08em; font-weight: 600; font-family: var(--mono); }

.linkish {
  background: none; border: 0; padding: 10px 0 0;
  color: var(--fg-3); font: 500 13px/1.4 var(--font);
  cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
}
.linkish:hover { color: var(--accent); }

.form-msg { font-size: 13.5px; margin-top: 10px; min-height: 20px; color: var(--fg-2); }
.form-msg.err { color: var(--red); }
.form-msg.ok { color: var(--accent); }

.user-head {
  display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; align-items: flex-start;
}
.user-nick { font-size: 19px; font-weight: 700; letter-spacing: -.02em; }
.user-stats { display: flex; gap: 10px; flex-wrap: wrap; }
.user-stats div {
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  padding: 10px 16px;
  text-align: center;
  min-width: 96px;
}
.user-stats b { display: block; font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; }
.user-stats span {
  font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--fg-3); font-weight: 600;
}

.article-card h3 {
  font-size: 16px; font-weight: 700; letter-spacing: -.015em;
  margin: 0 0 8px; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3;
  -webkit-box-orient: vertical; overflow: hidden;
}
.article-card .card-desc { min-height: 0; margin-bottom: 16px; }
.article-card .rating { font-size: 12.5px; color: var(--fg-3); }

.reward-top { margin-bottom: 10px; }
.reward-top b {
  display: inline-block;
  background: rgba(36,227,154,.10);
  border: 1px solid rgba(36,227,154,.28);
  color: var(--accent);
  border-radius: 8px;
  padding: 5px 10px;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.reward-btn { margin-top: 14px; width: 100%; justify-content: center; }
.reward-need { margin-top: 14px; font-size: 13px; color: var(--fg-3); }

.hist-list { display: grid; gap: 1px; background: var(--line-soft); border-radius: var(--radius-sm); overflow: hidden; }
.hist-row {
  background: var(--bg-2);
  display: flex; justify-content: space-between; align-items: center; gap: 14px;
  padding: 11px 14px;
}
.hist-row b { display: block; font-size: 14px; font-weight: 600; }
.hist-row span { font-size: 12px; color: var(--fg-3); }
.hist-row em { font-style: normal; font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; }

/* index teaser */
.earn-teaser {
  display: flex; align-items: center; justify-content: space-between;
  gap: 22px; flex-wrap: wrap;
  background: linear-gradient(120deg, rgba(36,227,154,.09), rgba(139,123,255,.07));
  border: 1px solid rgba(36,227,154,.26);
  border-radius: var(--radius);
  padding: 24px;
}
.earn-teaser h2 { margin: 0 0 6px; font-size: clamp(20px, 3vw, 26px); letter-spacing: -.025em; }
.earn-teaser p { margin: 0; color: var(--fg-2); font-size: 14.5px; }

/* admin */
.admin-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.admin-table th, .admin-table td {
  text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--line-soft); vertical-align: top;
}
.admin-table th { color: var(--fg-3); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }
.admin-table code { font-family: var(--mono); color: var(--accent); }
.table-wrap { overflow-x: auto; }

/* Google sign-in */
#google-wrap { margin-bottom: 4px; }
#google-btn { display: flex; justify-content: flex-start; min-height: 38px; }
.gbtn-inline { max-width: 230px; }

/* compact icon button in the header bar */
/* Google sign-in button in the header.

   Google's own rendered button is a white disc that looks pasted onto this
   dark header, and GIS gives no way to restyle it. So the face below is ours
   — dark, same 40px and same border language as .btn-ghost beside it — and
   Google's real button sits invisibly on top of it, clipped to the same
   circle. The visitor clicks what looks like our button and the click lands
   on Google's, which is the only reliable way to start their flow: a
   synthetic click forwarded to it is blocked in several browsers. */

.gbtn-top {
  position: relative;
  width: 40px; height: 40px; flex: none;
}
.gbtn-face {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 50%;
  cursor: pointer;
  transition: border-color .18s, background .18s, transform .14s, box-shadow .18s;
}
.gbtn-top:hover .gbtn-face {
  background: var(--card-2);
  border-color: #2f5f50;
  box-shadow: 0 0 0 3px rgba(36,227,154,.10);
  transform: translateY(-1px);
}
.gbtn-top:active .gbtn-face { transform: translateY(0); }
.gbtn-face svg { width: 18px; height: 18px; display: block; }

/* Google's button: invisible, on top, clipped to our circle.

   When it is EMPTY it gets out of the way, so the fallback link underneath
   takes the click. That happens more often than you'd think: Brave blocks
   Google sign-in frames by default, uBlock and friends block gsi/client,
   and a corporate proxy can too. Without this the icon looks like a button
   and does nothing at all when clicked. */
.gbtn-real {
  position: absolute; inset: 0; z-index: 2;
  border-radius: 50%; overflow: hidden;
  opacity: 0; cursor: pointer;
}
.gbtn-real:empty { display: none; }
.gbtn-real > div {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  line-height: 0;
}
.gbtn-real iframe { margin: 0 !important; }
.or-divider {
  display: flex; align-items: center; gap: 12px;
  color: var(--fg-3); font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
  margin: 16px 0;
}
.or-divider::before, .or-divider::after {
  content: ""; flex: 1; height: 1px; background: var(--line-soft);
}
.user-email { font-size: 12.5px; color: var(--fg-3); margin-top: 2px; }

/* ---------- PayPal payout ---------- */

.rate-chip {
  align-self: center;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--fg-2);
  white-space: nowrap;
}

.payout-balance {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}
.payout-balance > div:first-child {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}
.payout-balance span {
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--fg-3); font-weight: 600;
}
.payout-balance b {
  font-size: 30px; font-weight: 800; letter-spacing: -.03em;
  color: var(--accent); font-variant-numeric: tabular-nums;
}
.payout-balance em {
  font-style: normal; color: var(--fg-3); font-size: 13.5px;
  font-variant-numeric: tabular-nums;
}
.payout-min { color: var(--fg-3); font-size: 12.5px; max-width: 380px; line-height: 1.5; }

.hist-row em.st-pending  { color: var(--amber); font-size: 12.5px; }
.hist-row em.st-paid     { color: var(--accent); font-size: 12.5px; }
.hist-row em.st-rejected { color: var(--fg-3); font-size: 12.5px; }

.inline-form label { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.inline-form label .fld {
  font-size: 11px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--fg-3); font-weight: 600;
}
.inline-form label input { flex: none; width: 100%; }

/* ---------- Legal pages ---------- */

.legal { max-width: 800px; padding-top: 34px; padding-bottom: 60px; }
.legal h1 { font-size: clamp(27px, 4.5vw, 38px); letter-spacing: -.03em; margin: 0 0 6px; }
.legal h2 {
  font-size: 19px; letter-spacing: -.02em; margin: 34px 0 10px;
  padding-top: 20px; border-top: 1px solid var(--line-soft);
}
.legal h3 { font-size: 15.5px; margin: 20px 0 6px; color: var(--fg); }
.legal p, .legal li { color: var(--fg-2); font-size: 14.8px; line-height: 1.7; }
.legal p { margin: 0 0 12px; }
.legal ul { margin: 0 0 14px; padding-left: 20px; }
.legal li { margin-bottom: 7px; }
.legal li::marker { color: var(--accent); }
.legal a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.legal strong { color: var(--fg); font-weight: 600; }
.legal code {
  font-family: var(--mono); font-size: 12.5px;
  background: var(--bg-2); border: 1px solid var(--line-soft);
  border-radius: 5px; padding: 1px 5px; color: var(--fg-2);
}
.legal-date { color: var(--fg-3); font-size: 13px; margin-bottom: 26px !important; }

.legal-table {
  width: 100%; border-collapse: collapse; margin: 0 0 16px;
  font-size: 13.8px; display: block; overflow-x: auto;
}
.legal-table th, .legal-table td {
  text-align: left; padding: 9px 12px;
  border-bottom: 1px solid var(--line-soft); vertical-align: top;
}
.legal-table th {
  color: var(--fg-3); font-size: 11px; text-transform: uppercase;
  letter-spacing: .07em; font-weight: 700; white-space: nowrap;
}
.legal-table td { color: var(--fg-2); }

.contact-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px; margin: 24px 0 8px;
}
.contact-grid .info-card p { margin: 0 0 8px; }

/* ---------- Cookie notice ---------- */

.cookie-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  background: rgba(12,14,20,.96);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
}
.cookie-inner {
  max-width: var(--maxw); margin: 0 auto;
  padding: 14px 20px;
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
}
.cookie-inner p { margin: 0; flex: 1 1 320px; font-size: 13.5px; color: var(--fg-2); }
.cookie-inner b { color: var(--fg); }
.cookie-inner a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.cookie-inner .btn { padding: 10px 20px; font-size: 14px; white-space: nowrap; }
.cookie-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* ---------- Advertising slots ----------
   An unfilled slot must occupy nothing at all: no box, no border, no
   margin. That is what `:empty` below guarantees, and it is the one thing
   here that must never regress — a column of empty grey placeholders is
   worse than no ads. Slots only ever gain children once ads.js has both a
   real unit key and the visitor's consent. */

.ad-slot { display: flex; justify-content: center; margin: 26px 0; }
.ad-slot:empty { display: none; margin: 0; }
.ad-slot--tight { margin: 14px 0; }

/* The header leaderboard sits between the header and the hero, so it gets
   the page gutter rather than the section rhythm. */
.ad-slot--top { margin: 18px auto 0; padding: 0 20px; max-width: var(--maxw); }
.ad-slot--top:empty { padding: 0; }

.ad-unit { overflow: hidden; max-width: 100%; }
.ad-unit--banner { position: relative; }
.ad-unit--native { width: 100%; max-width: 760px; }

/* Preview mode (?adpreview=1) — never seen by visitors. */
.ad-preview {
  display: flex; align-items: center; justify-content: center;
  border: 1px dashed var(--line);
  border-radius: var(--radius-sm);
  background: rgba(36,227,154,.03);
  color: var(--fg-3);
  font: 600 11px/1.3 var(--mono, monospace);
  letter-spacing: .06em; text-transform: uppercase;
  text-align: center; max-width: 100%;
}
.ad-preview--native { width: 100%; max-width: 760px; height: 132px; }

@media (max-width: 767px) {
  .ad-slot { margin: 18px 0; }
}

/* ---------- Account widget in the header ---------- */

.acc-widget { display: flex; align-items: center; gap: 10px; }
.acc-user { position: relative; display: flex; align-items: center; }
.acc-out { display: flex; align-items: center; gap: 10px; }

.acc-user .points-chip { cursor: pointer; font-family: var(--font); }
.acc-user .points-chip:hover { background: rgba(36,227,154,.16); }

.acc-login { padding: 8px 16px; font-size: 13.5px; }

.acc-menu {
  position: absolute;
  top: calc(100% + 10px); right: 0;
  min-width: 200px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  padding: 6px;
  z-index: 60;
}
.acc-menu-head {
  padding: 9px 11px 10px;
  border-bottom: 1px solid var(--line-soft);
  margin-bottom: 5px;
}
.acc-menu-head b { display: block; font-size: 14.5px; }
.acc-menu-head span { font-size: 12.5px; color: var(--accent); font-weight: 600; }
.acc-menu a, .acc-menu button {
  display: block; width: 100%; text-align: left;
  background: none; border: 0;
  padding: 9px 11px; border-radius: 8px;
  color: var(--fg-2); font: 500 13.5px/1.3 var(--font);
  cursor: pointer;
}
.acc-menu a:hover, .acc-menu button:hover { background: var(--card-2); color: var(--fg); }
.acc-menu button { color: var(--fg-3); }

@media (max-width: 560px) {
  .acc-login { display: none; }
  .logo small { display: none; }
}

/* ==========================================================================
   Admin dashboard
   ========================================================================== */

.tabs {
  display: flex; gap: 4px; flex-wrap: wrap;
  border-bottom: 1px solid var(--line-soft);
  margin-bottom: 22px;
}
.tabs .tab {
  background: none; border: 0; border-bottom: 2px solid transparent;
  color: var(--fg-3); font: 600 14px/1 var(--font);
  padding: 11px 14px; cursor: pointer; margin-bottom: -1px;
  transition: color .15s, border-color .15s;
}
.tabs .tab:hover { color: var(--fg-2); }
.tabs .tab[aria-selected="true"] { color: var(--fg); border-bottom-color: var(--accent); }

.kpi-row {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(175px, 1fr));
  gap: 12px; margin-bottom: 20px;
}
.kpi {
  background: linear-gradient(180deg, var(--card), #0e1119);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius); padding: 16px 18px;
}
.kpi-label {
  display: block; font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--fg-3); font-weight: 700; margin-bottom: 7px;
}
.kpi-value {
  display: block; font-size: 25px; font-weight: 800; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums; line-height: 1.15;
}
.kpi-sub { display: block; margin-top: 5px; font-size: 12.5px; color: var(--fg-3); }
.kpi-warn .kpi-value { color: var(--amber); }
.kpi-good .kpi-value { color: var(--accent); }

.dash-grid {
  display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 20px;
}
@media (max-width: 860px) { .dash-grid { grid-template-columns: 1fr; } }

.panel-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.panel-sub { color: var(--fg-3); font-size: 12.5px; margin: -6px 0 14px; }
.chart-total {
  background: var(--bg-2); border: 1px solid var(--line-soft); border-radius: 999px;
  padding: 5px 12px; font-size: 12.5px; font-weight: 700; color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.muted { color: var(--fg-3); font-size: 13.5px; margin: 0; }

/* bar chart */
.chart-svg { width: 100%; height: auto; display: block; }
.chart-svg .grid { stroke: var(--line-soft); stroke-width: 1; }
.chart-svg .bar-mark { fill: var(--accent); transition: fill .15s; }
.chart-svg .bar-zero { fill: var(--line); }
.chart-svg .bar-hit { fill: transparent; }
.chart-svg .bar:hover .bar-mark { fill: #6ef0bd; }
.chart-svg .bar:hover .bar-hit { fill: rgba(255,255,255,.03); }
.chart-svg .ax {
  fill: var(--fg-3); font-size: 11px; font-family: var(--font);
  text-anchor: middle; font-weight: 600;
}
.chart-svg .val {
  fill: var(--fg-2); font-size: 11.5px; font-family: var(--font);
  text-anchor: middle; font-weight: 700;
}

/* top articles */
.toplist { display: grid; gap: 11px; }
.toprow { display: grid; grid-template-columns: 1fr 76px 28px; gap: 10px; align-items: center; }
.topname {
  font-size: 13px; color: var(--fg-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.topbar { background: var(--bg-2); border-radius: 999px; height: 6px; overflow: hidden; }
.topbar span { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
.topval {
  font-size: 12.5px; font-weight: 700; color: var(--fg);
  text-align: right; font-variant-numeric: tabular-nums;
}

.hist-row span { display: block; }

@media (max-width: 700px) {
  #gen-at { display: none; }
  .tabs .tab { padding: 10px 11px; font-size: 13.5px; }
  .kpi-value { font-size: 22px; }
}