:root {
  --bg: #FFFFFF;
  --card: #F9FAFB;
  --primary: #D35400; /* Burnt Orange */
  --text-main: #1C1C1E;
  --text-dim: #8E8E93;
  --border: #E5E7EB;
}

/* Base Setup */
* { 
  box-sizing: border-box; 
  -webkit-tap-highlight-color: transparent; 
}

body { 
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", sans-serif; 
  background-color: var(--bg);
  margin: 0;
  display: flex;
  justify-content: center;
  min-height: 100vh;
  padding: 60px 20px;
}

.app { 
  width: 100%; 
  max-width: 460px; 
}

/* Header */
.top-bar { 
  display: flex; 
  flex-direction: column; 
  align-items: center; 
  gap: 16px; 
  margin-bottom: 50px; 
}

.logo-container { 
  width: 80px; 
  height: 80px; 
  background: var(--primary); 
  border-radius: 22px; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  padding: 8px;
  box-shadow: 0 10px 25px rgba(211, 84, 0, 0.2);
}

.app-logo { 
  width: 100%; 
  height: auto; 
  border-radius: 12px; 
}

.top-bar h1 { 
  font-size: 32px; 
  font-weight: 800; 
  letter-spacing: -0.05em; 
  margin: 0; 
}

/* Strava Card */
.strava-card { 
  background: #FFF5F0; 
  border: 1px solid rgba(211, 84, 0, 0.15); 
  border-radius: 24px; 
  padding: 24px; 
  margin-bottom: 30px; 
}

.stat-label { 
  font-size: 10px; 
  font-weight: 800; 
  color: var(--primary); 
  letter-spacing: 0.1em; 
  text-transform: uppercase; 
}

.activity-title { 
  font-size: 20px; 
  font-weight: 800; 
  margin-top: 8px; 
}

.activity-footer { 
  margin-top: 15px; 
  padding-top: 12px; 
  border-top: 1px dashed rgba(211, 84, 0, 0.2); 
  display: flex; 
  justify-content: space-between; 
  font-size: 12px; 
  color: var(--text-dim); 
}

.activity-link { 
  text-decoration: none; 
  color: inherit; 
}

/* Project Selector Fix (Specifically for macOS/Chrome/Safari) */
.project-header { 
  width: 100%; 
  margin: 20px 0; 
  display: flex; 
  flex-direction: column; 
}

#projectSelect {
  display: block;
  width: 100% !important; /* Force full width on Mac */
  -webkit-appearance: none; /* Remove Safari default styling */
  appearance: none;
  background-color: var(--card);
  border: 1px solid var(--border);
  padding: 18px;
  border-radius: 16px;
  font-weight: 700;
  font-size: 16px;
  color: var(--text-main);
  cursor: pointer;
  /* Custom Orange Arrow */
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23D35400' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 20px center;
  background-size: 18px;
}

#projectSelect:focus { 
  outline: none; 
  border-color: var(--primary); 
}

/* Admin UI Controls */
.action-bar { 
  display: grid; 
  grid-template-columns: repeat(4, 1fr); 
  gap: 8px; 
  margin: 20px 0; 
}

.action-btn { 
  background: white; 
  color: var(--text-dim); 
  border: 1px solid var(--border); 
  padding: 10px 0; 
  border-radius: 10px; 
  font-size: 10px; 
  font-weight: 700; 
  text-transform: uppercase; 
  cursor: pointer; 
}

.input-group { 
  display: flex; 
  gap: 10px; 
  margin: 20px 0 40px 0; 
  background: var(--card); 
  padding: 8px; 
  border-radius: 16px; 
  border: 1px solid var(--border); 
}

input[type="text"] { 
  flex: 1; 
  padding: 12px; 
  border: none; 
  font-size: 16px; 
  background: transparent; 
  outline: none; 
}

#addBtn { 
  background: var(--primary); 
  color: white; 
  border: none; 
  padding: 10px 20px; 
  border-radius: 12px; 
  font-weight: 700; 
  cursor: pointer; 
}

/* Login Screen Overlay */
.login-screen {
    position: fixed; 
    top: 0; left: 0; 
    width: 100%; height: 100%;
    background: rgba(255, 255, 255, 0.95); 
    backdrop-filter: blur(12px);
    display: none; 
    justify-content: center; 
    align-items: center; 
    z-index: 9999;
}

.login-box { 
  background: white; 
  padding: 40px; 
  border-radius: 28px; 
  text-align: center; 
  box-shadow: 0 25px 50px rgba(0,0,0,0.1); 
  width: 90%; 
  max-width: 340px; 
}

.login-box h2 { 
  color: var(--primary); 
  margin: 0 0 10px 0; 
}

.login-box input { 
  width: 100%; 
  padding: 15px; 
  border-radius: 14px; 
  border: 1px solid var(--border); 
  margin-bottom: 15px; 
  text-align: center; 
  font-size: 20px; 
  letter-spacing: 0.2em; 
}

.login-box button { 
  width: 100%; 
  background: var(--primary); 
  color: white; 
  border: none; 
  padding: 16px; 
  border-radius: 14px; 
  font-weight: 700; 
  cursor: pointer; 
}

.ghost-btn { 
  background: transparent !important; 
  color: var(--text-dim) !important; 
  margin-top: 10px; 
  border: none; 
}

/* Floating Lock Toggle Button */
.lock-toggle { 
  position: fixed; 
  bottom: 25px; 
  right: 25px; 
  width: 50px; 
  height: 50px; 
  background: white; 
  border: 1px solid var(--border); 
  border-radius: 50%; 
  box-shadow: 0 5px 15px rgba(0,0,0,0.1); 
  cursor: pointer; 
  font-size: 20px; 
  z-index: 100; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
}

/* Training List & Strike-through */
.week-heading h3 { 
  font-size: 13px; 
  text-transform: uppercase; 
  color: var(--primary); 
  margin: 40px 0 12px 4px; 
  letter-spacing: 0.1em;
}

ul { 
  list-style: none; 
  padding: 0; 
  margin: 0; 
}

li { 
  background: var(--card); 
  padding: 20px; 
  display: flex; 
  align-items: center; 
  margin-bottom: 10px; 
  border-radius: 18px; 
  border: 1px solid transparent; 
}

li.done { 
  background: #fff; 
  border: 1px solid var(--primary); 
  opacity: 0.7; 
}

li.done .task-text { 
  text-decoration: line-through; 
  color: var(--text-dim); 
}

.task-info { 
  flex: 1; 
  cursor: pointer; 
}

.task-text { 
  font-size: 17px; 
  font-weight: 600; 
  line-height: 1.4; 
}

.completion-date { 
  font-size: 11px; 
  color: var(--primary); 
  margin-top: 4px; 
  display: block; 
  font-weight: 700;
}

.delete-btn { 
  background: none; 
  border: none; 
  color: var(--text-dim); 
  font-size: 18px; 
  cursor: pointer; 
  padding-left: 10px;
}

/* Footer */
.site-footer { 
  margin-top: 80px; 
  padding-bottom: 40px; 
  text-align: center; 
  font-size: 12px; 
  color: var(--text-dim); 
}