:root {
  --bg: #0a0a0f;
  --surface: #111118;
  --card: #16161f;
  --border: #2a2a3a;
  --accent: #ff4d6d;
  --accent2: #00f5d4;
  --yellow: #f8c53a;
  --text: #e8e8f0;
  --muted: #5a5a7a;
  --glow: rgba(255,77,109,0.3);
  --glow2: rgba(0,245,212,0.2);
}
* { margin:0; padding:0; box-sizing:border-box; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'DM Sans', sans-serif;
  min-height: 100vh;
  overflow-x: hidden;
}
body::before {
  content:'';
  position:fixed; inset:0;
  background-image:
    linear-gradient(rgba(0,245,212,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,245,212,.03) 1px, transparent 1px);
  background-size: 40px 40px;
  animation: gridMove 20s linear infinite;
  pointer-events:none; z-index:0;
}
@keyframes gridMove { to { background-position: 0 40px; } }
body::after {
  content:'';
  position:fixed; inset:0;
  background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,.07) 2px, rgba(0,0,0,.07) 4px);
  pointer-events:none; z-index:999;
}
.wrapper {
  position:relative; z-index:1;
  max-width:760px;
  margin:0 auto;
  padding: 48px 24px 80px;
}
header { text-align:center; margin-bottom:40px; }
.logo {
  width:44px; height:44px;
  background:var(--accent);
  clip-path: polygon(20% 0%,80% 0%,100% 20%,100% 80%,80% 100%,20% 100%,0% 80%,0% 20%);
  display:inline-flex; align-items:center; justify-content:center;
  font-size:20px; margin-bottom:10px;
  animation: pulse 3s ease-in-out infinite;
  box-shadow: 0 0 24px var(--glow);
}
@keyframes pulse {
  0%,100% { box-shadow:0 0 24px var(--glow); }
  50%      { box-shadow:0 0 48px var(--glow), 0 0 80px rgba(255,77,109,.12); }
}
h1 {
  font-family:'Bebas Neue', cursive;
  font-size: clamp(48px,9vw,88px);
  letter-spacing:5px; line-height:1;
  background: linear-gradient(135deg, #ff4d6d 0%, #ff8fa0 40%, #00f5d4 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text;
}

.tagline {
  font-family:'Share Tech Mono', monospace;
  font-size:12px; color:var(--muted);
  letter-spacing:2px; margin-top:6px;
}
.blink { animation: blink 1s step-end infinite; }
@keyframes blink { 50% { opacity:0; } }
.chips {
  display:flex; flex-wrap:wrap;
  gap:8px; justify-content:center;
  margin-bottom:28px;
}
.chip {
  font-family:'Share Tech Mono', monospace;
  font-size:11px; letter-spacing:1px;
  padding:6px 14px;
  border:1px solid var(--border);
  border-radius:2px;
  background:var(--surface);
  color:var(--muted);
  cursor:pointer;
  transition:all .2s;
  text-transform:uppercase;
}
.chip:hover, .chip.active {
  border-color:var(--accent2);
  color:var(--accent2);
  background:rgba(0,245,212,.07);
  box-shadow:0 0 10px var(--glow2);
}
.card {
  background:var(--card);
  border:1px solid var(--border);
  border-radius:4px;
  padding:36px 32px;
  margin-bottom:20px;
  min-height:200px;
  display:flex; flex-direction:column; justify-content:center;
  position:relative; overflow:hidden;
}
.card::before {
  content:'';
  position:absolute; top:0; left:0;
  width:3px; height:100%;
  background:linear-gradient(180deg, var(--accent), transparent);
}
.card::after {
  content:'';
  position:absolute; top:-40%; right:-40%;
  width:260px; height:260px;
  background:radial-gradient(circle, rgba(255,77,109,.05), transparent 70%);
  pointer-events:none;
}
.card-label {
  font-family:'Share Tech Mono', monospace;
  font-size:10px; letter-spacing:3px;
  color:var(--accent); text-transform:uppercase;
  margin-bottom:18px;
  display:flex; align-items:center; gap:8px;
}
.card-label::after {
  content:''; flex:1; height:1px;
  background:linear-gradient(90deg, var(--border), transparent);
}
.excuse-text {
  font-size: clamp(18px, 3vw, 24px);
  font-weight:300; line-height:1.55;
  transition:opacity .2s;
}
.excuse-text.fade { opacity:.2; }
.excuse-text em { font-style:normal; color:var(--yellow); font-weight:600; }

.bs-bar {
  display:flex; align-items:center; gap:12px;
  margin-top:24px;
}
.bs-label {
  font-family:'Share Tech Mono', monospace;
  font-size:10px; letter-spacing:2px;
  color:var(--muted); white-space:nowrap;
}
.track {
  flex:1; height:4px;
  background:var(--border); border-radius:2px; overflow:hidden;
}
.fill {
  height:100%; width:0;
  background:linear-gradient(90deg, var(--accent2), var(--accent));
  border-radius:2px;
  transition:width .6s cubic-bezier(.34,1.56,.64,1);
}
.bs-pct {
  font-family:'Share Tech Mono', monospace;
  font-size:11px; color:var(--accent);
  min-width:34px; text-align:right;
}
.actions {
  display:grid;
  grid-template-columns:1fr 54px 54px;
  gap:10px; margin-bottom:32px;
}
.btn-main {
  font-family:'Bebas Neue', cursive;
  font-size:20px; letter-spacing:3px;
  padding:15px 28px;
  background:var(--accent);
  color:#fff; border:none; border-radius:3px;
  cursor:pointer; transition:all .2s;
}
.btn-main:hover {
  transform:translateY(-2px);
  box-shadow:0 8px 28px var(--glow);
}
.btn-main:active { transform:translateY(0); }

.btn-icon {
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:3px;
  font-size:18px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:all .2s; color:var(--muted);
}
.btn-icon:hover {
  border-color:var(--accent2);
  color:var(--accent2);
  transform:translateY(-2px);
}
.history-section { margin-top:36px; }
.sec-title {
  font-family:'Share Tech Mono', monospace;
  font-size:11px; letter-spacing:3px;
  color:var(--muted); margin-bottom:12px;
  text-transform:uppercase;
}
.hist-item {
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:3px;
  padding:11px 16px; margin-bottom:6px;
  font-size:13px; color:var(--muted);
  display:flex; align-items:center; gap:10px;
  animation:slideIn .3s ease;
  cursor:default;
  transition:all .2s;
}
.hist-item:hover { color:var(--text); background:var(--card); }
@keyframes slideIn { from { opacity:0; transform:translateX(-8px); } to { opacity:1; transform:translateX(0); } }
.dot {
  width:6px; height:6px;
  border-radius:50%; background:var(--accent);
  flex-shrink:0; opacity:.6;
}
@keyframes shake {
  20%  { transform:translateX(-4px); }
  40%  { transform:translateX(4px); }
  60%  { transform:translateX(-3px); }
  80%  { transform:translateX(3px); }
  100% { transform:translateX(0); }
}
.shake { animation:shake .35s ease; }

.toast {
  position:fixed; bottom:28px; left:50%;
  transform:translateX(-50%) translateY(16px);
  background:var(--card);
  border:1px solid var(--accent2);
  color:var(--accent2);
  font-family:'Share Tech Mono', monospace;
  font-size:12px; letter-spacing:1px;
  padding:10px 24px; border-radius:3px;
  opacity:0; transition:all .3s;
  pointer-events:none; z-index:9998;
  box-shadow:0 0 20px var(--glow2);
}
.toast.show {
  opacity:1;
  transform:translateX(-50%) translateY(0);
}
footer {
  text-align:center; margin-top:56px;
  font-family:'Share Tech Mono', monospace;
  font-size:10px; color:var(--muted);
  letter-spacing:2px; opacity:.4;
}