#date-calculator{ max-width: var(--max-width); margin: 0 auto; padding: 32px 16px 80px; color: var(--text-main); }

.tool-panel + .tool-panel{ margin-top: 20px; }

.tool-panel h2 .panel-icon{ display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 10px; background: linear-gradient(135deg, var(--point), var(--point-dark)); color: var(--surface); font-size: 1rem; }

.form-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.form-grid.single{ grid-template-columns: 1fr; }

.form-group{ display: flex; flex-direction: column; }

.field-label{ display: block; margin-bottom: 8px; font-weight: 700; color: var(--heading); font-size: 0.95rem; }

.btn-wrap{ margin-top: 16px; text-align: center; }

.error-box{ display: none; margin-top: 12px; padding: 12px 16px; background: rgba(var(--point-rgb),0.08); border: 1px solid rgba(var(--point-rgb),0.25); border-radius: 12px; color: var(--point-dark); font-weight: 600; font-size: 0.95rem; }

.result-box{ display: none; margin-top: 16px; padding: 18px; border-radius: 14px; background: radial-gradient(circle at top, rgba(var(--point-rgb),0.06), transparent 28%), rgba(var(--surface-rgb),0.96); border: 1px solid rgba(var(--heading-rgb),0.06); }

.result-box.is-open{ display: block; }

.result-headline{ text-align: center; padding: 14px 12px; border-radius: 12px; background: var(--surface); border: 1px solid rgba(var(--heading-rgb),0.06); }

.result-main{ display: block; font-size: clamp(1.8rem, 4.5vw, 2.3rem); font-weight: 800; color: var(--point); line-height: 1.1; letter-spacing: -0.02em; }

.result-sub{ display: block; margin-top: 6px; font-size: 0.95rem; color: var(--text-sub); }

.result-grid{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }

.result-item{ padding: 12px 14px; border-radius: 12px; background: rgba(var(--surface-rgb),0.92); border: 1px solid rgba(var(--heading-rgb),0.06); }

.result-label{ display: block; font-size: 0.85rem; color: var(--text-sub); font-weight: 700; margin-bottom: 4px; }

.result-value{ display: block; font-size: 1rem; font-weight: 700; color: var(--heading); }

@media (max-width: 900px){  .form-grid{ grid-template-columns: 1fr; } }

@media (max-width: 768px){
    
    #date-calculator{ padding: 20px 12px 60px; }
    
    
  }

@media (max-width: 640px){
    .result-grid{ grid-template-columns: 1fr; }
  }