.tool-hero { background: linear-gradient(135deg,#ec4899 0%,#be185d 100%); padding:5rem 1.5rem 3rem; margin-top:68px; text-align:center; position:relative; overflow:hidden; }
.tool-hero::before { content:''; position:absolute; width:400px; height:400px; border-radius:50%; background:rgba(255,255,255,.06); top:-150px; right:-100px; }
.tool-hero::after { content:''; position:absolute; width:300px; height:300px; border-radius:50%; background:rgba(255,255,255,.04); bottom:-100px; left:-50px; }
.tool-hero-content { position:relative; z-index:1; }
.tool-hero-icon { width:72px; height:72px; border-radius:20px; background:rgba(255,255,255,.15); backdrop-filter:blur(10px); display:flex; align-items:center; justify-content:center; font-size:2rem; margin:0 auto 1.25rem; border:1px solid rgba(255,255,255,.2); }
.tool-hero h1 { font-size:clamp(1.75rem,4vw,2.75rem); font-weight:800; color:white; letter-spacing:-1px; margin-bottom:.75rem; }
.tool-hero p { font-size:1rem; color:rgba(255,255,255,.78); max-width:480px; margin:0 auto; }
.tool-main { max-width:900px; margin:0 auto; padding:2.5rem 1.5rem 5rem; }

.age-layout { display:grid; grid-template-columns:1fr 1.4fr; gap:1.5rem; align-items:start; }

.form-card { background:white; border-radius:var(--radius-lg); border:1px solid var(--border); box-shadow:var(--shadow); overflow:hidden; }
.form-card-header { padding:1.25rem 1.5rem; border-bottom:1px solid var(--border-light); display:flex; align-items:center; gap:.75rem; }
.form-card-icon { width:36px; height:36px; border-radius:10px; background:rgba(236,72,153,.12); display:flex; align-items:center; justify-content:center; font-size:1.1rem; }
.form-card-title { font-size:.95rem; font-weight:700; color:var(--text); }
.form-card-body { padding:1.5rem; display:flex; flex-direction:column; gap:1.1rem; }

.field-group { display:flex; flex-direction:column; gap:.4rem; }
.field-label { font-size:.78rem; font-weight:600; color:var(--text-muted); text-transform:uppercase; letter-spacing:.4px; }
.field-input { width:100%; padding:.7rem .9rem; border:1.5px solid var(--border); border-radius:var(--radius-sm); font-size:.95rem; font-family:'Inter',sans-serif; color:var(--text); outline:none; transition:var(--transition); background:var(--bg); }
.field-input:focus { border-color:#ec4899; background:white; box-shadow:0 0 0 3px rgba(236,72,153,.1); }

.btn-calc { width:100%; padding:.875rem; background:linear-gradient(135deg,#ec4899,#be185d); color:white; border:none; border-radius:var(--radius); font-size:.95rem; font-weight:700; font-family:'Inter',sans-serif; cursor:pointer; transition:var(--transition); box-shadow:0 4px 12px rgba(236,72,153,.3); }
.btn-calc:hover { transform:translateY(-1px); box-shadow:0 6px 16px rgba(236,72,153,.4); }
.btn-reset-small { width:100%; padding:.7rem; background:transparent; color:var(--text-muted); border:1.5px solid var(--border); border-radius:var(--radius); font-size:.875rem; font-weight:600; font-family:'Inter',sans-serif; cursor:pointer; transition:var(--transition); }
.btn-reset-small:hover { border-color:var(--text-muted); color:var(--text); }

.result-panel { background:white; border-radius:var(--radius-lg); border:1px solid var(--border); box-shadow:var(--shadow-md); overflow:hidden; }
.result-panel-header { padding:1.25rem 1.5rem; background:linear-gradient(135deg,#ec4899,#be185d); color:white; }
.result-panel-title { font-size:.95rem; font-weight:700; }
.result-panel-sub { font-size:.78rem; color:rgba(255,255,255,.75); margin-top:2px; }

.age-big { padding:1.75rem 1.5rem; text-align:center; border-bottom:1px solid var(--border-light); }
.age-big-value { font-size:3.5rem; font-weight:900; letter-spacing:-3px; color:#ec4899; line-height:1; }
.age-big-label { font-size:.78rem; font-weight:600; color:var(--text-muted); text-transform:uppercase; letter-spacing:.5px; margin-top:.4rem; }

.age-metrics { display:grid; grid-template-columns:repeat(3,1fr); border-bottom:1px solid var(--border-light); }
.age-metric { padding:1rem; text-align:center; border-right:1px solid var(--border-light); }
.age-metric:last-child { border-right:none; }
.age-metric-value { font-size:1.2rem; font-weight:900; color:var(--text); letter-spacing:-.5px; display:block; }
.age-metric-label { font-size:.7rem; font-weight:600; color:var(--text-muted); text-transform:uppercase; letter-spacing:.4px; display:block; margin-top:2px; }

.age-info-rows { padding:1rem 1.5rem; display:flex; flex-direction:column; gap:.5rem; }
.age-info-row { display:flex; justify-content:space-between; align-items:center; padding:.5rem .75rem; border-radius:var(--radius-sm); transition:var(--transition); }
.age-info-row:hover { background:var(--bg); }
.age-info-label { font-size:.82rem; color:var(--text-muted); }
.age-info-value { font-size:.85rem; font-weight:700; color:var(--text); }

.birthday-countdown { margin:0 1.5rem 1.25rem; padding:1rem; background:linear-gradient(135deg,rgba(236,72,153,.06),rgba(190,24,93,.06)); border:1px solid rgba(236,72,153,.15); border-radius:var(--radius); }
.birthday-label { font-size:.72rem; font-weight:700; color:#ec4899; text-transform:uppercase; letter-spacing:.5px; margin-bottom:.35rem; }
.birthday-value { font-size:.875rem; font-weight:700; color:var(--text); }

.placeholder-card { background:white; border-radius:var(--radius-lg); border:1px solid var(--border); padding:3rem 2rem; text-align:center; color:var(--text-light); box-shadow:var(--shadow); }
.placeholder-icon { font-size:3rem; margin-bottom:1rem; opacity:.35; }
.placeholder-text { font-size:.875rem; }

@media(max-width:640px) { .age-layout{grid-template-columns:1fr;} .age-metrics{grid-template-columns:1fr 1fr;} .age-metric:nth-child(2){border-right:none;} }