body{margin:0;font-family:Roboto Condensed,sans-serif;background-color:#1c1c1c;color:#e0e0e0;display:flex;box-sizing:border-box}.page-container{display:flex;flex-wrap:wrap;gap:30px;width:100%;max-width:1700px;align-items:flex-start;justify-content:center;padding:20px}.form-container{flex-basis:400px;flex-grow:1;max-width:100%;background-color:#2a2a2a;padding:20px 30px;border-radius:8px;display:flex;flex-direction:column;min-height:700px}#form-wizard{flex-grow:1;position:relative}h1{text-align:center;color:#fff;margin-bottom:20px}.form-section{margin-bottom:25px;border-bottom:1px solid #444;padding-bottom:15px}.form-section:last-child{border-bottom:none}.form-group{margin-bottom:15px;display:flex;flex-direction:column}.form-group label{margin-bottom:5px;font-weight:700;font-size:14px;color:#bbb}.form-group input,.form-group select,.form-group textarea{width:100%;padding:10px;background-color:#333;border:1px solid #555;border-radius:4px;color:#e0e0e0;font-size:16px;box-sizing:border-box;font-family:Roboto Condensed,sans-serif}.form-group textarea{resize:vertical}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px 20px}.rule{font-size:14px;color:#aaa;background-color:#333;padding:10px;border-radius:4px;margin-bottom:15px;text-align:center}.error-message{color:#ff6b6b;background-color:#5d2a2a;padding:10px;border-radius:4px;margin-bottom:15px;font-weight:700;text-align:center}.hidden{display:none}.form-page{display:none;padding:5px;position:relative}.form-page.active{display:block;animation:fadeIn .5s ease-in-out}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}#form-navigation{display:flex;justify-content:space-between;align-items:center;border-top:1px solid #444;padding-top:20px;margin-top:auto}.nav-btn,.nav-btn-download{padding:10px 20px;font-size:16px;font-weight:700;border:none;border-radius:5px;cursor:pointer;transition:background-color .3s,opacity .3s}.nav-btn{background-color:#34495e;color:#ecf0f1}.nav-btn:hover{background-color:#4a637d}.nav-btn:disabled{background-color:#2c3e50;color:#7f8c8d;cursor:not-allowed;opacity:.6}#export-buttons{display:flex;justify-content:flex-end;gap:10px;margin-bottom:20px;padding-bottom:15px;border-bottom:1px solid #444}#export-buttons .nav-btn,#export-buttons .nav-btn-download{padding:8px 15px;font-size:14px}.nav-btn-download{background-color:#4caf50;color:#fff}.nav-btn-download:hover{background-color:#45a049}.add-btn{background-color:#16a085}.add-btn:hover{background-color:#1abc9c}.remove-category-btn{position:absolute;top:5px;right:5px;background-color:#723232;border:1px solid #c0392b;color:#fff;width:28px;height:28px;border-radius:50%;font-size:20px;line-height:26px;cursor:pointer}.category-name-group input{font-size:1.2em;font-weight:700}.skills-in-category-container{margin-top:20px;padding-top:15px;border-top:1px dashed #555}.skill-form-block{background-color:#3e3e3e;border:1px solid #4f4f4f;padding:15px;border-radius:5px;margin-bottom:15px;position:relative}.skill-desc-input{min-height:100px}.remove-skill-btn{position:absolute;top:5px;right:5px;background-color:#555;border:1px solid #888;color:#fff;width:22px;height:22px;border-radius:50%;font-size:14px;line-height:20px;cursor:pointer}button.add-skill-btn{width:100%;padding:10px;background-color:#4a4a4a;border:1px solid #666;color:#fff;font-weight:700;cursor:pointer;border-radius:4px;transition:background-color .2s}button.add-skill-btn:hover{background-color:#5a5a5a}.card-preview-container{flex-basis:600px;flex-grow:1;max-width:100%;--bg-color-primary: #1a1a1a;--bg-color-secondary: #2c2c2e;--text-color-name: #e0e0e0;--icon-color-header: #fff;--icon-color-attributes: #fff;--text-color-attributes: #a0a0a0;--text-color-category: #fff;--text-color-skill-name: #c0c0c0;--text-color-skill-description: #a0a0a0;--dots-color: #fff;--delimiter-color: #444;--font-family: "Roboto Condensed", sans-serif}.character-card{width:100%;height:auto;background-color:#000;display:flex;box-shadow:0 10px 30px #00000080;font-family:var(--font-family)}.left-column{width:150px;background-color:var(--bg-color-secondary);display:flex;flex-direction:column;justify-content:space-between;padding:25px 0;z-index:2}.attributes-container{display:flex;flex-direction:column;align-items:center;gap:15px}.attribute-block{display:flex;flex-direction:column;align-items:center;width:100%}.attribute-top{display:flex;align-items:center;gap:12px}.attribute-icon{font-size:38px;color:var(--icon-color-attributes);width:40px;text-align:center}.attribute-value{font-size:38px;font-weight:700;color:var(--icon-color-attributes)}.attribute-label{font-size:14px;font-weight:700;text-transform:uppercase;color:var(--text-color-attributes);margin-top:2px;padding-left:5px;padding-right:5px}.custom-icon-wrapper{position:relative;width:40px;height:40px;display:flex;justify-content:center;align-items:center}.custom-icon-wrapper .fa-circle{font-size:38px;color:var(--icon-color-attributes)}.custom-icon-wrapper .fa-user{position:absolute;font-size:20px;color:var(--bg-color-secondary)}.right-column{flex-grow:1;background-color:var(--bg-color-primary);padding:20px 30px;z-index:1;color:var(--text-color-skill-description)}.header{text-align:center;padding-bottom:15px;margin-bottom:15px;border-bottom:1px solid var(--delimiter-color);align-items:center}.name-block{position:relative;display:inline-block;padding:5px 20px;margin-bottom:15px}.name{font-size:28px;font-weight:700;color:var(--text-color-name);text-transform:uppercase;letter-spacing:2px}.stats-line{display:flex;justify-content:center;gap:30px;flex-direction:row}.stat-item{display:flex;align-items:center;gap:8px;color:var(--icon-color-header);flex-direction:row}.stat-icon{font-size:24px}.stat-value{font-size:20px;font-weight:700;color:var(--icon-color-header)}.content{flex-grow:1}.skills-list-wrapper{display:grid;grid-template-columns:1fr 1fr;gap:0 30px;align-content:start;flex-grow:1}.skill-category-display-block{margin-bottom:20px;-moz-column-break-inside:avoid;break-inside:avoid}.category-title{font-size:16px;font-weight:700;color:var(--text-color-category);text-transform:uppercase;padding-bottom:5px;border-bottom:1px solid #555;border-bottom-color:var(--delimiter-color);margin-bottom:10px}.skill-display-block{margin-bottom:10px}.skill-item{display:flex;justify-content:space-between;align-items:center;margin-bottom:5px;flex-direction:row}.skill-name{font-size:14px;font-weight:700;color:var(--text-color-skill-name);text-transform:uppercase}.skill-dots{display:flex;gap:4px;flex-direction:row}.dot{width:10px;height:10px;border-radius:50%}.dot.filled{background-color:var(--dots-color);width:12px;height:12px}.dot.empty{background-color:transparent;border:2px solid var(--dots-color)}.skill-description{font-size:13px;color:var(--text-color-skill-description);line-height:1.5}.footer-link{margin-top:auto;padding-top:15px;text-align:right;font-size:14px;color:#777;font-weight:700}.form-footer{text-align:center;padding:20px 0 0;margin-top:20px;border-top:1px solid #444;font-size:13px;color:#888}.form-footer p{margin:5px 0;line-height:1.4}.form-footer a{color:#3498db;text-decoration:none;font-weight:700}.form-footer a:hover{text-decoration:underline}@media(max-width:1024px){.page-container{flex-direction:column;align-items:center}.form-container,.card-preview-container{flex-basis:auto;width:100%}}.form-page[data-v-c5929be3]{display:none;padding:5px;position:relative}.form-page.active[data-v-c5929be3]{display:block;animation:fadeIn-c5929be3 .5s ease-in-out}@keyframes fadeIn-c5929be3{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}