*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --bg:        #0e1117;
      --surface:   #161b27;
      --surface2:  #1c2335;
      --border:    rgba(99, 132, 255, 0.15);
      --border2:   rgba(255,255,255,0.06);
      --blue:      #5b8af5;
      --blue-soft: #3b5fc0;
      --blue-glow: rgba(91, 138, 245, 0.12);
      --text:      #e8eaf6;
      --muted:     #6b7280;
      --muted2:    #9ca3af;
      --green:     #34d399;
      --red:       #f87171;
    }

    html { scroll-behavior: smooth; }

    body {
      background: var(--bg);
      color: var(--text);
      font-family: 'Montserrat', sans-serif;
      min-height: 100vh;
      -webkit-font-smoothing: antialiased;
      overflow-x: hidden;
    }

    /**** Constellation canvas ****/
    #stars {
      position: fixed;
      inset: 0;
      z-index: 0;
      pointer-events: none;
    }

    /**** Top glow ****/
    .top-glow {
      position: fixed;
      top: -160px;
      left: 50%;
      transform: translateX(-50%);
      width: 700px;
      height: 400px;
      background: radial-gradient(ellipse, rgba(91,138,245,0.07) 0%, transparent 70%);
      pointer-events: none;
      z-index: 0;
    }

    /**** Page ****/
    .page {
      position: relative;
      z-index: 1;
      max-width: 920px;
      margin: 0 auto;
      padding: 64px 24px 80px;
      display: flex;
      flex-direction: column;
      gap: 28px;
    }

    /**** Animations ****/
    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(18px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    .fade { opacity: 0; animation: fadeUp 0.55s ease forwards; }

    /**** Card base ****/
    .card {
      background: rgba(22, 27, 39, 0.85);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border: 1px solid var(--border2);
      border-radius: 16px;
      padding: 28px;
      transition: border-color 0.2s;
    }

    .card-header {
      text-align: center;
      padding-bottom: 24px;
    }

    .card:hover { border-color: var(--border); }
    .card-label {
      font-size: 1.5rem;
      font-weight: 700;
      /*text-transform: uppercase;*/
      color: var(--blue);
      margin-bottom: 18px;
      text-align: center;
    }

    .card-label-countdown {
      font-size: 1.5rem;
      font-weight: 800;
      /*text-transform: uppercase;*/
      color: var(--blue);
      margin-bottom: 18px;
      text-align: center;
    }

    /**** Header ****/
    .header { text-align: center; }
    .header-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: var(--blue-glow);
      border: 1px solid var(--border);
      border-radius: 100px;
      padding: 4px 14px;
      font-size: 0.7rem;
      font-weight: 500;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--blue);
      margin-bottom: 18px;
    }
    .header-badge span { width: 6px; height: 6px; border-radius: 50%; background: var(--blue); display: inline-block; animation: pulse 2s infinite; }
    @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.3} }
    .header-title {
      width: 90%;
      height: auto;
      max-width: 600px;
      margin: auto;
    }
    .header-sub {
      margin-top: 10px;
      font-size: 0.92rem;
      color: var(--muted2);
    }
    .header-nav {
      display: flex;
      justify-content: center;
      gap: 10px;
      margin-top: 22px;
      flex-wrap: wrap;
      gap: 25%;
    }
    .btn {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      padding: 9px 18px;
      border-radius: 8px;
      font-size: 0.82rem;
      font-weight: 500;
      font-family: 'Montserrat', sans-serif;
      text-decoration: none;
      cursor: pointer;
      transition: all 0.18s ease;
    }
    .btn-primary { background: var(--blue); color: #fff; border: none; }
    .btn-primary:hover { background: #4a78e8; transform: translateY(-1px); }
    .btn-ghost { background: transparent; color: var(--muted2); border: 1px solid var(--border2); }
    .btn-ghost:hover { border-color: var(--blue); color: var(--blue); background: var(--blue-glow); transform: translateY(-1px); }

    /**** Countdown ****/
    .countdown-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 10px;
    }
    .cd-unit {
      background: var(--surface2);
      border: 1px solid var(--border2);
      border-radius: 12px;
      padding: 18px 12px;
      text-align: center;
    }
    .cd-number {
      font-size: clamp(1.8rem, 4vw, 2.8rem);
      font-weight: 800;
      letter-spacing: -0.04em;
      color: #fff;
      line-height: 1;
      font-variant-numeric: tabular-nums;
    }
    .cd-label {
      font-size: 0.63rem;
      font-weight: 500;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--muted);
      margin-top: 5px;
    }
    .countdown-note {
      margin-top: 14px;
      font-size: 0.8rem;
      color: var(--muted2);
      text-align: center;
    }

    /**** Market tickers ****/
    .tickers-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 20px;
      margin-bottom: 24px;
    }
    .ticker {
      background: var(--surface2);
      border: 1px solid var(--border2);
      border-radius: 12px;
      padding: 16px;
      transition: border-color 0.2s;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    .ticker:hover { border-color: var(--border); }
    .ticker-name {
      font-size: 0.68rem;
      font-weight: 600;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--muted);
      margin-bottom: 6px;
    }
    .ticker-price {
      font-size: 1.15rem;
      font-weight: 700;
      letter-spacing: -0.02em;
      color: #fff;
    }
    .ticker-change {
      font-size: 0.75rem;
      font-weight: 600;
      margin-top: 3px;
    }
    .ticker-change.up   { color: var(--green); }
    .ticker-change.down { color: var(--red); }
    .ticker-change.flat { color: var(--muted2); }
    .ticker-loading { color: var(--muted); font-size: 0.75rem; }

    /**** Chart ****/
    .chart-header {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      margin-bottom: 18px;
      gap: 12px;
      flex-wrap: wrap;
    }
    .chart-title { font-size: 0.95rem; font-weight: 600; }
    .chart-sub   { font-size: 0.75rem; color: var(--muted2); margin-top: 2px; }
    .chart-price-group { text-align: right; }
    .chart-price  { font-size: 1.35rem; font-weight: 700; letter-spacing: -0.02em; }
    .chart-change { font-size: 0.75rem; font-weight: 500; margin-top: 2px; }
    .chart-change.up   { color: var(--green); }
    .chart-change.down { color: var(--red); }
    .chart-wrap { position: relative; height: 190px; }
    .chart-periods { display: flex; gap: 4px; margin-top: 14px; }
    .period-btn {
      padding: 4px 10px;
      border-radius: 6px;
      font-size: 0.7rem;
      font-weight: 500;
      background: transparent;
      border: 1px solid var(--border2);
      color: var(--muted2);
      cursor: pointer;
      font-family: 'Montserrat', sans-serif;
      transition: all 0.15s;
    }
    .period-btn.active, .period-btn:hover { background: var(--blue-glow); border-color: var(--blue); color: var(--blue); }
    .chart-selector {
      display: flex;
      gap: 6px;
      margin-bottom: 16px;
      flex-wrap: wrap;
    }
    .idx-btn {
      padding: 5px 12px;
      border-radius: 8px;
      font-size: 0.75rem;
      font-weight: 500;
      background: var(--surface2);
      border: 1px solid var(--border2);
      color: var(--muted2);
      cursor: pointer;
      font-family: 'Montserrat', sans-serif;
      transition: all 0.15s;
    }
    .idx-btn.active, .idx-btn:hover { background: var(--blue-glow); border-color: var(--blue); color: var(--blue); }
    .chart-disclaimer { margin-top: 8px; font-size: 0.67rem; color: var(--muted); }

    /**** Members ****/
    .members-grid {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 10px;
    }
    .member-card {
      background: var(--surface2);
      border: 1px solid var(--border2);
      border-radius: 12px;
      padding: 16px 10px;
      text-align: center;
      transition: all 0.2s ease;
      cursor: default;
    }
    .member-card:hover { border-color: var(--blue); transform: translateY(-3px); }
    .member-avatar {
      width: 50px; height: 50px;
      border-radius: 50%;
      margin: 0 auto 2px;
      background: var(--surface);
      border: 2px solid var(--border2);
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.25rem;
      position: relative;
      background-image: url("pdp.jpg");
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center center;
    }
    .member-avatar img { width: 100%; height: 100%; object-fit: cover; }
    .member-status {
      position: absolute; bottom: 1px; right: 1px;
      width: 10px; height: 10px;
      border-radius: 50%; border: 2px solid var(--surface2);
    }
    .member-status.online  { background: var(--green); }
    .member-status.offline { background: var(--muted); }
    .member-status.away    { background: #fbbf24; }
    .member-name { font-size: 0.78rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .member-level {
      display: inline-block;
      margin-top: 5px;
      padding: 2px 7px;
      border-radius: 100px;
      font-size: 0.58rem;
      font-weight: 600;
      letter-spacing: 0.05em;
      text-transform: uppercase;
    }
    .lvl-legend  { background: rgba(251,191,36,0.12);  color: #fbbf24; border: 1px solid rgba(251,191,36,0.2); }
    .lvl-elite   { background: rgba(167,139,250,0.12); color: #a78bfa; border: 1px solid rgba(167,139,250,0.2); }
    .lvl-veteran { background: rgba(52,211,153,0.12);  color: var(--green); border: 1px solid rgba(52,211,153,0.2); }
    .lvl-membre  { background: rgba(91,138,245,0.12);  color: var(--blue);  border: 1px solid rgba(91,138,245,0.2); }
    .lvl-novice  { background: rgba(156,163,175,0.12); color: var(--muted2); border: 1px solid rgba(156,163,175,0.2); }

    /***** Footer section *****/
    .footer-section {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 12px;
    }
    .footer-block {
      background: rgba(22, 27, 39, 0.6);
      backdrop-filter: blur(12px);
      border: 1px solid var(--border2);
      border-radius: 12px;
      padding: 18px 20px;
      transition: border-color 0.2s;
    }
    .footer-block:hover { border-color: var(--border); }
    .footer-block-label {
      font-size: 0.62rem;
      font-weight: 600;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--muted);
      margin-bottom: 8px;
    }
    .footer-block-content {
      font-size: 0.88rem;
      color: var(--muted2);
      line-height: 1.5;
    }
    .footer-block-content a {
      color: var(--blue);
      text-decoration: none;
      font-size: 0.75rem;
      display: inline-block;
      margin-top: 6px;
      transition: opacity 0.15s;
    }
    .footer-block-content a:hover { opacity: 0.75; }
    .footer-credit {
      text-align: center;
      font-size: 0.72rem;
      color: var(--muted);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 10px;
    }

    .footer-credit > .devise {
      font-weight: 800;  
    }

    /**** Responsive ****/
    @media (max-width: 640px) {
      .countdown-grid  { grid-template-columns: repeat(2, 1fr); }
      .tickers-grid    { grid-template-columns: repeat(2, 1fr); }
      .members-grid    { grid-template-columns: repeat(2, 1fr); }
      .footer-section  { grid-template-columns: 1fr; }
      .w40 { max-width: 40px!important;}
    }
    @media (max-width: 380px) {
      .members-grid { grid-template-columns: repeat(2, 1fr); }
      .tickers-grid { grid-template-columns: repeat(1, 1fr); }
    }