/* ============================================================
   DARKROOM TIMER - 7 SEGMENT VERSION
   ============================================================ */

:root{
  --bg: #050505;

  --panelTop: #151515;
  --panelMid: #0d0d0d;
  --panelBorder: rgba(255,255,255,0.14);

  --text: rgba(255,255,255,0.92);
  --muted: rgba(255,255,255,0.62);

  --red: #ff3b30;
  --amber: #ffcc00;
  --green: #32d74b;

  --digitOn: rgba(255, 180, 70, 0.95);
  --digitOff: rgba(255, 180, 70, 0.06);

  --glow1: rgba(255, 170, 60, 0.45);
  --glow2: rgba(255, 220, 120, 0.16);
}

html, body{
  margin: 0;
  padding: 0;
  background: radial-gradient(circle at 50% 30%, #0b0b0b 0%, var(--bg) 70%);
  height: 100%;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  color: var(--text);
  overflow: hidden;
}

.screen{
  display: none;
  height: 100dvh;
  width: 100vw;
  box-sizing: border-box;
  padding: 12px;
}

.screen.active{
  display: flex;
  justify-content: center;
  align-items: center;
}

.panel{
  height: 100%;
  border-radius: 24px;
  background: linear-gradient(180deg, var(--panelTop), var(--panelMid));
  border: 1px solid var(--panelBorder);
  box-shadow:
    0 20px 60px rgba(0,0,0,0.75),
    inset 0 1px 0 rgba(255,255,255,0.08);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.panel.full{
  width: 100%;
}

.panelHeader{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.panelFooter{
  display: flex;
  gap: 12px;
  padding: 12px;
  border-top: 1px solid rgba(255,255,255,0.06);
}

.panelFooter button{
  flex: 1;
}

.brandTop{
  font-weight: 950;
  letter-spacing: 4px;
  font-size: 18px;
}

.brandSub{
  margin-top: 2px;
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--muted);
}

/* ============================================================
   Buttons
   ============================================================ */
.hwBtn{
  background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.03));
  border: 1px solid rgba(255,255,255,0.16);
  color: rgba(255,255,255,0.92);
  padding: 14px 16px;
  border-radius: 18px;
  font-weight: 950;
  letter-spacing: 1.5px;
  font-size: 15px;
  box-shadow:
    0 10px 25px rgba(0,0,0,0.55),
    inset 0 1px 0 rgba(255,255,255,0.12);
}

.hwBtn.small{
  padding: 10px 12px;
  border-radius: 14px;
  font-size: 13px;
}

.hwBtn.primary{
  border: 1px solid rgba(50,215,75,0.35);
  background: linear-gradient(180deg, rgba(50,215,75,0.25), rgba(50,215,75,0.10));
  color: rgba(220,255,220,0.95);
}

.hwBtn.danger{
  border: 1px solid rgba(255,59,48,0.35);
  background: linear-gradient(180deg, rgba(255,59,48,0.18), rgba(255,59,48,0.08));
  color: rgba(255,200,200,0.95);
}

.hwBtn:active{
  transform: translateY(2px);
}

/* ============================================================
   Setup Screen
   ============================================================ */
.setupScroll{
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 12px;
}

.setupGrid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.stepCard{
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.03);
  border-radius: 18px;
  padding: 14px;
}

.stepRow{
  display: flex;
  gap: 10px;
  align-items: center;
}

.stepRow input{
  width: 100%;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(0,0,0,0.55);
  color: rgba(255,255,255,0.92);
  font-size: 16px;
  outline: none;
}

.smallInputs{
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.smallInputs input{
  width: 100%;
  text-align: center;
  font-size: 16px;
}

.stepActions{
  display: flex;
  gap: 10px;
  margin-top: 12px;
}

.stepActions button{
  flex: 1;
  padding: 10px;
  border-radius: 14px;
  font-weight: 950;
  font-size: 13px;
  letter-spacing: 1px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.80);
}

.stepActions button.delete{
  border: 1px solid rgba(255,59,48,0.30);
  color: rgba(255,180,180,0.90);
}

.hintText{
  text-align: center;
  font-size: 11px;
  letter-spacing: 1px;
  color: rgba(255,255,255,0.35);
  padding: 0 12px 10px;
}

/* ============================================================
   Timer Display
   ============================================================ */
