:root{
  --bg0:#f5f7fb;
  --bg1:#eef3f9;

  --glass: rgba(255,255,255,.74);
  --glass2: rgba(255,255,255,.62);
  --stroke: rgba(10,30,60,.10);
  --stroke2: rgba(10,30,60,.08);

  --ton:#2aa8ff;
  --tg:#31a9ff;
  --mint:#2fd6b6;
  --warn:#b9891a;

  --text:#0b1b2a;
  --muted: rgba(11,27,42,.72);
  --muted2: rgba(11,27,42,.55);

  --shadow: 0 18px 60px rgba(14,30,55,.12);
  --radius: 22px;

  --pm-card-bg:#ffffff; /* Polymarket-like: white cards */
  --pm-border: rgba(10,30,60,.12); /* subtle border */
  --pm-text:#0b1b2a; /* match site text */
  --pm-muted: rgba(11,27,42,.62); /* secondary text */
  --pm-yes:#35a9b6;
  --pm-no:#2f79c8;
  --pm-btn-h:26px; /* Polymarket-like compact buttons */
  --pm-radius:12px; /* card/button radius */
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  background:
    radial-gradient(1200px 700px at 12% 18%, rgba(49,169,255,.18), transparent 60%),
    radial-gradient(900px 600px at 82% 20%, rgba(47,214,182,.12), transparent 58%),
    radial-gradient(900px 700px at 45% 95%, rgba(42,168,255,.12), transparent 60%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
  overflow-x:hidden;
}

.glowline{
  position:absolute; inset:-40px -60px auto -60px;
  height:260px;
  background: linear-gradient(90deg, transparent, rgba(49,169,255,.18), transparent);
  filter: blur(18px);
  opacity:.35;
  transform: rotate(-6deg);
  animation: slide 10s linear infinite;
  pointer-events:none;
}
@keyframes slide{
  0%{transform: translateX(-20%) rotate(-6deg)}
  100%{transform: translateX(20%) rotate(-6deg)}
}

.wrap{max-width:1480px; width:min(1480px, 96vw); margin:0 auto; padding:28px 18px 64px; position:relative}
header{
  position:sticky; top:0; z-index:10;
  padding:16px 0 14px;
  backdrop-filter: blur(14px);
  background: linear-gradient(180deg, rgba(245,247,251,.86), rgba(245,247,251,.55));
  border-bottom: 1px solid var(--stroke2);
}

.head{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px;
  max-width:1480px; margin:0 auto; padding:0 18px;
}

.brand{
  display:flex; align-items:center; gap:12px; min-width:240px;
}
.logo{
  width:42px; height:42px; border-radius:14px;
  background:
    radial-gradient(16px 16px at 30% 30%, rgba(255,255,255,.85), transparent 60%),
    linear-gradient(135deg, rgba(49,169,255,.92), rgba(42,168,255,.78));
  box-shadow: 0 10px 26px rgba(49,169,255,.18);
  border:1px solid rgba(10,30,60,.10);
  display:grid; place-items:center;
}
.logo iconify-icon{font-size:22px; color:#ffffff}
.brand h1{font-size:14px; margin:0; letter-spacing:.2px}
.brand p{margin:2px 0 0; font-size:12px; color:var(--muted2)}

.contacts{
  display:flex; flex-wrap:wrap; gap:10px;
  justify-content:flex-end;
}
.pill{
  display:inline-flex; align-items:center; gap:10px;
  padding:10px 12px;
  border-radius:999px;
  background: linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,255,255,.62));
  border:1px solid rgba(10,30,60,.10);
  box-shadow: 0 10px 30px rgba(14,30,55,.10);
  color:var(--text);
  text-decoration:none;
  transition: transform .15s ease, border-color .15s ease, background .15s ease;
  user-select:none;
}
.pill:hover{
  transform: translateY(-1px);
  border-color: rgba(49,169,255,.40);
  background: linear-gradient(180deg, rgba(49,169,255,.12), rgba(255,255,255,.66));
}
.pill span{font-size:12px; color:var(--muted)}
.pill svg{display:block}
.pill .ic{
  width:26px; height:26px;
  border-radius:10px;
  display:grid; place-items:center;
  background: rgba(49,169,255,.10);
  border:1px solid rgba(49,169,255,.18);
}

