@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Inter',sans-serif;background:#f5f7fa;color:#1a1a1a;min-height:100vh}
.tool-header{background:linear-gradient(135deg,#003366 0%,#00264d 100%);padding:30px 40px;border-bottom:3px solid #4da6ff;display:flex;justify-content:space-between;align-items:center}
.tool-header h1{font-size:1.6rem;font-weight:800;color:#ffffff}
.tool-header h1 span{color:#4da6ff}
.tool-header a{color:#8fb8d9;font-size:.8rem;text-decoration:none;text-transform:uppercase;letter-spacing:.08em;padding:8px 16px;border:1px solid rgba(255,255,255,.2);border-radius:4px;transition:.2s}
.tool-header a:hover{border-color:#4da6ff;color:#4da6ff}
.tool-container{max-width:900px;margin:0 auto;padding:40px 20px}
.tool-desc{color:#5a6577;margin-bottom:30px;font-size:.9rem;line-height:1.6}
.form-section{margin-bottom:30px;background:#ffffff;border-radius:6px;padding:24px;border:1px solid #dde3eb}
.form-section-title{font-size:.75rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:#003366;margin-bottom:15px;padding-bottom:8px;border-bottom:1px solid #dde3eb}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:17px;margin-bottom:17px}
.form-row.three{grid-template-columns:1fr 1fr 1fr}
.form-group{display:flex;flex-direction:column}
.form-group.full{grid-column:1/-1}
.form-group label{font-size:.75rem;font-weight:600;color:#5a6577;margin-bottom:6px;text-transform:uppercase;letter-spacing:.05em}
.form-group label .hint{font-weight:400;color:#8a96a8;text-transform:none;letter-spacing:0;font-size:.7rem}
.form-group input,.form-group select,.form-group textarea{background:#f8fafc;border:1px solid #c8d1dc;color:#1a1a1a;padding:12px 15px;font-family:'Inter',sans-serif;font-size:.9rem;border-radius:4px;transition:border-color .2s}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{outline:none;border-color:#4da6ff;box-shadow:0 0 0 3px rgba(77,166,255,.15)}
.form-group textarea{min-height:100px;resize:vertical}
.form-group select{cursor:pointer}
.btn-generate{display:block;width:100%;padding:16px;background:#003366;color:#ffffff;font-family:'Inter',sans-serif;font-size:1rem;font-weight:700;border:none;border-radius:6px;cursor:pointer;text-transform:uppercase;letter-spacing:.1em;transition:.2s;margin-top:30px}
.btn-generate:hover{background:#004488;transform:translateY(-2px);box-shadow:0 8px 25px rgba(0,51,102,.3)}
.add-row-btn{background:none;border:1px dashed #c8d1dc;color:#8a96a8;padding:10px;width:100%;cursor:pointer;font-family:'Inter',sans-serif;font-size:.8rem;border-radius:4px;transition:.2s;margin-top:10px}
.add-row-btn:hover{border-color:#4da6ff;color:#003366}
.dynamic-row{display:grid;gap:10px;margin-bottom:10px;align-items:end;padding:12px;background:#f8fafc;border:1px solid #dde3eb;border-radius:4px}
.dynamic-row .remove-btn{background:none;border:1px solid #c8d1dc;color:#8a96a8;padding:8px 12px;cursor:pointer;font-size:.75rem;border-radius:4px;transition:.2s;white-space:nowrap}
.dynamic-row .remove-btn:hover{border-color:#cc3333;color:#cc3333}
.output-note{text-align:center;color:#8a96a8;font-size:.8rem;margin-top:15px}
@media(max-width:768px){.form-row,.form-row.three{grid-template-columns:1fr}.tool-header{flex-direction:column;gap:15px;align-items:flex-start}}