:root{
  --bg:#0a0c10;
  --bg-grid: rgba(124,92,255,0.05);
  --surface:#12151c;
  --surface-raised:#181c26;
  --border:#232735;
  --border-soft: rgba(255,255,255,0.06);
  --violet:#7c5cff;
  --violet-soft: rgba(124,92,255,0.16);
  --teal:#2fe6c4;
  --teal-soft: rgba(47,230,196,0.14);
  --coral:#ff6b5c;
  --coral-soft: rgba(255,107,92,0.14);
  --text:#f2f3f7;
  --text-muted:#8b90a3;
  --text-dim:#565c70;
  --font-display:'Chakra Petch', sans-serif;
  --font-body:'Sora', sans-serif;
  --font-mono:'JetBrains Mono', monospace;
}

*{box-sizing:border-box;}

html, body{
  margin:0; padding:0;
  min-height:100%;
  background:
    radial-gradient(circle at 15% 0%, rgba(124,92,255,0.10), transparent 45%),
    radial-gradient(circle at 85% 15%, rgba(47,230,196,0.07), transparent 40%),
    var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  line-height:1.5;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  background-image:
    linear-gradient(var(--bg-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--bg-grid) 1px, transparent 1px);
  background-size:48px 48px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, black 40%, transparent 90%);
  pointer-events:none;
  z-index:0;
}

a{ color:inherit; text-decoration:none; }

/* ---------- HEADER / NAV ---------- */
.header-wrapper{
  position:sticky; top:0; z-index:50;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:0 32px;
  height:72px;
  background:rgba(10,12,16,0.72);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border-soft);
  position:relative;
}
.header-wrapper::before{
  content:"● LEXZ";
  font-family:var(--font-display);
  font-weight:700;
  font-size:18px;
  letter-spacing:.5px;
  color:var(--text);
  white-space:nowrap;
}
.header-wrapper::before{
  color:var(--text);
}

.navbar{
  flex:1;
  background:none;
}
.navbar nav ul{
  list-style:none;
  display:flex;
  gap:4px;
  margin:0;
  padding:0;
  flex-wrap:wrap;
}
.navbar nav ul li a{
  display:inline-block;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:1.5px;
  text-transform:uppercase;
  color:var(--text-muted);
  padding:9px 14px;
  border-radius:6px;
  transition:.2s ease;
}
.navbar nav ul li a:hover{
  color:var(--text);
  background:var(--surface-raised);
}

.clock{
  font-family:var(--font-mono);
  font-size:15px;
  letter-spacing:2px;
  color:var(--teal);
  background:var(--surface);
  border:1px solid var(--border);
  padding:8px 14px;
  border-radius:8px;
  text-shadow:0 0 10px rgba(47,230,196,0.35);
  white-space:nowrap;
}

.ui-toggle{
  display:flex;
  gap:6px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:8px;
  padding:3px;
}
.ui-toggle button{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:1px;
  text-transform:uppercase;
  color:var(--text-muted);
  background:transparent;
  border:none;
  border-radius:6px;
  padding:7px 12px;
  cursor:pointer;
  transition:.2s ease;
}
.ui-toggle button:hover{ color:var(--text); }
.ui-toggle button.active{
  background:var(--violet-soft);
  color:var(--violet);
}

/* ---------- MAIN CONTAINER ---------- */
.container{
  position:relative;
  z-index:1;
  max-width:920px;
  margin:0 auto;
  padding:56px 24px 80px;
}

.container h2{
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(30px, 5vw, 44px);
  letter-spacing:-0.5px;
  text-align:center;
  margin:0 0 34px;
  background:linear-gradient(90deg, var(--violet), var(--teal));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.main{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:16px;
  padding:24px;
}

/* ---------- TABLE ---------- */
table{
  width:100%;
  border-collapse:collapse;
  font-family:var(--font-mono);
  font-size:13.5px;
}
thead th{
  text-align:left;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:1.5px;
  text-transform:uppercase;
  color:var(--text-dim);
  padding:10px 12px;
  border-bottom:1px solid var(--border);
}
tbody td{
  padding:11px 12px;
  border-bottom:1px solid var(--border-soft);
  color:var(--text-muted);
}
tbody tr:hover td{
  background:var(--surface-raised);
  color:var(--text);
}

/* ---------- SUMMARY STATS ---------- */
.summary{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:12px;
  margin-top:20px;
}
.summary > div{
  background:var(--surface-raised);
  border:1px solid var(--border);
  border-radius:10px;
  padding:14px 16px;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.summary > div span:first-child{
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:1px;
  text-transform:uppercase;
  color:var(--text-dim);
}
.summary > div span:last-child{
  font-family:var(--font-display);
  font-weight:600;
  font-size:20px;
  color:var(--text);
}
/* highlight overbreak in coral */
.summary > div:last-child span:last-child{
  color:var(--coral);
}
/* highlight remaining time in teal */
.summary > div:nth-child(2) span:last-child{
  color:var(--teal);
}

/* ---------- BUTTONS ---------- */
.timestamp{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:24px;
}
.timestamp button{
  font-family:var(--font-display);
  font-weight:600;
  font-size:13px;
  letter-spacing:.5px;
  padding:12px 20px;
  border-radius:9px;
  cursor:pointer;
  border:1px solid var(--border);
  background:var(--surface-raised);
  color:var(--text);
  transition:.2s ease;
}
.timestamp button:hover:not(:disabled){
  transform:translateY(-1px);
  border-color:var(--violet);
}
.timestamp button:disabled{
  opacity:.4;
  cursor:not-allowed;
}

#outButton{
  background:linear-gradient(135deg, var(--coral), #d64536);
  border-color:transparent;
  color:#fff;
}
#outButton:hover:not(:disabled){
  box-shadow:0 8px 22px -6px rgba(255,107,92,0.5);
}

#inButton{
  background:linear-gradient(135deg, var(--teal), #17b89c);
  border-color:transparent;
  color:#06110e;
}
#inButton:hover:not(:disabled){
  box-shadow:0 8px 22px -6px rgba(47,230,196,0.5);
}

