*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: #f1f5f9; color: #1e293b; line-height: 1.6; }
a { color: #2563eb; text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; }

header { background: linear-gradient(135deg, #1e293b 0%, #334155 100%); color: white; padding: 1.5rem 0; }
header .container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; }
header .logo { font-size: 1.5rem; font-weight: 700; color: white; display: flex; align-items: center; gap: 0.5rem; }
header .logo:hover { text-decoration: none; }
header nav { display: flex; gap: 1.25rem; flex-wrap: wrap; }
header nav a { color: #cbd5e1; font-size: 0.9rem; font-weight: 500; transition: color 0.2s; white-space: nowrap; }
header nav a:hover { color: white; text-decoration: none; }

.container { max-width: 1100px; margin: 0 auto; padding: 0 1.5rem; }

.hero { background: linear-gradient(135deg, #2563eb 0%, #059669 100%); color: white; text-align: center; padding: 3.5rem 1.5rem; }
.hero h1 { font-size: 2.5rem; margin-bottom: 0.75rem; }
.hero p { font-size: 1.15rem; opacity: 0.9; max-width: 650px; margin: 0 auto; }

main { padding: 2.5rem 0; }

.tools-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.5rem; margin-bottom: 3rem; }
.tool-card { background: white; border-radius: 12px; padding: 1.75rem; box-shadow: 0 1px 3px rgba(0,0,0,0.1); transition: transform 0.2s, box-shadow 0.2s; display: flex; flex-direction: column; }
.tool-card:hover { transform: translateY(-3px); box-shadow: 0 8px 25px rgba(0,0,0,0.1); }
.tool-card .icon { font-size: 2.5rem; margin-bottom: 0.75rem; }
.tool-card h2 { font-size: 1.25rem; margin-bottom: 0.5rem; }
.tool-card p { color: #64748b; font-size: 0.9rem; flex: 1; margin-bottom: 1rem; }
.tool-card .btn { align-self: flex-start; }

.btn { display: inline-block; background: #2563eb; color: white; padding: 0.6rem 1.5rem; border-radius: 8px; font-weight: 600; font-size: 0.9rem; border: none; cursor: pointer; transition: background 0.2s; text-align: center; }
.btn:hover { background: #1d4ed8; text-decoration: none; }
.btn-green { background: #059669; }
.btn-green:hover { background: #047857; }

.tool-page .hero { padding: 2rem 1.5rem; }
.tool-page .hero h1 { font-size: 2rem; }
.tool-page .hero p { font-size: 1rem; }

.tool-container { background: white; border-radius: 12px; padding: 2rem; box-shadow: 0 1px 3px rgba(0,0,0,0.1); max-width: 700px; margin: 2rem auto; }
.tool-container h2 { font-size: 1.3rem; margin-bottom: 1.5rem; color: #1e293b; }
.tool-container .form-group { margin-bottom: 1.25rem; }
.tool-container label { display: block; font-weight: 600; font-size: 0.9rem; margin-bottom: 0.35rem; color: #334155; }
.tool-container input, .tool-container select { width: 100%; padding: 0.7rem 0.9rem; border: 1.5px solid #e2e8f0; border-radius: 8px; font-size: 1rem; transition: border-color 0.2s; background: white; }
.tool-container input:focus, .tool-container select:focus { outline: none; border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,0.15); }
.tool-container .input-group { display: flex; gap: 1rem; }
.tool-container .input-group > * { flex: 1; }
.tool-container .btn { font-size: 1rem; padding: 0.75rem 2rem; width: 100%; margin-top: 0.5rem; }
.tool-container .result { background: #f0fdf4; border: 2px solid #bbf7d0; border-radius: 10px; padding: 1.25rem; margin-top: 1.5rem; text-align: center; display: none; }
.tool-container .result.show { display: block; }
.tool-container .result .value { font-size: 2.5rem; font-weight: 800; color: #059669; }
.tool-container .result .label { font-size: 0.9rem; color: #64748b; margin-top: 0.25rem; }
.tool-container .result .detail { font-size: 1.1rem; color: #334155; margin-top: 0.5rem; }
.tool-container .result-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1rem; }
.tool-container .result-item { background: #f8fafc; border-radius: 8px; padding: 1rem; }
.tool-container .result-item .value { font-size: 1.5rem; }
.tool-container .result-item .label { font-size: 0.8rem; }

.row { display: flex; gap: 1.25rem; flex-wrap: wrap; }
.row > * { flex: 1; min-width: 200px; }

.slider-container { display: flex; align-items: center; gap: 0.75rem; }
.slider-container input[type="range"] { flex: 1; padding: 0; border: none; }
.slider-container input[type="range"]:focus { box-shadow: none; }
.slider-value { font-weight: 700; color: #2563eb; min-width: 3rem; text-align: right; }

table.grades { width: 100%; border-collapse: collapse; margin: 1rem 0; }
table.grades th, table.grades td { padding: 0.6rem; text-align: left; border-bottom: 1px solid #e2e8f0; font-size: 0.9rem; }
table.grades th { background: #f8fafc; font-weight: 600; }
table.grades input { width: 100%; padding: 0.4rem; border: 1px solid #e2e8f0; border-radius: 4px; font-size: 0.9rem; }
table.grades .remove { color: #ef4444; cursor: pointer; font-weight: 700; font-size: 1.1rem; background: none; border: none; }
table.grades .remove:hover { color: #dc2626; }

.add-row-btn { background: none; border: 2px dashed #cbd5e1; border-radius: 8px; padding: 0.6rem; width: 100%; color: #64748b; cursor: pointer; font-size: 0.9rem; margin-top: 0.5rem; }
.add-row-btn:hover { border-color: #2563eb; color: #2563eb; }

.result-box { background: #f0fdf4; border: 2px solid #bbf7d0; border-radius: 10px; padding: 1.25rem; margin-top: 1.5rem; text-align: center; }
.result-box.big { padding: 1.75rem; }
.result-box .main-value { font-size: 3rem; font-weight: 800; color: #059669; line-height: 1.2; }
.result-box .sub-value { font-size: 1.1rem; color: #334155; margin-top: 0.25rem; }
.result-box .desc { font-size: 0.9rem; color: #64748b; margin-top: 0.5rem; }
.result-box .detail-row { display: flex; justify-content: center; gap: 2rem; flex-wrap: wrap; margin-top: 1rem; }
.result-box .detail-item { text-align: center; }
.result-box .detail-item .num { font-size: 1.5rem; font-weight: 700; color: #2563eb; }
.result-box .detail-item .lbl { font-size: 0.8rem; color: #64748b; }

.derivative-output { font-family: 'Courier New', monospace; font-size: 1.4rem; padding: 0.5rem; background: #f8fafc; border-radius: 6px; margin-top: 0.5rem; }
.steps { margin-top: 1rem; text-align: left; }
.steps .step { padding: 0.5rem 0; border-bottom: 1px solid #e2e8f0; font-family: 'Courier New', monospace; font-size: 1rem; color: #334155; }
.steps .step:last-child { border-bottom: none; }
.steps .step .highlight { color: #2563eb; font-weight: 600; }

.ad-placeholder { background: #f8fafc; border: 2px dashed #e2e8f0; border-radius: 8px; padding: 2rem; text-align: center; color: #94a3b8; font-size: 0.85rem; margin: 2rem auto; max-width: 728px; }

.ad-banner { margin: 1.5rem auto; text-align: center; }

footer { background: #1e293b; color: #94a3b8; text-align: center; padding: 2rem 1.5rem; font-size: 0.85rem; margin-top: 2rem; }
footer a { color: #60a5fa; }

@media (max-width: 640px) {
  .hero h1 { font-size: 1.75rem; }
  .hero p { font-size: 1rem; }
  .tool-container { padding: 1.25rem; }
  .tool-container .result .value { font-size: 2rem; }
  .tool-container .result-grid { grid-template-columns: 1fr; }
  .tools-grid { grid-template-columns: 1fr; }
  header .container { flex-direction: column; text-align: center; }
  header nav { justify-content: center; }
  .row { flex-direction: column; }
}