:root{
  --bg: #05070b;
  --fg: #cfe7ff;
  --muted: #8aa2b2;
  --accent: #59e1ff;
  --accent-2: #8a5dff;
  --danger: #ff4d6d;
  --ok: #78ffb7;
  --card: rgba(255,255,255,0.06);
  --glass: rgba(14, 26, 41, 0.45);
  --border: rgba(255,255,255,0.12);
  --shadow: 0 10px 35px rgba(0,0,0,0.45), inset 0 0 60px rgba(89,225,255,0.04);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body{
  margin:0;
  background: radial-gradient(1200px 800px at 80% 10%, rgba(89,225,255,0.08), transparent 60%),
              radial-gradient(800px 600px at 10% 90%, rgba(138,93,255,0.09), transparent 60%),
              var(--bg);
  color: var(--fg);
  font: 16px/1.5 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji";
}

.container{
  position: relative;
  min-height: 100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding: 4rem 1rem 3rem;
  gap: 2rem;
}

/* Futuristic background grid */
.bg-grid{
  position: fixed; inset:0;
  background:
    linear-gradient(transparent 95%, rgba(89,225,255,0.15) 95%) 0 0 / 24px 24px,
    linear-gradient(90deg, transparent 95%, rgba(138,93,255,0.15) 95%) 0 0 / 24px 24px;
  opacity: 0.25;
  pointer-events:none;
  animation: drift 50s linear infinite;
}
@keyframes drift{
  0% { transform: translateY(0) }
  100% { transform: translateY(24px) }
}

/* CRT scanline vibe */
.scanlines{
  position: fixed; inset:0;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,0.02) 0px, rgba(255,255,255,0.02) 1px, transparent 2px, transparent 3px);
  mix-blend-mode: overlay;
  pointer-events:none;
}

.glow-orb{
  position: fixed;
  width: 600px; height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(89,225,255,0.18), rgba(138,93,255,0.08), transparent 70%);
  filter: blur(40px);
  right: -150px; top: -120px;
  pointer-events:none;
  animation: float 18s ease-in-out infinite alternate;
}
@keyframes float{
  0% { transform: translate3d(0,0,0) }
  100% { transform: translate3d(-30px, 20px, 0) }
}

.brand{
  text-align:center;
}
.logo{
  display:inline-flex; align-items:center; justify-content:center;
  width: 80px; height:80px; border-radius: 20px;
  border: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  box-shadow: var(--shadow);
  margin: 0 auto 0.8rem;
}
.logo .goblin{ font-size: 32px; filter: drop-shadow(0 0 10px rgba(89,225,255,0.5)); }
.brand h1{
  font-size: clamp(28px, 3.5vw, 44px);
  margin: 0;
  letter-spacing: 0.4px;
}
.brand .accent{ color: var(--accent); text-shadow: 0 0 12px rgba(89,225,255,0.35); }
.brand .tag{
  margin: 0.3rem 0 0;
  color: var(--muted);
}

input.time {
  width: 8ch;             /* character-based width: great for HH:MM */
  font-size: 1rem;        /* adjust to taste */
  padding: .35rem .5rem;  /* bigger tap target */
  border-radius: 12px;
}

.panel{
  width: 100%;
  max-width: 560px;
  background: linear-gradient(180deg, var(--glass), rgba(10,14,20,0.55));
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px) saturate(120%);
  padding: 1rem;
}

.tabs{
  display:flex; gap: 0.5rem;
  padding: 0.5rem; border-bottom: 1px solid var(--border);
}
.tab{
  flex:1; padding: 0.9rem 1rem;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.03);
  color: var(--fg);
  border-radius: 12px;
  cursor: pointer;
  transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease;
}
.tab:hover{ transform: translateY(-1px); }
.tab.active{
  background: linear-gradient(180deg, rgba(89,225,255,0.12), rgba(138,93,255,0.12));
  box-shadow: 0 0 0 1px rgba(89,225,255,0.35) inset, 0 0 22px rgba(89,225,255,0.12);
}

.tab-panels{ padding: 1rem; }
.form{ display:none; }
.form.show{ display:block; animation: fadeIn 180ms ease forwards; }
@keyframes fadeIn{ from{ opacity:0; transform: translateY(4px); } to{ opacity:1; transform:none; } }

.field{ display:flex; flex-direction:column; gap: 0.4rem; margin: 0 0 1rem; }
label{ color: var(--muted); font-size: 0.95rem; }
input{
  width:100%;
  padding: 0.9rem 1rem;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.04);
  color: var(--fg);
  outline: none;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
input:focus{
  border-color: rgba(89,225,255,0.6);
  box-shadow: 0 0 0 3px rgba(89,225,255,0.18);
}
.help{ color: var(--muted); font-size: 0.8rem; }

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap: 0.5rem;
  padding: 0.85rem 1.1rem;
  border-radius: 12px;
  border: 1px solid var(--border);
  cursor:pointer;
  transition: transform 120ms ease, box-shadow 120ms ease;
  user-select:none;
}
.btn:hover{ transform: translateY(-1px); }
.btn:active{ transform: translateY(0); }

.btn.primary{
  width:100%;
  background: linear-gradient(180deg, rgba(89,225,255,0.28), rgba(89,225,255,0.16));
  box-shadow: 0 0 0 1px rgba(89,225,255,0.35) inset, 0 10px 30px rgba(89,225,255,0.12);
  color: #001018;
}
.btn.secondary{
  width:100%;
  background: linear-gradient(180deg, rgba(138,93,255,0.28), rgba(138,93,255,0.16));
  box-shadow: 0 0 0 1px rgba(138,93,255,0.35) inset, 0 10px 30px rgba(138,93,255,0.12);
  color: #0d061a;
}

.hint{ color: var(--muted); margin: 0.75rem 0 0; }
.muted{ opacity: 0.75; }
.status{ min-height: 1.25rem; margin: 0.75rem 0 0; font-size: 0.95rem; }
.status.ok{ color: var(--ok); text-shadow: 0 0 8px rgba(120,255,183,0.25); }
.status.err{ color: var(--danger); text-shadow: 0 0 8px rgba(255,77,109,0.2); }

.footer{ text-align:center; color: var(--muted); }
.mono{ font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; }