:root{--primary:#1a5276;--primary-light:#2980b9;--accent:#e74c3c;--bg:#f0f4f8;--card:#ffffff;--text:#2c3e50;--text-light:#7f8c8d;--border:#d5dbdb;--success:#27ae60;--radius:8px;--shadow:0 2px 10px rgba(0,0,0,0.08)}
.container-box{font-family:'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;background:var(--bg);padding:15px 0 30px;color:var(--text);font-size:14px;line-height:1.5}
.container{max-width:700px;margin:0 auto;padding:0 12px;}
.header{text-align:center;margin-bottom:20px}
.header h1{color:var(--primary);font-size:1.4em;margin:0 0 6px}
.header p{color:var(--text-light);font-size:.9em;margin:0}
.card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px 16px;margin-bottom:14px}
.card-title{font-size:1em;font-weight:600;color:var(--primary);margin-bottom:12px;padding-bottom:8px;border-bottom:1px solid #ecf0f1}
.sel-row{display:flex;gap:10px;margin-bottom:4px}
.sel-row select{flex:1;padding:10px 12px;border:1.5px solid var(--border);border-radius:var(--radius);font-size:.95em;background:#fff;color:var(--text);cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%237f8c8d' stroke-width='1.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:30px}
.sel-row select:focus{outline:0;border-color:var(--primary-light)}
.sel-row select:disabled{background-color:#f8f9fa;color:#bdc3c7;cursor:not-allowed}
.tag-row{display:none;align-items:center;gap:8px;padding:10px 14px;background:linear-gradient(135deg,#eaf2f8,#d4e6f1);border-radius:var(--radius);margin-bottom:4px;font-size:.95em}
.tag-row.active{display:flex}
.tag-row .tag-icon{font-size:1.2em}
.tag-row .tag-text{flex:1;color:var(--primary);font-weight:600}
.tag-row .tag-edit{color:var(--primary-light);cursor:pointer;font-size:.85em;text-decoration:underline;background:0 0;border:none;padding:0;font-family:inherit}
.sel-row.collapsed{max-height:0;overflow:hidden;opacity:0;margin:0;transition:all .35s ease}
.specs-section{display:none;animation:fadeIn .4s ease}
.specs-section.active{display:block}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}
to{opacity:1;transform:translateY(0)}
}
.spec-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.spec-item{display:flex;flex-direction:column}
.spec-item.full{grid-column:1/-1}
.spec-item label{font-size:.82em;font-weight:500;color:var(--text);margin-bottom:4px}
.spec-item label .req{color:var(--accent);margin-left:2px}
.spec-item input,.spec-item select,.spec-item textarea{padding:8px 10px;border:1px solid var(--border);border-radius:6px;font-size:.9em;color:var(--text);background:#fff;transition:border-color .2s}
.spec-item input:focus,.spec-item select:focus,.spec-item textarea:focus{outline:0;border-color:var(--primary-light)}
.spec-item input.invalid{border-color:var(--accent);animation:shake .3s ease}
@keyframes shake{0%,100%{transform:translateX(0)}
25%{transform:translateX(-4px)}
75%{transform:translateX(4px)}
}
.spec-item .unit{position:relative}
.spec-item .unit input{padding-right:50px}
.spec-item .unit span{position:absolute;right:10px;top:50%;transform:translateY(-50%);color:var(--text-light);font-size:.8em}
.spec-item textarea{resize:vertical;min-height:60px}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.contact-item{display:flex;flex-direction:column;width:100%;align-items: flex-start;}
.contact-item.full{grid-column:1/-1}
.contact-item label{font-size:.82em;font-weight:500;margin-bottom:4px}
.contact-item label .req{color:var(--accent);margin-left:2px}
.contact-item input,.contact-item textarea{padding:8px 10px;border:1px solid var(--border);border-radius:6px;font-size:.9em;transition:border-color .2s;width:100%;}
.contact-item input:focus,.contact-item textarea:focus{outline:0;border-color:var(--primary-light)}
.contact-item input.invalid{border-color:var(--accent);animation:shake .3s ease}
.submit-btn{display:block;width:100%;padding:13px;background:linear-gradient(135deg,var(--primary),var(--primary-light));color:#fff;border:none;border-radius:var(--radius);font-size:1.05em;font-weight:600;cursor:pointer;transition:opacity .25s;letter-spacing:.5px}
.submit-btn:hover{opacity:.9}
.submit-btn:active{transform:scale(.99)}
.success-box{display:none;text-align:center;padding:40px 20px;background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow)}
.success-box.active{display:block;animation:fadeIn .5s ease}
.success-box .check-icon{font-size:3em;color:var(--success);margin-bottom:10px}
.success-box h2{color:var(--success);margin:0 0 8px;font-size:1.4em}
.success-box p{color:var(--text-light);margin:0 0 6px;font-size:.95em}
.success-box .ref-box{display:inline-block;margin:14px 0;padding:10px 24px;background:#eafaf1;border:1px solid #abebc6;border-radius:var(--radius);font-size:1.3em;font-weight:700;color:var(--primary);letter-spacing:1.5px}
@media (max-width:520px){.contact-grid,.spec-grid{grid-template-columns:1fr}
.sel-row{flex-direction:column}
.header h1{font-size:1.2em}
}