.displayFrame{
  flex: 1;
  margin: 12px;
  border-radius: 22px;
  background: radial-gradient(circle at 50% 35%, rgba(255,80,60,0.12), rgba(0,0,0,0.92));
  border: 1px solid rgba(255,80,60,0.16);
  box-shadow:
    inset 0 0 70px rgba(255,60,30,0.10),
    0 0 50px rgba(255,40,20,0.10);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 16px;
}

.stepName{
  font-size: clamp(16px, 2.8vw, 30px);
  letter-spacing: 2px;
  color: rgba(255,200,180,0.75);
  margin-bottom: 14px;
  text-transform: uppercase;
}

.statusText{
  margin-top: 14px;
  font-size: clamp(13px, 2.5vw, 24px);
  color: rgba(255,210,190,0.55);
  letter-spacing: 1px;
}

/* ============================================================
   7 Segment Display
   ============================================================ */
.sevenSegFrame{
  padding: 10px 14px;
  border-radius: 18px;
  border: 1px solid rgba(255,80,55,0.15);
  background: rgba(0,0,0,0.55);
  box-shadow: inset 0 0 45px rgba(255,60,30,0.08);
}

.sevenSeg{
  display: flex;
  gap: 14px;
  align-items: center;
}

.digit{
  position: relative;
  width: clamp(52px, 8vw, 95px);
  height: clamp(90px, 14vw, 170px);
  filter: drop-shadow(0 0 10px var(--glow1)) drop-shadow(0 0 30px var(--glow2));
}

.seg{
  position: absolute;
  background: var(--digitOff);
  border-radius: 999px;
  transition: background 0.15s ease;
}

.seg.on{
  background: var(--digitOn);
}

.seg.a{ top: 0; left: 12%; width: 76%; height: 10%; }
.seg.d{ bottom: 0; left: 12%; width: 76%; height: 10%; }
.seg.g{ top: 45%; left: 12%; width: 76%; height: 10%; }

.seg.f{ top: 6%; left: 0; width: 14%; height: 44%; }
.seg.b{ top: 6%; right: 0; width: 14%; height: 44%; }
.seg.e{ bottom: 6%; left: 0; width: 14%; height: 44%; }
.seg.c{ bottom: 6%; right: 0; width: 14%; height: 44%; }

.colon{
  width: clamp(14px, 2vw, 24px);
  height: clamp(90px, 14vw, 170px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 18%;
  opacity: 0.9;
  filter: drop-shadow(0 0 10px var(--glow1));
}

.colonDot{
  width: 100%;
  aspect-ratio: 1/1;
  border-radius: 999px;
  background: var(--digitOn);
  box-shadow: 0 0 20px var(--glow1);
}

/* ============================================================
   Progress
   ============================================================ */
.progressFrame{
  margin: 0 12px 12px;
  border-radius: 999px;
  height: 8px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(0,0,0,0.4);
  overflow: hidden;
}

.progressBar{
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, rgba(255,59,48,0.9), rgba(255,204,0,0.85));
  box-shadow: 0 0 16px rgba(255,59,48,0.35);
  transition: width 0.25s linear;
}

/* ============================================================
   Status Lights
   ============================================================ */
.statusLights{
  display: flex;
  align-items: center;
  gap: 8px;
}

.lightLabel{
  font-size: 10px;
  letter-spacing: 2px;
  color: rgba(255,255,255,0.45);
  margin-left: 6px;
}

.light{
  width: 14px;
  height: 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.05);
  box-shadow: inset 0 0 6px rgba(0,0,0,0.7);
}

.light.on.green{
  background: rgba(50,215,75,0.95);
  box-shadow: 0 0 14px rgba(50,215,75,0.45);
}

.light.on.yellow{
  background: rgba(255,204,0,0.95);
  box-shadow: 0 0 14px rgba(255,204,0,0.40);
}

.light.on.red{
  background: rgba(255,59,48,0.95);
  box-shadow: 0 0 14px rgba(255,59,48,0.45);
}

/* ============================================================
   Modal
   ============================================================ */
.modal{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.75);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 16px;
  box-sizing: border-box;
}

.modal.hidden{ display: none; }

