:root {
--hac-bg: #ffffff;
--hac-bg-secondary: #f0faf6;
--hac-text: #333333;
--hac-text-secondary: #555555;
--hac-text-muted: #666666;
--hac-border: #dddddd;
--hac-primary: #27AE7E;
--hac-primary-hover: #1f8a64;
--hac-shadow: rgba(0, 0, 0, 0.1);
} @media (prefers-color-scheme: dark) {
:root {
--hac-bg: #1e1e1e;
--hac-bg-secondary: #2d3a35;
--hac-text: #e4e4e4;
--hac-text-secondary: #c0c0c0;
--hac-text-muted: #a0a0a0;
--hac-border: #444444;
--hac-primary: #3cc98f;
--hac-primary-hover: #2fb87e;
--hac-shadow: rgba(0, 0, 0, 0.3);
}
} .dark-mode,
.is-dark-theme,
[data-theme="dark"],
[data-color-scheme="dark"] {
--hac-bg: #1e1e1e;
--hac-bg-secondary: #2d3a35;
--hac-text: #e4e4e4;
--hac-text-secondary: #c0c0c0;
--hac-text-muted: #a0a0a0;
--hac-border: #444444;
--hac-primary: #3cc98f;
--hac-primary-hover: #2fb87e;
--hac-shadow: rgba(0, 0, 0, 0.3);
} .hac-calculator {
box-sizing: border-box;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
max-width: 400px;
margin: 20px auto;
padding: 30px;
background: var(--hac-bg);
border-radius: 12px;
box-shadow: 0 2px 10px var(--hac-shadow);
}
.hac-calculator *,
.hac-calculator *::before,
.hac-calculator *::after {
box-sizing: border-box;
} .hac-logo {
display: block;
max-width: 160px;
height: auto;
margin: 0 auto 15px;
color: #000000;
} .hac-logo-text {
fill: currentColor;
}
.hac-logo-green {
fill: #27AE7E;
} @media (prefers-color-scheme: dark) {
.hac-logo {
color: #ffffff;
}
}
.dark-mode .hac-logo,
.is-dark-theme .hac-logo,
[data-theme="dark"] .hac-logo,
[data-color-scheme="dark"] .hac-logo {
color: #ffffff;
} .hac-title {
margin: 0 0 20px;
padding: 0;
font-size: 24px;
font-weight: 600;
text-align: center;
color: var(--hac-text);
border: none;
background: none;
} .hac-label {
display: block;
margin-bottom: 8px;
font-weight: 500;
font-size: 14px;
color: var(--hac-text-secondary);
} .hac-input {
width: 100%;
padding: 12px;
font-size: 16px;
color: var(--hac-text);
background: var(--hac-bg);
border: 2px solid var(--hac-border);
border-radius: 8px;
margin-bottom: 20px;
transition: border-color 0.2s ease;
}
.hac-input::placeholder {
color: var(--hac-text-muted);
}
.hac-input:focus {
outline: none;
border-color: var(--hac-primary);
} .hac-button {
width: 100%;
padding: 12px;
font-size: 16px;
font-weight: 500;
background: var(--hac-primary);
color: #ffffff;
border: none;
border-radius: 8px;
cursor: pointer;
transition: background-color 0.2s ease;
}
.hac-button:hover {
background: var(--hac-primary-hover);
}
.hac-button:focus {
outline: 2px solid var(--hac-primary);
outline-offset: 2px;
} .hac-result {
margin-top: 20px;
padding: 20px;
background: var(--hac-bg-secondary);
border-radius: 8px;
text-align: center;
display: none;
}
.hac-result.hac-show {
display: block;
} .hac-human-age {
font-size: 36px;
font-weight: bold;
color: var(--hac-primary);
}
.hac-human-age-label {
color: var(--hac-text-muted);
margin-top: 5px;
font-size: 14px;
} @media (max-width: 480px) {
.hac-calculator {
margin: 10px;
padding: 20px;
}
.hac-title {
font-size: 20px;
}
.hac-human-age {
font-size: 30px;
}
}