:root{
  --bg: #0b0b0b;
  --panel: #141414;
  --panel2: #1a1a1a;
  --border: #2a2a2a;

  --text: #ffffff;
  --muted: #cfcfcf;
  --accent: #ff7a00;

  --icon-size: 25px;
  --hit-size: 44px;
  --delay: 5s;
  --pos-offset: 12px;
}

*{ box-sizing: border-box; }
html, body{ margin:0; padding:0; }

body{
  padding:20px;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

.container{ max-width:720px; margin:0 auto; }

.header{
  background: linear-gradient(180deg,#1a1a1a 0%,#0f0f0f 100%);
  border:1px solid var(--border);
  border-radius:16px;
  padding:16px 18px;
  margin-bottom:16px;
  text-align:center;
}
.header h1,
.header h2{
  margin:0;
  font-size:20px;
  font-weight:900;
  color: var(--accent);
}

h2{
  color: var(--accent);
  font-size:18px;
  font-weight:900;
  margin:0 0 10px;
}

p{ margin:0 0 12px; line-height:1.55; }
a{ color: var(--accent); text-decoration:none; font-weight:800; }
small{ color: var(--muted); }

.card,
.section{
  background: var(--panel);
  border:1px solid var(--border);
  border-radius:16px;
  padding:16px;
  margin-bottom:14px;
}

ul{ margin:0; padding-left:18px; }
li{ margin-bottom:8px; line-height:1.45; }

.badge{
  display:inline-block;
  background: var(--accent);
  color:#000;
  padding:4px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:900;
  margin-right:6px;
}

/* NAV */
.nav-wrap{
  position: sticky;
  top:0;
  z-index:999999;
  padding:10px 0 14px;
  background: linear-gradient(180deg, rgba(11,11,11,.98) 0%, rgba(11,11,11,.90) 100%);
}
.nav{
  max-width:720px;
  margin:0 auto;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.nav-btn{
  padding:8px 12px;
  border-radius:999px;
  border:1px solid var(--border);
  background:#000;
  color:#fff;
  font-weight:800;
  font-size:13px;
}
.nav-btn.active{
  border-color: var(--accent);
  background: rgba(255,122,0,.15);
}

/* TIMER + ICON */
.fixed-pos{
  position: fixed;
  top: var(--pos-offset);
  right: var(--pos-offset);
  width: var(--hit-size);
  height: var(--hit-size);
  display:grid;
  place-items:center;
  z-index:2147483647;
}

#timer{
  background:#000;
  border:1px solid var(--accent);
  border-radius:12px;
  color:#fff;
  font-weight:900;
  font-size:16px;
  animation: timerHide var(--delay) forwards;
}
#timer span{
  position:absolute;
  opacity:0;
  animation: showNum 1s linear forwards;
}
#timer .n5{animation-delay:0s;}
#timer .n4{animation-delay:1s;}
#timer .n3{animation-delay:2s;}
#timer .n2{animation-delay:3s;}
#timer .n1{animation-delay:4s;}

@keyframes showNum{
  0%{opacity:0; transform:scale(.9);}
  10%{opacity:1;}
  90%{opacity:1;}
  100%{opacity:0;}
}
@keyframes timerHide{ to{opacity:0; visibility:hidden;} }

#icon{
  opacity:0;
  pointer-events:none;
  animation: iconShow 0s forwards;
  animation-delay: var(--delay);
}
#icon img{
  width:var(--icon-size);
  height:var(--icon-size);
}
@keyframes iconShow{ to{opacity:1;} }

/* FORMS */
form{
  background: var(--panel2);
  border:1px solid var(--border);
  border-radius:16px;
  padding:14px;
}
input, textarea{
  width:100%;
  padding:10px 12px;
  margin-bottom:10px;
  background:#000;
  border:1px solid var(--border);
  color:#fff;
  border-radius:12px;
  font-size:16px;
}
button{
  width:100%;
  padding:12px;
  border-radius:12px;
  border:1px solid var(--accent);
  background: rgba(255,122,0,.2);
  color:#fff;
  font-weight:900;
  font-size:16px;
}

/* MOBILE */
@media(max-width:600px){
  body{padding:14px;}
  :root{
    --icon-size:25px;
    --hit-size:48px;
    --pos-offset:10px;
  }
}