.modalPanel{
  width: min(900px, 100%);
  max-height: 80dvh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 22px;
  background: linear-gradient(180deg, #161616, #0b0b0b);
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 30px 80px rgba(0,0,0,0.75);
  padding: 14px;
}

.modalHeader{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.modalTitle{
  font-weight: 950;
  letter-spacing: 4px;
}

.presetList{
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 12px;
}

.presetItem{
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 18px;
  background: rgba(255,255,255,0.03);
  padding: 14px;
}

.presetItemTitle{
  font-weight: 950;
  letter-spacing: 1px;
  margin-bottom: 4px;
}

.presetItemDesc{
  color: rgba(255,255,255,0.55);
  font-size: 13px;
  margin-bottom: 10px;
}

/* ============================================================
   Grain overlay
   ============================================================ */
.grain{
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.10;
  background-image:
    repeating-radial-gradient(circle at 20% 30%, rgba(255,255,255,0.06), rgba(255,255,255,0.00) 2px),
    repeating-radial-gradient(circle at 80% 70%, rgba(255,255,255,0.05), rgba(255,255,255,0.00) 3px);
  mix-blend-mode: overlay;
}


/* Blink colon (like real hardware timer) */
.colon.blinkOff {
  opacity: 0.12;
  filter: none;
}

.colon.blinkOff .colonDot {
  background: rgba(255,80,55,0.20);
  box-shadow: none;
}


/* ===== Warning blink under 10 seconds ===== */
.sevenSegFrame.warnBlink {
  animation: warnPulse 0.5s infinite;
}

@keyframes warnPulse {
  0%   { transform: scale(1); box-shadow: inset 0 0 45px rgba(255,60,30,0.10), 0 0 0 rgba(255,50,25,0.0); }
  50%  { transform: scale(1.01); box-shadow: inset 0 0 60px rgba(255,60,30,0.16), 0 0 25px rgba(255,50,25,0.22); }
  100% { transform: scale(1); box-shadow: inset 0 0 45px rgba(255,60,30,0.10), 0 0 0 rgba(255,50,25,0.0); }
}

/* ===== Retro LCD label for step name ===== */
.stepName {
  padding: 10px 14px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(160, 255, 190, 0.14), rgba(30, 80, 40, 0.10));
  border: 1px solid rgba(120, 255, 170, 0.18);
  color: rgba(190, 255, 210, 0.80);
  text-shadow: 0 0 10px rgba(120,255,170,0.12);
  box-shadow: inset 0 0 22px rgba(0,0,0,0.6);
  font-weight: 900;
}


/* ===== LCD Font ===== */
.stepName {
  font-family: "Share Tech Mono", monospace;
  letter-spacing: 2px;
}

/* ===== LCD scanlines + subtle ghosting ===== */
.stepName::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.stepName {
  position: relative;
  overflow: hidden;
}

.stepName::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,0.0) 0px,
    rgba(0,0,0,0.0) 2px,
    rgba(0,0,0,0.18) 3px
  );
  opacity: 0.55;
  mix-blend-mode: overlay;
  pointer-events: none;
}

.stepName span {
  display: inline-block;
  filter: drop-shadow(0 0 8px rgba(120,255,170,0.18));
}

/* ===== slight LCD flicker ===== */
@keyframes lcdFlicker {
  0% { opacity: 0.98; }
  50% { opacity: 0.90; }
  100% { opacity: 0.98; }
}

.stepName {
  animation: lcdFlicker 3.5s infinite;
}

/* ===== Under 10 seconds: blink digits (no movement) ===== */
.sevenSegFrame.blinkWarn .digit,
.sevenSegFrame.blinkWarn .colonDot {
  animation: hardBlink 0.5s steps(1, end) infinite;
}

@keyframes hardBlink {
  0% { opacity: 1; }
  50% { opacity: 0.15; }
  100% { opacity: 1; }
}


/* ===== 7SEG Hardware upgrade (amber LED) ===== */
.seg {
  clip-path: polygon(8% 0%, 92% 0%, 100% 50%, 92% 100%, 8% 100%, 0% 50%);
  opacity: 0.85;
}

.seg.on {
  opacity: 1;
  box-shadow: 0 0 18px var(--glow1), 0 0 45px var(--glow2);
}

/* Slight burn-in: off segments are faintly visible */
.seg {
  background: color-mix(in srgb, var(--digitOff) 85%, rgba(255,255,255,0.02));
}

/* stronger display bloom */
.sevenSegFrame {
  box-shadow: inset 0 0 55px rgba(255, 170, 60, 0.12);
}

/* subtle random-ish shimmer */
@keyframes segShimmer {
  0% { filter: drop-shadow(0 0 10px var(--glow1)); }
  50% { filter: drop-shadow(0 0 16px var(--glow1)) drop-shadow(0 0 32px var(--glow2)); }
  100% { filter: drop-shadow(0 0 10px var(--glow1)); }
}

.digit {
  animation: segShimmer 4.2s infinite;
}