body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
    margin: 0; /* Remove default margin */
    padding: 20px; /* Add padding to body */
    background-color: #fdfcfb; /* Warmer off-white background */
    color: #3d3d3d; /* Softer dark gray text */
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh; /* Ensure footer content (if any) is pushed down */
}

h1 {
    text-align: center;
    color: #2c3e50; /* A deep, slightly desaturated blue for a professional look */
    padding: 10px 0; /* Adjusted padding as there's no background box */
    margin-bottom: 30px; /* Adjusted margin */
    font-size: 2.4em; /* Good prominence */
    font-weight: 600; /* Clear and authoritative */
    letter-spacing: 0.5px; /* Adds a touch of elegance */
    /* Removed background, original color, border-radius, and text-shadow */
}

h2 {
    color: #3a86ff; /* Brighter, consistent blue */
    font-size: 1.6em;
    font-weight: 600;
    margin-top: 30px;
    margin-bottom: 15px;
    text-align: center; /* Center align h2s like the grid title */
}

.grid-title {
    color: #4a4a4a; /* Specific color for this title */
    margin-bottom: 20px;
}

.section {
    width: 100%;
    max-width: 550px; /* Slightly increased max-width */
    margin-bottom: 25px; /* Consistent margin */
    padding: 25px; /* Increased padding */
    background: #ffffff;
    border-radius: 16px; /* Softer, larger radius */
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.07); /* Softer, more diffused shadow */
}

.input-section {
    display: flex;
    flex-direction: column;
    gap: 20px; /* Increased gap */
}

.input-section > div {
    display: flex;
    flex-direction: column;
}

label {
    margin-bottom: 8px; /* Increased margin */
    font-weight: 500; /* Slightly less bold */
    color: #505050; /* Softer label color */
    font-size: 0.95em;
}