main{padding-top:22px}

.hero{
  position:relative;
  padding:26px 22px;
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255,255,255,.80), rgba(255,255,255,.62));
  border: 1px solid rgba(10,30,60,.10);
  box-shadow: var(--shadow);
  overflow:hidden;
}
.hero:before{
  content:"";
  position:absolute; inset:-2px;
  background:
    radial-gradient(520px 240px at 10% 0%, rgba(49,169,255,.16), transparent 55%),
    radial-gradient(520px 260px at 90% 10%, rgba(47,214,182,.10), transparent 60%),
    radial-gradient(520px 300px at 50% 110%, rgba(42,168,255,.10), transparent 60%);
  pointer-events:none;
}
.heroTop{
  position:relative;
  display:flex; gap:18px; align-items:flex-start; justify-content:space-between;
  flex-wrap:wrap;
}
.kicker{
  display:inline-flex; align-items:center; gap:10px;
  padding:8px 12px;
  border-radius:999px;
  background: rgba(49,169,255,.10);
  border:1px solid rgba(49,169,255,.18);
  color:var(--muted);
  font-size:12px;
  letter-spacing:.2px;
}
.kicker iconify-icon{font-size:16px; color:var(--tg)}
.title{
  margin:12px 0 8px;
  font-size:34px;
  line-height:1.12;
  letter-spacing:-.5px;
}
.subtitle{
  margin:0;
  color:var(--muted);
  max-width:62ch;
  font-size:14px;
  line-height:1.55;
}

.ctaRow{
  position:relative;
  display:flex; gap:10px; flex-wrap:wrap; align-items:center; justify-content:flex-end;
  margin-top:6px;
}
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:11px 13px;
  border-radius:14px;
  background: rgba(49,169,255,.12);
  border:1px solid rgba(49,169,255,.22);
  color:var(--text);
  text-decoration:none;
  font-size:13px;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
  user-select:none;
}
.btn:hover{
  transform: translateY(-1px);
  background: rgba(49,169,255,.16);
  border-color: rgba(49,169,255,.32);
}
.btn.secondary{
  background: rgba(255,255,255,.60);
  border:1px solid rgba(10,30,60,.10);
}
.btn.secondary:hover{border-color: rgba(10,30,60,.16)}
.btn iconify-icon{font-size:18px}

.grid{
  display:grid;
  grid-template-columns: 1.25fr .75fr;
  gap:14px;
  margin-top:16px;
  position:relative;
}
@media (max-width: 960px){
  .grid{grid-template-columns: 1fr}
  .brand{min-width:auto}
  .contacts{justify-content:flex-start}
  .title{font-size:30px}
}

.card{
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255,255,255,.74), rgba(255,255,255,.58));
  border:1px solid rgba(10,30,60,.10);
  box-shadow: 0 16px 44px rgba(14,30,55,.10);
  padding:18px;
  position:relative;
  overflow:hidden;
}
.cardHeader{
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  margin-bottom:10px;
}
.cardTitle{
  display:flex; align-items:center; gap:10px;
  font-weight:700;
  letter-spacing:.2px;
}
.badge{
  font-size:11px;
  padding:7px 10px;
  border-radius:999px;
  border:1px solid rgba(10,30,60,.10);
  background: rgba(255,255,255,.60);
  color:var(--muted);
  display:inline-flex; align-items:center; gap:8px;
}
.badge iconify-icon{font-size:14px; color:var(--mint)}
.card p{margin:10px 0 0; color:var(--muted); line-height:1.6; font-size:14px}

