@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;700&display=swap');

:root {
    /* Minimal Dark Theme Variables */
    --bg-color: #111111;
    --text-primary: #ededed;
    --text-secondary: #888888;
    --accent-color: #ffffff;
    /* White accent for maximum contrast/minimalism */
    --input-bg: transparent;
    --border-color: #333333;
    --error-color: #ff4444;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Outfit', sans-serif;
    background-color: var(--bg-color);
    color: var(--text-primary);
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow-x: hidden;
}

.container {
    width: 100%;
    max-width: 500px;
    padding: 2rem;
    /* Removed card styling and centering constraints are relaxed */
}

/* Removed .card class entirely from CSS usage, though HTML might still have it, 
   we can just styling it as transparent or ignore it if we removed the class from HTML. 
   To be safe, let's just make .card transparent if it exists. */
.card {
    background: transparent;
    box-shadow: none;
    border: none;
    padding: 0;
}

h1 {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: var(--text-primary);
    text-align: center;
    letter-spacing: -1px;
}

.subtitle {
    text-align: center;
    color: var(--text-secondary);
    margin-bottom: 4rem;
    font-size: 1.1rem;
    font-weight: 300;
}

.form-group {
    margin-bottom: 2.5rem;
    position: relative;
}

label {
    display: block;
    margin-bottom: 0.75rem;
    color: var(--text-secondary);
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* Minimal Input Styling - Border Bottom Only */
input[type="number"],
input[type="text"],
input[type="date"],
select {
    width: 100%;
    padding: 0.75rem 0;
    border: none;
    border-bottom: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-primary);
    font-size: 1.25rem;
    font-family: inherit;
    transition: all 0.3s ease;
    outline: none;
    border-radius: 0;
    /* Remove rounded corners */
}

input[type="date"] {
    color-scheme: dark;
}

input[type="number"]:focus,
input[type="text"]:focus,
input[type="date"]:focus,
select:focus {
    border-bottom-color: var(--accent-color);
}

/* Custom Date Input Styling */
.date-input-container {
    position: relative;
    display: flex;
    align-items: center;
}

.calendar-icon {
    position: absolute;
    right: 0;
    bottom: 10px;
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0;
    margin: 0;
    width: auto;
}

.calendar-icon:hover {
    color: var(--accent-color);
    transform: none;
    /* Override default button transform */
}

.hidden-date-picker {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    bottom: 0;
    left: 0;
    pointer-events: none;
    /* Prevent clicking strictly, let icon handle it */
}


/* Custom Gender Radio Buttons */
.gender-options {
    display: flex;
    gap: 1.5rem;
    margin-top: 1rem;
}

.gender-option {
    flex: 1;
    position: relative;
}

.gender-option input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.gender-option .box {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    /* Slight roundness for buttons */
    background: transparent;
    color: var(--text-secondary);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
}

.gender-option input:checked~.box {
    border-color: var(--accent-color);
    color: var(--bg-color);
    background: var(--accent-color);
}

button {
    width: 100%;
    padding: 1.25rem;
    margin-top: 2rem;
    border: none;
    border-radius: 8px;
    background: var(--accent-color);
    color: var(--bg-color);
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: inherit;
    letter-spacing: 0.5px;
}

button:hover {
    opacity: 0.9;
    transform: translateY(-2px);
}

/* Results Section */
.result-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-top: 4rem;
    padding-top: 2rem;
    border-top: 1px solid var(--border-color);
    animation: fadeIn 0.8s ease-out;
}

.stat-item {
    text-align: center;
    /* No background/border for stats */
}

.stat-label {
    display: block;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
}

.stat-value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.stat-sub {
    font-size: 0.9rem;
    color: var(--text-secondary);
    font-weight: 300;
}

.result-summary {
    margin-top: 2rem;
    text-align: center;
    color: var(--text-secondary);
    line-height: 1.4;
}

.result-summary p {
    font-size: 1.8rem;
    margin-bottom: 1.5rem;
    color: var(--text-primary);
    font-weight: 300;
}