input[type="number"],
input[type="date"] {
    padding: 12px; /* Increased padding */
    border: 1px solid #d0d0d0; /* Softer border */
    border-radius: 8px; /* Softer radius */
    font-size: 1rem;
    box-sizing: border-box;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

input[type="number"]:focus,
input[type="date"]:focus {
    border-color: #3a86ff;
    outline: none;
    box-shadow: 0 0 0 3px rgba(58, 134, 255, 0.2); /* Accent focus shadow */
}

button {
    display: inline-block;
    padding: 12px 25px;
    font-size: 1rem;
    font-weight: 600;
    color: white;
    background: linear-gradient(135deg, #2575fc, #3a86ff); /* Updated gradient */
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease-out;
    margin-top: 10px;
    min-width: 160px;
    align-self: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

button:hover {
    background: linear-gradient(135deg, #3a86ff, #2575fc);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

button:active {
    transform: translateY(0px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

button:disabled {
    background: #cccccc;
    cursor: not-allowed;
    transform: translateY(0);
    box-shadow: none;
}

.error-message {
    color: #e74c3c; /* Brighter error red */
    font-size: 0.85em;
    margin-top: 6px;
    min-height: 1em; 
}

#grid-container {
  display: grid;
  grid-template-columns: repeat(52, minmax(8px, 1fr)); /* Fixed 52 columns */
  grid-gap: 2px; /* Smaller gap for denser look */
  width: 100%; /* Responsive width */
  max-width: 834px; /* (52 weeks * (10px + 2px gap)) + 2*padding approx */
  margin: 20px auto;
  padding: 8px; /* Reduced padding inside grid */
  border: 1px solid #e0e0e0;
  background-color: #f5f7fa; /* Light cool gray for grid background */
  border-radius: 12px; /* Consistent radius */
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}

.week {
  aspect-ratio: 1 / 1;
  border-radius: 2px; /* Subtle rounding for weeks */
  box-sizing: border-box;
  /* Removed individual border, rely on gap and background */
}

.week.lived {
  background-color: #00c6ab; /* Vibrant teal for lived weeks */
}

.week.remaining {
  background-color: #e9e9ed; /* Light neutral gray for remaining */
}

/* Year separators */
.week:nth-child(52n) {
  /* Default for remaining weeks if not lived - implicit, no specific style needed if background is distinct */
}
.week.lived:nth-child(52n) {
    /* Can add a slightly darker bottom border to lived year ends if desired */
    /* box-shadow: inset 0 -2px 0 #009a81; */
}
/* Adding margin to rows is better for visual year separation */
.week:nth-child(n+1):nth-child(-n+52){ /* First row */
    margin-top: 0;
}
/* Add a top margin to each week that starts a new year, except the very first row */
.week:nth-child(52n + 1):not(:nth-child(1)) {
    margin-top: 1px; /* Small margin to group years. Could be larger. */
}


#info {
    margin-top: 25px;
    padding: 20px;
    border-radius: 12px;
    background-color: #ffffff; 
    border: 1px solid #e0e0e0;
    text-align: center;
    width: 100%;
    max-width: 600px; /* Match Gemini section width */
    font-size: 1em; /* Adjusted for better readability */
    line-height: 1.7; /* Increased line height */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

#info p { /* Style paragraphs within info for consistency */
    margin-bottom: 10px; /* Space between paragraphs */
}
#info p:last-child {
    margin-bottom: 0; /* No extra space after the last paragraph */
}


#info strong {
    color: #2575fc;
    font-weight: 600;
}

#info .quote {
    display: block;
    margin-top: 15px;
    font-style: italic;
    color: #555;
    font-size: 0.9em;
}

/* Timeline Visualization Styles */
.timeline-section {
    max-width: 600px; /* Consistent with info and gemini div */
    /* Inherits .section styles for background, padding, border-radius, box-shadow */
}

.timeline-title {
    color: #4a4a4a; /* Consistent title color */
    margin-bottom: 20px;
    font-size: 1.4em; /* Slightly smaller than main section titles */
}

.timeline-bar {
    display: flex;
    width: 100%;
    height: 28px; /* Slightly sleeker bar */
    background-color: #e0e0e0; /* Fallback background for the container */
    border-radius: 14px; /* Fully rounded ends */
    overflow: hidden; /* Important to keep rounded corners on segments */
    margin-bottom: 15px; /* Space before labels */
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
}

.timeline-lived {
    background-color: #00c6ab; /* Consistent with .week.lived */
    height: 100%;
    transition: width 0.6s cubic-bezier(0.25, 0.1, 0.25, 1); /* Smooth transition */
    border-top-left-radius: 14px;
    border-bottom-left-radius: 14px;
}
.timeline-remaining {
    background-color: #e9e9ed; /* Consistent with .week.remaining */
    height: 100%;
    transition: width 0.6s cubic-bezier(0.25, 0.1, 0.25, 1);
    border-top-right-radius: 14px;
    border-bottom-right-radius: 14px;
}
/* Ensure that if one segment is 100%, it fills the corners */
.timeline-lived:only-child {
    border-radius: 14px;
}
.timeline-remaining:only-child {
    border-radius: 14px;
}


.timeline-labels {
    display: flex;
    justify-content: space-between;
    width: 100%;
    font-size: 0.9em;
    color: #505050;
}

.timeline-labels strong {
    font-weight: 600;
    color: #333;
}


/* Gemini Reflection Styles */
.gemini-section {
    max-width: 600px; /* Consistent with info div */
    /* Inherits .section styles: background, padding, border-radius, box-shadow */
    display: flex;
    flex-direction: column;
    align-items: center;
}

#geminiReflectButton {
    background: linear-gradient(135deg, #ff416c, #ff4b2b); /* Retain distinct gradient */
    margin-bottom: 20px; /* Increased space */
    /* Inherits general button styles for hover, active, disabled, shadow, radius */
}
#geminiReflectButton:hover {
    background: linear-gradient(135deg, #ff4b2b, #ff416c);
    /* Hover transform and shadow from general button style */
}


#geminiReflectionArea {
    margin-top: 0; /* Button has margin-bottom */
    padding: 20px;
    border-radius: 8px;
    background-color: #e6f7ff; /* Light sky blue, makes it distinct */
    border: 1px solid #91d5ff; /* Complementary border */
    width: 100%;
    min-height: 60px; 
    font-size: 0.95em; /* Slightly smaller for reflection */
    line-height: 1.6;
    color: #333;
}

#geminiReflectionArea .gemini-disclaimer {
    display: block;
    font-size: 0.8em;
    color: #777;
    text-align: right;
    margin-top: 10px;
}

#geminiLoading {
    color: #555;
    font-style: italic;
    padding: 10px 0;
}