:root {
            --bg-color: #0f0f12;
            --panel-color: #161622;
            --text-color: #ffffff;
            --accent-color: #5537aa;
        }

        body {
            font-family: 'Segoe UI', system-ui, sans-serif;
            background-color: var(--bg-color);
            color: var(--text-color);
            margin: 0;
            padding: 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        h1 { margin-bottom: 30px; color: var(--accent-color); font-size: 28px; }
        .container {
            display: flex;
            gap: 10px;
            max-width: 2000px;
            width: 100%;
            flex-wrap: wrap;
        }

        /* CONTROLS PANEL */
        .controls-panel {
            flex: 1;
            min-width: 360px;
            background-color: var(--panel-color);
            padding: 25px;
            border-radius: 12px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.6);
            height: fit-content;
        }

        .control-group {
            margin-bottom: 20px;
            border-bottom: 1px solid #2d2d3f;
            padding-bottom: 15px;
        }

        h3 { margin-top: 0; color: #aaa; font-size: 16px; text-transform: uppercase; letter-spacing: 1px; }
        label { display: block; margin-bottom: 8px; font-weight: bold; font-size: 14px; color: #ddd; }
        
        input[type="text"], select, input[type="range"] {
            width: 100%;
            margin-bottom: 12px;
            box-sizing: border-box;
            background-color: #20202e;
            color: white;
            border: 1px solid #3d3d54;
            padding: 10px;
            border-radius: 6px;
            font-size: 14px;
        }
        
        input[type="color"] {
            width: 100%;
            height: 40px;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            background: none;
            margin-bottom: 12px;
        }

        /* DRAG AND DROP ZONES */
        .drop-zone {
            border: 2px dashed #44445c;
            border-radius: 8px;
            padding: 20px;
            text-align: center;
            background-color: #1a1a26;
            cursor: pointer;
            transition: all 0.3s ease;
            margin-bottom: 15px;
            color: #888;
            font-size: 13px;
        }
        .drop-zone:hover, .drop-zone.drag-over {
            border-color: var(--accent-color);
            background-color: #222235;
            color: #fff;
        }

        .stat-control { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
        .stat-control input[type="range"] { flex: 1; margin: 0; }
        .stat-control span { min-width: 35px; text-align: right; font-size: 14px; font-weight: bold; }
        
        button {
            background-color: var(--accent-color);
            color: white;
            border: none;
            padding: 10px 15px;
            border-radius: 6px;
            cursor: pointer;
            font-weight: bold;
            transition: background 0.2s;
        }
        button:hover { background-color: #5537aa; }
        .btn-delete { background-color: #ed4245; padding: 6px 10px; }
        .btn-delete:hover { background-color: #c93b3e; }
        .btn-download { width: 100%; padding: 15px; font-size: 16px; margin-top: 15px; background-color: #248046; }
        .btn-download:hover { background-color: #1a6535; }

        .error-msg {
            color: #ed4245;
            font-size: 12px;
            display: none;
            margin-top: -10px;
            margin-bottom: 10px;
            font-weight: bold;
        }

        /* PREVIEW CARD AREA */
        .preview-wrapper { 
            flex: 1.8; 
            display: flex; 
            justify-content: center; 
            align-items: flex-start; 
            /* Sticky Configuration */
            position: sticky;
            top: 20px;
            align-self: flex-start;
        }

        #character-card {
            width: 1000px; 
            height: 550px; 
            display: flex;
            background-color: #1e1e24;
            background-size: cover;
            background-position: center;
            border-radius: 14px;
            overflow: hidden;
            position: relative;
            box-shadow: 0 10px 30px rgba(0,0,0,0.8);
            transition: all 0.3s ease;
        }

        .zone-radar {
            box-sizing: border-box;
            backdrop-filter: blur(4px);
            transition: all 0.3s ease;
            position: relative; 
            min-height: 0; 
            min-width: 0;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .radar-wrapper { position: relative; width: 100%; height: 100%; }
        .zone-profile { box-sizing: border-box; transition: all 0.3s ease; flex-shrink: 0; display: flex; }

        .char-avatar-container {
            border-radius: 50%;
            border: 4px solid var(--accent-color); 
            overflow: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: rgba(0,0,0,0.5);
            box-shadow: 0 4px 15px rgba(0,0,0,0.6);
            transition: all 0.3s ease;
            flex-shrink: 0;
        }
        #char-img-preview { width: 100%; height: 100%; object-fit: cover; display: none; }
        .placeholder-text { color: #888; font-style: italic; text-align: center; font-size: 13px; padding: 10px; }

        #char-name-display {
            font-weight: 900;
            color: #ffffff;
            text-shadow: 0 2px 8px rgba(0,0,0,0.9);
            letter-spacing: 1px;
            word-wrap: break-word;
            transition: all 0.3s ease;
            font-family: 'Segoe UI', system-ui, sans-serif; /* Default Font */
        }

        /* DYNAMIC LAYOUTS */
        .layout-classic { flex-direction: row; }
        .layout-classic .zone-radar { width: 65%; height: 100%; background: rgba(0,0,0,0.65); padding: 25px; order: 1; }
        .layout-classic .zone-profile { width: 35%; height: 100%; background: rgba(0,0,0,0.35); flex-direction: column; justify-content: center; align-items: center; gap: 20px; padding: 20px; order: 2; }
        .layout-classic .char-avatar-container { width: 220px; height: 220px; } /* Ajustado a la nueva escala */
        .layout-classic #char-name-display { font-size: 28px; text-align: center; width: 100%; }

        .layout-reverse { flex-direction: row; }
        .layout-reverse .zone-profile { width: 35%; height: 100%; background: rgba(0,0,0,0.35); flex-direction: column; justify-content: center; align-items: center; gap: 20px; padding: 20px; order: 1; }
        .layout-reverse .zone-radar { width: 65%; height: 100%; background: rgba(0,0,0,0.65); padding: 25px; order: 2; }
        .layout-reverse .char-avatar-container { width: 220px; height: 220px; }
        .layout-reverse #char-name-display { font-size: 28px; text-align: center; width: 100%; }

        .layout-header { flex-direction: column; }
        .layout-header .zone-profile { width: 100%; height: 140px; background: rgba(0,0,0,0.6); flex-direction: row; justify-content: space-between; align-items: center; padding: 0 40px; border-bottom: 2px solid rgba(255,255,255,0.05); order: 1; }
        .layout-header .zone-radar { width: 100%; flex: 1; background: rgba(0,0,0,0.3); padding: 15px; order: 2; }
        .layout-header .char-avatar-container { width: 110px; height: 110px; order: 2; }
        .layout-header #char-name-display { font-size: 38px; text-align: left; order: 1; max-width: 70%; overflow: hidden; }

        .layout-footer { flex-direction: column; }
        .layout-footer .zone-radar { width: 100%; flex: 1; background: rgba(0,0,0,0.3); padding: 15px; border-bottom: 2px solid rgba(255,255,255,0.05); order: 1; }
        .layout-footer .zone-profile { width: 100%; height: 140px; background: rgba(0,0,0,0.6); flex-direction: row; justify-content: space-between; align-items: center; padding: 0 40px; order: 2; }
        .layout-footer .char-avatar-container { width: 110px; height: 110px; order: 1; }
        .layout-footer #char-name-display { font-size: 38px; text-align: right; order: 2; max-width: 70%; overflow: hidden; }

        /* MODAL CROPPER */
        .modal {
            display: none;
            position: fixed;
            top: 0; left: 0; width: 100%; height: 100%;
            background: rgba(0,0,0,0.9);
            z-index: 1000;
            justify-content: center;
            align-items: center;
            padding: 20px;
        }
        .modal-content { background: #161622; padding: 20px; border-radius: 12px; max-width: 600px; width: 100%; display: flex; flex-direction: column; gap: 15px; }
        .cropper-container-wrapper { max-height: 380px; overflow: hidden; background: #000; }
        .modal-actions { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
        .cropper-tools { display: flex; gap: 6px; }

        /* FOOTER N3RKEL.COM */
        .site-footer {
            margin-top: 50px;
            width: 100%;
            max-width: 1500px;
            text-align: center;
            padding: 20px 0;
            border-top: 1px dashed #2d2d3f;
        }

        .site-footer a {
            color: #888;
            text-decoration: none;
            font-family: 'Courier New', Courier, monospace; /* Tipografía estilo terminal */
            font-size: 15px;
            transition: all 0.2s ease;
        }

        .site-footer a:hover {
            color: var(--accent-color);
            text-decoration: underline;
            text-decoration-style: dotted;
            text-underline-offset: 5px;
            text-shadow: 0 0 8px rgba(85, 55, 170, 0.4);
        }