.facts{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:10px;
  margin-top:14px;
}
@media (max-width: 520px){
  .facts{grid-template-columns: 1fr}
}
.fact{
  border-radius:18px;
  padding:12px 12px;
  background: rgba(245,247,251,.72);
  border:1px solid rgba(10,30,60,.08);
  display:flex; gap:12px; align-items:flex-start;
}
.fact .ico{
  width:42px; height:42px;
  border-radius:16px;
  display:grid; place-items:center;
  background: rgba(49,169,255,.10);
  border:1px solid rgba(49,169,255,.18);
  flex:0 0 auto;
}
.fact .ico iconify-icon{font-size:22px; color:var(--ton)}
.fact h4{margin:2px 0 2px; font-size:13px}
.fact span{display:block; color:var(--muted2); font-size:12px; line-height:1.45}

.mono{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size:12.5px;
  color: rgba(11,27,42,.86);
  word-break: break-all;
}

.contractBox{
  display:flex; gap:10px; align-items:stretch; margin-top:10px; flex-wrap:wrap;
}
.contract{
  flex: 1 1 360px;
  padding:12px 12px;
  border-radius:16px;
  background: rgba(245,247,251,.86);
  border:1px solid rgba(10,30,60,.10);
}
.copyBtn{
  flex: 0 0 auto;
  border-radius:16px;
  border:1px solid rgba(49,169,255,.28);
  background: rgba(49,169,255,.12);
  color:var(--text);
  padding:0 14px;
  cursor:pointer;
  display:inline-flex; align-items:center; gap:10px;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
  user-select:none;
  font-size:13px;
}
.copyBtn:hover{transform: translateY(-1px); background: rgba(49,169,255,.16); border-color: rgba(49,169,255,.36)}
.copyBtn iconify-icon{font-size:18px}

.linkRow{
  margin-top:12px;
  padding:12px 12px;
  border-radius:16px;
  background: rgba(255,255,255,.62);
  border:1px solid rgba(10,30,60,.10);
  display:flex; gap:10px; align-items:flex-start;
}
.linkRow iconify-icon{font-size:18px; color:var(--tg); margin-top:1px}
.linkRow a{
  color: rgba(11,27,42,.86);
  text-decoration:none;
  word-break: break-all;
  font-size:12.5px;
  line-height:1.45;
}
.linkRow a:hover{text-decoration:underline}

.eventsTape{
  margin-top: 18px;
  border-radius: 18px;
  padding: 12px;
  background: linear-gradient(180deg, rgba(255,255,255,.64), rgba(255,255,255,.46));
  border: 1px solid rgba(10,30,60,.10);
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
  height: min(520px, 70vh);
  scrollbar-width: thin;
  scrollbar-color: rgba(10,30,60,.25) transparent;
}
.eventsCats{
  margin-top: 14px;
  display:flex;
  gap:16px;
  flex-wrap: nowrap;
  overflow-x: auto;
  padding: 6px 2px;
  scrollbar-width: thin;
  scrollbar-color: rgba(10,30,60,.18) transparent;
}
.cat{
  color: var(--muted);
  font-size:12px;
  font-weight:600;
  text-decoration:none;
  white-space:nowrap;
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding-right: 6px;
  padding:4px 0;
  transition: color .15s ease, transform .15s ease;
}
.cat:hover{
  transform: translateY(-1px);
  color: var(--text);
}
.cat.is-active{
  color: var(--text);
}
.cat-ic{
  width:14px;
  height:14px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color: var(--tg);
}
.cat-ic svg{ width:14px; height:14px; display:block; }
.cat-sep{
  width:1px;
  align-self:stretch;
  background: rgba(10,30,60,.16);
  margin:0 4px;
  flex:0 0 auto;
}
.eventsGrid{
  display: grid;
  grid-template-columns: repeat(4, minmax(260px, 1fr));
  gap: 10px;
}
/* =========================================================
   Polymarket-like event card (tuned from your screenshot)
   Goals:
   - more readable title (less bold, a bit larger)
   - icon closer to edges (less empty space) but still padded
   - YES/NO smaller & with consistent right padding (no touching edge)
   - fixed card height like Polymarket (compact), but not cramped
   ========================================================= */