#saveButton{
  background:linear-gradient(135deg, var(--violet), #5b3fe0);
  border-color:transparent;
  color:#fff;
}
#saveButton:hover:not(:disabled){
  box-shadow:0 8px 22px -6px rgba(124,92,255,0.5);
}

#clearButton:hover:not(:disabled){
  border-color:var(--coral);
  color:var(--coral);
  background:var(--coral-soft);
}

#toggleButton:hover,
#bgButton:hover,
#removeBgButton:hover{
  border-color:var(--teal);
  color:var(--teal);
  background:var(--teal-soft);
}

/* ---------- ERROR MESSAGE ---------- */
.error-message{
  display:none;
  margin-top:18px;
  padding:12px 16px;
  border-radius:9px;
  border:1px solid rgba(255,107,92,0.35);
  background:var(--coral-soft);
  color:var(--coral);
  font-family:var(--font-mono);
  font-size:12.5px;
}
.error-message.show{
  display:block;
}

/* ---------- FIREWORKS / CONTACT PAGE ---------- */
#contact{
  position:relative;
  z-index:1;
  min-height:70vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:18px;
  text-align:center;
  cursor:pointer;
}
#instructions{
  font-family:var(--font-display);
  font-weight:600;
  font-size:20px;
  color:var(--text-muted);
  line-height:1.5;
}
#clickCounter{
  font-family:var(--font-mono);
  font-size:13px;
  letter-spacing:1px;
  color:var(--teal);
  background:var(--surface);
  border:1px solid var(--border);
  padding:8px 16px;
  border-radius:8px;
}
#eventList{
  display:flex;
  flex-direction:column;
  gap:6px;
  font-family:var(--font-mono);
  font-size:11.5px;
  letter-spacing:1px;
  text-transform:uppercase;
  color:var(--violet);
}

/* ---------- FOOTER ---------- */
.footer{
  position:relative;
  z-index:1;
  border-top:1px solid var(--border-soft);
  padding:22px 0;
  text-align:center;
}
.footer p{
  margin:0;
  font-family:var(--font-mono);
  font-size:11.5px;
  color:var(--text-dim);
}

@media (max-width:720px){
  .header-wrapper{
    flex-wrap:wrap;
    height:auto;
    padding:14px 20px;
  }
  .header-wrapper::before{
    order:1;
  }
  .clock{ order:2; margin-left:auto; }
  .navbar{ order:3; flex-basis:100%; }
  .summary{ grid-template-columns:repeat(2, 1fr); }
  table{ font-size:12px; }
  thead th, tbody td{ padding:8px 6px; }
}

@media (prefers-reduced-motion: reduce){
  *{ transition-duration:.01ms !important; }
}

/* ---------- LIGHT MODE ---------- */
body.light-mode{
  background:
    radial-gradient(circle at 15% 0%, rgba(124,92,255,0.06), transparent 45%),
    radial-gradient(circle at 85% 15%, rgba(47,230,196,0.05), transparent 40%),
    #f4f5f9;
  color:#1c1e26;
}
body.light-mode::before{
  background-image:
    linear-gradient(rgba(124,92,255,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(124,92,255,0.06) 1px, transparent 1px);
}
body.light-mode .header-wrapper{
  background:rgba(244,245,249,0.8);
  border-bottom:1px solid rgba(0,0,0,0.08);
}
body.light-mode .header-wrapper::before,
body.light-mode .container h2{
  color:#1c1e26;
}
body.light-mode .navbar nav ul li a{ color:#5c6070; }
body.light-mode .navbar nav ul li a:hover{ color:#1c1e26; background:#e8e9f0; }
body.light-mode .clock{
  color:#0d8f78;
  background:#fff;
  border-color:#dcdde6;
  text-shadow:none;
}
body.light-mode .ui-toggle{ background:#fff; border-color:#dcdde6; }
body.light-mode .ui-toggle button{ color:#5c6070; }
body.light-mode .main{ background:#fff; border-color:#dcdde6; }
body.light-mode thead th{ color:#8b8f9e; border-bottom-color:#dcdde6; }
body.light-mode tbody td{ color:#3a3d4a; border-bottom-color:#eceef3; }
body.light-mode tbody tr:hover td{ background:#f4f5f9; color:#1c1e26; }
body.light-mode .summary > div{ background:#f4f5f9; border-color:#dcdde6; }
body.light-mode .summary > div span:first-child{ color:#8b8f9e; }
body.light-mode .summary > div span:last-child{ color:#1c1e26; }
body.light-mode .timestamp button{ background:#f4f5f9; border-color:#dcdde6; color:#1c1e26; }
body.light-mode .error-message{ background:var(--coral-soft); }
body.light-mode #clickCounter{ background:#fff; border-color:#dcdde6; }
body.light-mode .footer{ border-top-color:rgba(0,0,0,0.08); }
body.light-mode .footer p{ color:#8b8f9e; }