.result-summary strong {
    display: block;
    font-size: 5rem;
    line-height: 1.1;
    color: var(--accent-color);
    font-weight: 700;
    margin: 0.5rem 0;
}

.error-msg {
    margin-top: 2rem;
    color: var(--error-color);
    text-align: center;
    font-size: 0.9rem;
}

/* Visualize Button - Primary Capsule Style */
#visualizeBtn {
    background: var(--accent-color);
    border: none;
    color: var(--bg-color);
    margin-top: 2rem;
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem 2.5rem;
    font-size: 1.1rem;
    letter-spacing: 0.5px;
    /* Reduced spacing slightly */
    width: auto;
    /* Allow auto width for capsule look */
    min-width: 200px;
    margin-left: auto;
    margin-right: auto;
}

#visualizeBtn:hover {
    opacity: 0.9;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(255, 255, 255, 0.2);
}

#visualizeBtn .material-symbols-outlined {
    font-size: 1.25rem;
    font-variation-settings: 'FILL' 1;
    /* Force filled icon */
}

/* Modal */
.modal {
    display: none;
    position: fixed;
    z-index: 100;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.95);
    /* Darker backdrop */
    backdrop-filter: blur(5px);
    overflow-y: auto;
    /* Enable scrolling */
    -webkit-user-select: none;
    user-select: none;
}

.download-btn {
    position: fixed;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    width: auto;
    min-width: 200px;
    /* Small but usable */
    padding: 1rem 2rem;
    border-radius: 50px;
    /* Capsule shape */
    background: #fff;
    color: #000;
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    z-index: 200;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    transition: all 0.3s ease;
}

.download-btn:hover {
    transform: translateX(-50%) translateY(-2px);
    /* Preserve centering */
    opacity: 0.95;
}

/* Adjust modal content to not be covered */
.modal-content {
    background-color: transparent;
    /* Remove card bg if user wants minimal */
    margin: 5% auto;
    padding: 1rem;
    padding-bottom: 160px;
    /* Huge padding to allow scrolling past fixed button */
    border: none;
    /* Remove border */
    border-radius: 0;
    width: 100%;
    max-width: 100%;
    /* Full width wrapper */
    min-height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* Remove weird pointer events logic */
}

.theme-toggle-container {
    display: flex;
    gap: 1rem;
    margin: 1rem 0;
    background: #222;
    padding: 0.25rem;
    border-radius: 2rem;
    border: 1px solid #333;
}

.theme-btn {
    background: transparent;
    border: none;
    color: #888;
    padding: 0.5rem 1.5rem;
    border-radius: 1.5rem;
    cursor: pointer;
    font-size: 0.9rem;
    margin: 0;
    width: auto;
    font-weight: 500;
    transition: all 0.3s ease;
}

.theme-btn:hover {
    color: #fff;
    transform: none;
}

.theme-btn.active {
    background: #fff;
    color: #000;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

/* Re-enable pointer events for content */
.modal-content * {
    pointer-events: auto;
}

#canvasPreview {
    margin: 1rem 0;
    border: 1px solid #333;
    /* Restored border */
    border-radius: 12px;
    overflow: hidden;
    max-width: 500px;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.8);
    /* Ensure interaction is possible */
    position: relative;
    z-index: 10;
}

#canvasPreview img {
    width: 100%;
    height: auto;
    display: block;
    /* Force iOS to allow long-press menu but prevent blue text selection */
    -webkit-touch-callout: default !important;
    pointer-events: auto !important;
    -webkit-user-select: none !important;
    /* Prevent "selecting" the image itself like text */
    user-select: none !important;
}

.instruction-small {
    display: block;
    margin-top: 0.5rem;
    font-size: 0.8rem;
    /* Slightly smaller */
    color: #999;
    /* Slightly lighter */
    font-weight: 300;
    opacity: 0.8;
    /* Extra fade/silik effect */
}

.close {
    position: fixed;
    top: 1rem;
    right: 1.5rem;
    color: #fff;
    opacity: 0.7;
    font-size: 40px;
    z-index: 102;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}