.pm-card{
  /* Card box */
  width: 100%;
  background: var(--pm-card-bg);                 /* <-- card background */
  border: 1px solid var(--pm-border);           /* <-- border thickness/color */
  border-radius: 14px;                          /* <-- card rounding */
  padding: 10px;                                /* <-- overall inner spacing */
  box-sizing: border-box;

  /* Layout: left rail (icon+actions+volume) + main content */
  display: grid;
  grid-template-columns: 46px 1fr;              /* <-- tight left rail */
  gap: 8px;

  height: 120px;                                /* taller to fit 2-line title + larger icon */
  min-height: 120px;
  max-height: 120px;
  overflow: hidden;
}

/* Left rail */
.pm-left{
  display:flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 6px;
  height: 100%;
  padding: 0;                                   /* <-- removes extra left padding */
}

/* Event icon */
.pm-evt-icon{
  width: 52px;                                  /* <-- 2x size */
  height: 52px;
  border-radius: 12px;
  display:grid;
  place-items:center;
}
.pm-evt-svg{
  width: 48px;
  height: 48px;
  display:block;
}
.pm-evt-icon img{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:inherit;
  display:block;
}

/* Small action icons (bookmark / refresh etc.) */
.pm-left-actions{
  display:flex;
  flex-direction: row;
  gap: 6px;                                     /* <-- spacing between icons */
  margin: 0;
}
.pm-iconbtn{
  width: 22px;                                  /* <-- hit-area (readable & tappable) */
  height: 22px;
  border: none;
  background: transparent;
  border-radius: 8px;
  display:grid;
  place-items:center;
  cursor:pointer;
  color: rgba(11,27,42,.75);
}
.pm-iconbtn svg{
  width: 14px;                                  /* <-- icon glyph size */
  height: 14px;
}
.pm-iconbtn:hover{ background: rgba(11,27,42,0.06); }

/* Volume line */
.pm-volume{
  font-weight: 600;                             /* <-- reduce “too bold” */
  color: rgba(11,27,42,.88);
  font-size: 12px;                              /* <-- Polymarket-like volume size */
  line-height: 1;
  white-space: nowrap;
}
.pm-vol-label{
  font-weight: 600;
  margin-left: 4px;
  color: var(--pm-muted);
}

/* Main content */
.pm-main{
  display:flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 6px;
  min-width: 0;                                 /* <-- enables ellipsis */
  height: 100%;
  width: 100%;
}

/* Title: less bold, more text fits */
.pm-title{
  font-size: 12.5px;
  font-weight: 700;
  color: var(--pm-text);
  line-height: 1.2;
  letter-spacing: 0;

  /* 2-line clamp like Polymarket */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  width: 100%;
  position: relative;
  min-height: 2.4em;                            /* ensure full 2-line block height */
}
.pm-title:hover::after{
  content: attr(title);
  position: absolute;
  left: 0;
  top: 100%;
  margin-top: 6px;
  max-width: 280px;
  padding: 6px 8px;
  border-radius: 10px;
  background: rgba(255,255,255,.98);
  border: 1px solid rgba(10,30,60,.12);
  box-shadow: 0 10px 24px rgba(14,30,55,.15);
  color: var(--pm-text);
  font-size: 12px;
  line-height: 1.3;
  z-index: 5;
}

/* Bottom row: YES | probability | NO */
.pm-row{
  display:flex;
  align-items:center;
  justify-content: flex-end;
  gap: 6px;
  padding-right: 0;
  margin-top: auto;                             /* push to bottom */
}

