:root{
    --bg: #f6fbfc;
    --card: #ffffff;
    --muted: #6b7280;
    --text: #0f1724;
    --accent: #0b7ea2; /* teal-blue accent */
    --accent-contrast: #ffffff;
    --radius: 10px;
}

*{box-sizing:border-box}

html,body{
    height:100%;
}

body {
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
    margin: 0;
    padding: 28px 16px;
    background: linear-gradient(180deg, var(--bg), #eaf6fb);
    color: var(--text);
    -webkit-font-smoothing:antialiased;
}

header{ text-align:center; margin-bottom:20px }

h1{ font-weight:600; font-size:1.4rem; margin-bottom:4px }
h2{ font-weight:400; color:var(--muted); font-size:0.98rem; margin-bottom:12px }

.container{
    max-width:700px;
    margin:0 auto;
    background:var(--card);
    padding:20px;
    border-radius:var(--radius);
    box-shadow: 0 6px 30px rgba(8,30,38,0.06);
    border: 1px solid rgba(11,126,162,0.05);
}

section{ display:flex; flex-direction:column; align-items:center }

.controls{ width:100%; display:flex; gap:8px; flex-wrap:wrap; align-items:center }

label{ display:block; font-size:0.9rem; color:var(--muted); margin-bottom:6px }

input[type="date"]{
    appearance:none;
    -webkit-appearance:none;
    padding:8px 10px;
    border-radius:8px;
    border:1px solid rgba(15,23,36,0.07);
    background: linear-gradient(180deg, #fff, #fbfeff);
    font-size:0.94rem;
    color:var(--text);
    min-width:0;
}

.field{ display:flex; flex-direction:column; flex:1; min-width:140px }

.actions{ margin-top:14px; width:100%; display:flex; justify-content:center }

button{
    background: var(--accent);
    color: var(--accent-contrast);
    border: none;
    padding: 12px 20px;
    border-radius: 8px;
    font-weight:600;
    cursor:pointer;
    box-shadow: 0 8px 20px rgba(11,126,162,0.12);
    transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease;
}

button:active{ transform: translateY(1px) }
button:hover{ box-shadow: 0 12px 30px rgba(11,126,162,0.14); opacity:0.98 }

/* small link that matches page accent for linking to contents */
.contents-link{
    display:inline-block;
    color:var(--accent);
    text-decoration:none;
    font-weight:600;
    padding:6px 10px;
    border-radius:6px;
    border:1px solid rgba(11,126,162,0.06);
    background: linear-gradient(180deg, rgba(11,126,162,0.02), rgba(11,126,162,0.01));
}
.contents-link:hover{ background: linear-gradient(180deg, rgba(11,126,162,0.04), rgba(11,126,162,0.02)); }

#result{
    margin-top:12px;
    padding:10px 12px;
    width:100%;
    border-radius:8px;
    background: linear-gradient(180deg, rgba(11,126,162,0.035), rgba(11,126,162,0.015));
    color:var(--text);
    text-align:center;
    font-weight:600;
}

@media (max-width:520px){
    .controls{ flex-direction:column; align-items:stretch; gap:10px }
    .actions{ margin-top:12px }
    .container{ padding:14px }
    body{ padding:18px 12px }
}