@import"https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap";*{margin:0;padding:0;box-sizing:border-box}body{font-family:Figtree,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#e6f2ff;color:#0a3256;line-height:1.6}.app{min-height:100vh;display:flex;flex-direction:column}.app-header{background:linear-gradient(135deg,#0a3256,#177abf);color:#fff;padding:2rem;box-shadow:0 2px 10px #0a325633}.header-content{display:flex;align-items:center;justify-content:center;gap:2rem;max-width:1200px;margin:0 auto;position:relative}.logo-placeholder{flex-shrink:0}.company-logo{height:60px;width:auto;max-width:200px;object-fit:contain}.help-button{position:absolute;left:0;top:50%;transform:translateY(-50%)}.btn-help{background:#fff3;border:2px solid rgba(255,255,255,.3);border-radius:50%;color:#fff;width:40px;height:40px;font-size:18px;font-weight:700;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;justify-content:center}.btn-help:hover{background:#ffffff4d;border-color:#ffffff80;transform:scale(1.1)}.help-modal{position:fixed;top:0;left:0;right:0;bottom:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000;padding:2rem}.help-content{background:#fff;border-radius:12px;max-width:500px;width:100%;max-height:80vh;overflow-y:auto;box-shadow:0 10px 30px #0000004d}.help-header{display:flex;justify-content:space-between;align-items:center;padding:1.5rem;border-bottom:1px solid #e0e0e0;background:#f8f9fa;border-radius:12px 12px 0 0}.help-header h3{margin:0;color:#0a3256;font-family:Figtree,sans-serif}.btn-close{background:none;border:none;font-size:24px;color:#666;cursor:pointer;padding:0;width:30px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:all .3s ease}.btn-close:hover{background:#e0e0e0;color:#333}.help-body{padding:1.5rem}.help-body ol{margin:0 0 1rem;padding-left:1.5rem}.help-body li{margin-bottom:.5rem;line-height:1.6;color:#333}.help-body strong{color:#0a3256}.help-note{background:#e6f2ff;border:1px solid #87BEEB;border-radius:8px;padding:1rem;margin:1rem 0 0;color:#0a3256;font-size:14px}.header-text{text-align:center}.app-header h1{font-size:2.5rem;margin-bottom:.5rem;font-weight:700;font-family:Figtree,sans-serif}.app-header p{font-size:1.1rem;opacity:.9;font-family:Figtree,sans-serif}.app-content{flex:1;display:grid;grid-template-columns:420px 1fr;gap:2rem;padding:2rem;max-width:1400px;margin:0 auto;width:100%}.control-panel{background:#fff;border-radius:12px;padding:1.5rem;box-shadow:0 4px 20px #0000001a;height:fit-content;position:sticky;top:2rem}.tabs{display:flex;margin-bottom:1.5rem;border-bottom:2px solid #e0e0e0}.tab{flex:1;padding:.75rem 1rem;border:none;background:none;cursor:pointer;font-size:1rem;font-weight:500;color:#666;transition:all .2s ease;border-bottom:2px solid transparent}.tab:hover{color:#333;background-color:#f8f9fa}.tab.active{color:#667eea;border-bottom-color:#667eea;background-color:#f8f9fa}.block{margin-bottom:1.5rem}.block-title{font-size:1.1rem;font-weight:600;margin-bottom:.75rem;color:#333}.block-content{display:flex;flex-direction:column;gap:.75rem}.input,.textarea{width:100%;padding:.75rem;border:2px solid #e0e0e0;border-radius:8px;font-size:1rem;transition:border-color .2s ease;font-family:inherit}.input:focus,.textarea:focus{outline:none;border-color:#177abf;box-shadow:0 0 0 3px #177abf1a}.textarea{resize:vertical;min-height:100px}.btn{padding:.75rem 1.5rem;border:none;border-radius:8px;font-size:1rem;font-weight:500;cursor:pointer;transition:all .2s ease;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:.5rem}.btn:disabled{opacity:.6;cursor:not-allowed}.btn-primary{background:linear-gradient(135deg,#0a3256,#177abf);color:#fff}.btn-primary:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 4px 12px #0a32564d}.btn-secondary{background:#87beeb;color:#0a3256;border:2px solid #87BEEB}.btn-secondary:hover:not(:disabled){background:#177abf;color:#fff;border-color:#177abf}.button-group{display:flex;gap:.75rem;margin-top:.5rem}.file-drop{border:2px dashed #d0d0d0;border-radius:12px;padding:2rem;text-align:center;transition:all .2s ease;cursor:pointer;background:#fafafa}.file-drop:hover,.file-drop.drag-over{border-color:#177abf;background:#e6f2ff}.file-input{display:none}.file-label{cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:.5rem}.file-icon{font-size:2rem;opacity:.7}.file-text{font-size:1.1rem;color:#333}.file-hint{font-size:.9rem;color:#666}.selected-file{padding:.75rem;background:#e6f2ff;border:1px solid #87BEEB;border-radius:8px;color:#0a3256;margin-top:.75rem}.preview-panel{background:#fff;border-radius:12px;box-shadow:0 4px 20px #0000001a;overflow:hidden;height:fit-content;min-height:600px}.preview-placeholder{padding:3rem;text-align:center;color:#666;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center}.preview-placeholder h3{font-size:1.5rem;margin-bottom:1rem;color:#333}.preview-header{padding:1.5rem;border-bottom:1px solid #e0e0e0;display:flex;justify-content:space-between;align-items:center;background:#f8f9fa}.preview-header h3{font-size:1.2rem;font-weight:600;color:#333}.preview-actions{display:flex;gap:.75rem}.preview-content{height:calc(100vh - 200px);min-height:500px}.preview-iframe{width:100%;height:100%;border:none;background:#fff}.error{padding:1rem;background:#ffe6e6;border:1px solid #ff9999;border-radius:8px;color:#c00;margin-top:1rem}.hint{font-size:.9rem;color:#0a3256;font-style:italic;margin-top:.5rem;opacity:.8}.download-actions{display:flex;flex-direction:column;gap:.75rem}@media (max-width: 1024px){.app-content{grid-template-columns:1fr;gap:1.5rem}.control-panel{position:static}.preview-content{height:500px}}@media (max-width: 768px){.app-header{padding:1.5rem}.header-content{flex-direction:column;gap:1rem}.company-logo{height:40px}.app-header h1{font-size:2rem}.app-content,.control-panel{padding:1rem}.button-group{flex-direction:column}.preview-header{flex-direction:column;gap:1rem;align-items:stretch}.preview-actions{justify-content:center}.preview-content{height:300px}.download-actions{flex-direction:column}}