*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --bg:      #0b0d14; --surface: #131720; --border:  #1e2535; --text:    #dde4f0;
  --muted:   #5a6a80; --green:   #00c96e; --red:     #ff4560; --orange:  #ff6200;
  --cyan:    #00cfff; --blue:    #3c78d8;
  --glass-bg: rgba(255,255,255,0.03); --glass-border: rgba(255,255,255,0.08);
}
:root.light-theme, body.light-theme {
  --bg:      #f8fafc; --surface: #ffffff; --border:  #cbd5e1; --text:    #0f172a;
  --muted:   #475569; --green:   #10b981; --red:     #ef4444; --orange:  #ea580c;
  --cyan:    #0284c7; --blue:    #2563eb;
  --glass-bg: rgba(255,255,255,0.85); --glass-border: rgba(0,0,0,0.12);
}
body {
  background: var(--bg); color: var(--text); font-family: 'Inter', -apple-system, 'Segoe UI', sans-serif;
  min-height: 100vh; display: flex; flex-direction: column; align-items: center;
  padding: 28px 16px 60px; -webkit-font-smoothing: antialiased; position: relative; overflow-x: hidden;
}

.bg-glow {
  position: absolute; width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(59,130,246,0.12) 0%, rgba(11,13,20,0) 70%);
  top: -200px; left: -200px; z-index: -1; border-radius: 50%; filter: blur(40px);
}
.bg-glow-right {
  position: absolute; width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(16,185,129,0.08) 0%, rgba(11,13,20,0) 70%);
  bottom: 10%; right: -100px; z-index: -1; border-radius: 50%; filter: blur(60px);
}

#clock { font-size: 56px; font-weight: 700; letter-spacing: 2px; text-align: center; margin-top: 10px; }
#dateLabel { font-size: 13px; color: var(--muted); margin-top: 6px; margin-bottom: 26px; text-align: center; text-transform: uppercase; letter-spacing: 1px; }

#statusBanner {
  width: 100%; max-width: 420px; background: var(--glass-bg); border: 1px solid var(--glass-border);
  border-radius: 16px; padding: 16px; display: flex; align-items: center; gap: 10px;
  font-size: 14px; font-weight: 500; color: var(--muted); margin-bottom: 12px;
  backdrop-filter: blur(10px);
}
#statusBanner.active { background: rgba(0,201,110,.08); border-color: var(--green); color: var(--green); flex-direction: column; align-items: flex-start; }
#statusBanner.done   { background: rgba(0,207,255,.06); border-color: var(--cyan);  color: var(--cyan); }
#statusBanner.error  { background: rgba(255,69,96,.08); border-color: var(--red);   color: var(--red); }

.status-row-1 { display: flex; align-items: center; gap: 10px; width: 100%; }
#dot { width: 9px; height: 9px; border-radius: 50%; background: var(--muted); flex-shrink: 0; }
#statusBanner.active #dot { background: var(--green); box-shadow: 0 0 8px var(--green); animation: blink 1.5s infinite; }
#statusBanner.done   #dot { background: var(--cyan); }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.2} }

/* Liczniki na żywo */
#liveTimers { display: none; margin-top: 10px; width: 100%; border-top: 1px solid rgba(0,201,110,.2); padding-top: 10px; }
.timer-row { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 4px; }
.timer-val { font-weight: 700; color: var(--text); }

#balanceBanner {
  width: 100%; max-width: 420px; background: rgba(60, 120, 216, 0.15); border: 1px solid rgba(60, 120, 216, 0.3);
  border-radius: 16px; padding: 14px 16px; display: none; align-items: center; justify-content: space-between;
  color: var(--text); margin-bottom: 22px; backdrop-filter: blur(10px);
}
.balance-label { font-size: 13px; font-weight: 600; color: var(--blue); text-transform: uppercase; letter-spacing: 0.5px; }
.balance-val { font-size: 22px; font-weight: 700; color: var(--text); }

.btn-row { display: flex; gap: 14px; width: 100%; max-width: 420px; margin-bottom: 14px; }
.btn-main {
  flex: 1; padding: 22px 10px; border: 1.5px solid; border-radius: 16px;
  font-size: 16px; font-weight: 700; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 7px;
  background: transparent; -webkit-tap-highlight-color: transparent; transition: transform .1s, opacity .2s;
}
.btn-main:active:not(:disabled) { transform: scale(0.95); }
.btn-main:disabled { opacity: .2; cursor: not-allowed; }
.btn-entry { color: var(--green); border-color: var(--green); }
.btn-break { color: #f1c40f; border-color: #f1c40f; }
.btn-exit  { color: var(--red);   border-color: var(--red); }

#btnUndo {
  width: 100%; max-width: 420px; background: transparent; border: 1px solid var(--border);
  color: var(--muted); border-radius: 11px; padding: 11px; font-size: 13px; font-weight: 500;
  cursor: pointer; margin-bottom: 20px; -webkit-tap-highlight-color: transparent;
}
#btnUndo:active { opacity: .6; }

#confirmOverlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.8); display: flex; align-items: center; justify-content: center;
  padding: 20px; z-index: 200;
}
.dialog { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 28px 22px; width: 100%; max-width: 320px; text-align: center; }
.dialog h3 { font-size: 17px; margin-bottom: 8px; }
.dialog p  { font-size: 13px; color: var(--muted); line-height: 1.5; margin-bottom: 22px; }
.dialog-btns { display: flex; gap: 10px; }
.dialog-btns button { flex: 1; padding: 13px; border-radius: 12px; font-size: 15px; font-weight: 600; cursor: pointer; border: 1.5px solid; -webkit-tap-highlight-color: transparent; }
.btn-cancel { background: transparent; border-color: var(--border); color: var(--muted); }
.btn-delete { background: rgba(255,69,96,.1); border-color: var(--red); color: var(--red); }

#dayCard { width: 100%; max-width: 420px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 16px; margin-bottom: 22px; }
.card-title { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 12px; }
.day-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.day-item { background: var(--glass-bg); border-radius: 10px; padding: 11px 12px; }
.day-label { font-size: 11px; color: var(--muted); margin-bottom: 3px; }
.day-value { font-size: 22px; font-weight: 700; }
.green  { color: var(--green); }
.orange { color: var(--orange); }

.section-title { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; width: 100%; max-width: 420px; margin-bottom: 8px; }
table { width: 100%; max-width: 420px; border-collapse: collapse; }
th { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .7px; padding: 6px 8px; text-align: left; border-bottom: 1px solid var(--border); }
td { font-size: 13px; padding: 9px 8px; border-bottom: 1px solid var(--glass-border); }
tr:last-child td { border-bottom: none; }
.ot-hi { color: var(--orange); font-weight: 600; }

.spin { width: 20px; height: 20px; border: 2.5px solid var(--glass-border); border-top-color: var(--text); border-radius: 50%; animation: rot .7s linear infinite; margin: 16px auto; }
@keyframes rot { to { transform: rotate(360deg); } }

#toast { position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%) translateY(70px); background: var(--surface); border: 1px solid var(--border); color: var(--text); padding: 12px 20px; border-radius: 30px; font-size: 14px; font-weight: 500; white-space: nowrap; opacity: 0; transition: transform .3s cubic-bezier(.175,.885,.32,1.275), opacity .3s; z-index: 999; max-width: 88vw; text-align: center; }
#toast.show { transform: translateX(-50%) translateY(0); opacity: 1; }
#toast.ok  { border-color: var(--green); color: var(--green); }
#toast.err { border-color: var(--red);   color: var(--red); }

/* Login Form Styles */
.login-container {
  width: 100%; max-width: 340px; background: var(--surface); border: 1px solid var(--border);
  border-radius: 14px; padding: 30px 24px; display: flex; flex-direction: column; gap: 20px;
  margin: auto; margin-top: 15vh; box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}
.login-container h2 { font-size: 24px; text-align: center; margin-bottom: 10px; font-weight: 700; color: var(--text); }
.input-group { display: flex; flex-direction: column; gap: 8px; }
.input-group label { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; }
.input-group input { 
  background: var(--bg); border: 1px solid var(--border); color: var(--text);
  padding: 14px 16px; border-radius: 10px; font-size: 15px; transition: border-color 0.2s;
  outline: none;
}
.input-group input:focus { border-color: var(--blue); }
.btn-submit {
  background: var(--blue); color: #fff; border: none; padding: 16px; border-radius: 10px;
  font-size: 16px; font-weight: 700; cursor: pointer; transition: opacity 0.2s; margin-top: 10px;
}
.btn-submit:active { opacity: 0.8; }
.login-error { color: var(--red); font-size: 13px; text-align: center; min-height: 20px; }
.password-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}
.password-wrapper input {
  width: 100%;
  padding-right: 42px;
}
.toggle-pwd-btn {
  position: absolute;
  right: 10px;
  background: transparent;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 18px;
  user-select: none;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* Animacje 5 minut przed końcem etatu */
@keyframes pulseCountdown {
  0% { transform: scale(1); box-shadow: 0 0 15px rgba(255, 120, 0, 0.3); }
  50% { transform: scale(1.02); box-shadow: 0 0 35px rgba(255, 120, 0, 0.7); }
  100% { transform: scale(1); box-shadow: 0 0 15px rgba(255, 120, 0, 0.3); }
}
@keyframes textGlow {
  0%, 100% { text-shadow: 0 0 10px rgba(255, 180, 0, 0.6); }
  50% { text-shadow: 0 0 25px rgba(255, 90, 0, 0.9), 0 0 40px rgba(255, 200, 0, 0.8); }
}
.countdown-active #clock {
  animation: textGlow 1.5s infinite ease-in-out;
  color: var(--orange) !important;
}
.countdown-card {
  background: linear-gradient(135deg, rgba(255, 98, 0, 0.15), rgba(255, 196, 0, 0.1));
  border: 2px solid var(--orange);
  border-radius: 16px;
  padding: 12px 20px;
  margin: 15px auto;
  max-width: 400px;
  width: 100%;
  text-align: center;
  animation: pulseCountdown 2s infinite ease-in-out;
  backdrop-filter: blur(10px);
}
.countdown-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--orange);
  text-transform: uppercase;
}
.countdown-timer {
  font-size: 32px;
  font-weight: 800;
  color: var(--text);
  font-family: monospace;
  margin-top: 4px;
}