/* YES/NO buttons: smaller like Polymarket */
.pm-choice{
  height: var(--pm-btn-h);                      /* <-- button height */
  width: 52px;
  min-width: 52px;
  padding: 0 4px;
  border: none;
  border-radius: 10px;
  cursor: pointer;

  display:flex;
  align-items:center;
  justify-content:center;

  box-shadow: 0 1px 0 rgba(0,0,0,0.10);
  flex: 0 0 auto;
}
.pm-choice:active{
  transform: translateY(1px);
  box-shadow: 0 1px 0 rgba(0,0,0,0.12);
}
.pm-choice-label{
  color:#fff;
  font-weight: 800;
  font-size: 10.5px;
  letter-spacing: .2px;
}
.pm-yes{ background: var(--pm-yes); }
.pm-no{ background: var(--pm-no); }

/* Probability “gauge” */
.pm-prob{
  display:flex;
  align-items:center;
  justify-content:center;
  flex: 0 0 auto;
}
.pm-prob-disc{
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background:#111;
  position: relative;
  display:grid;
  place-items:center;
}
.pm-gauge{
  position:absolute;
  width: 20px;
  height: 20px;
  top: 7px;
  left: 8px;
  opacity: 0.95;
}
.pm-prob-text{
  position:absolute;
  bottom: 4px;
  left:0;
  right:0;
  text-align:center;
  font-weight: 800;
  font-size: 9px;
  color:#fff;
}


@media (max-width: 1080px){
  .eventsGrid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Keep the same compact card height on medium screens */
  .pm-card{ height: 112px; min-height: 112px; max-height: 112px; }
  .pm-choice{ width: 52px; min-width: 52px; }
}
@media (max-width: 720px){
  .eventsGrid{ grid-template-columns: 1fr; }
  .eventsCats{ gap:12px; }
  .cat{ font-size:11px; }

  /* Mobile: keep everything readable but compact */
  .pm-card{
    grid-template-columns: 44px 1fr;
    height: 112px;
    min-height: 112px;
    max-height: 112px;
  }
  .pm-choice{ width: 52px; min-width: 52px; }

  .pm-choice-label{ font-size: 10.5px; }
}

.investor{
  margin-top:16px;
  border-radius:18px;
  background: linear-gradient(180deg, rgba(49,169,255,.10), rgba(255,255,255,.58));
  border:1px solid rgba(49,169,255,.18);
  padding:14px 14px;
  display:flex;
  gap:12px;
  align-items:flex-start;
  position:relative;
  box-shadow: 0 16px 44px rgba(14,30,55,.08);
}
.investor .mark{
  width:42px; height:42px;
  border-radius:16px;
  display:grid; place-items:center;
  background: rgba(49,169,255,.12);
  border:1px solid rgba(49,169,255,.18);
  flex:0 0 auto;
}
.investor .mark iconify-icon{font-size:22px; color:var(--tg)}
.investor h3{
  margin:0;
  font-size:13px;
  letter-spacing:.2px;
}
.investor p{
  margin:6px 0 0;
  font-size:12.5px;
  color:var(--muted);
  line-height:1.45;
}
.investor a{
  color: rgba(11,27,42,.86);
  text-decoration:none;
  word-break: break-all;
  font-weight:600;
}
.investor a:hover{text-decoration:underline}

.footer{
  margin-top:12px;
  color:rgba(11,27,42,.45);
  font-size:12px;
  text-align:center;
}

.toast{
  position:fixed; left:50%; bottom:18px; transform:translateX(-50%);
  background: rgba(255,255,255,.78);
  border:1px solid rgba(10,30,60,.12);
  backdrop-filter: blur(10px);
  color:var(--text);
  border-radius:999px;
  padding:10px 14px;
  display:flex; gap:10px; align-items:center;
  opacity:0; pointer-events:none;
  transition: opacity .18s ease, transform .18s ease;
  z-index:50;
  box-shadow: 0 16px 40px rgba(14,30,55,.12);
  font-size:13px;
}
.toast.show{opacity:1; transform:translateX(-50%) translateY(-2px)}
.toast iconify-icon{color:var(--mint); font-size:18px}