:root {
            --bg-color: #f4f7f6;
            --panel-bg: #ffffff;
            --accent: #3498db;
            --text-main: #2c3e50;
        }


        .app-container { max-width: 1200px; width: 100%; font-family: sans-serif;}
        .app-container label {padding-bottom: 1em; font-weight: bold;display: inline-block;}

        /* Preview Area */
        #preview-section {
            display: flex;
            /*flex-wrap: wrap;*/
            gap: 20px;
            justify-content: flex-start;
            margin-bottom: 30px;
            padding: 30px;
            background: #e9ecef;
            border-radius: 15px;
            min-height: 250px;
        }

        #preview-section{
        	max-height:50vh;
        	overflow: auto;
        	max-width: 100%;
        }

        .flashcard {
            background: white;
            border-radius: 12px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 20px;
            text-align: center;
            box-shadow: 0 8px 20px rgba(0,0,0,0.1);
            box-sizing: border-box;
            border-style: solid;
            overflow: hidden;
            flex-shrink: 0; /* Prevents squishing in preview */
            margin:auto;
        }

        .card-graphic {
            font-size: 2.5em;
            margin-bottom: 0.3em;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .card-graphic i { line-height: 1; }
        .card-graphic img { /*max-height: 80px;*/ width:40%; max-width: 100%; object-fit: contain; }

        /* Controls Layout */
        .editor-panels {
            display: grid;
            grid-template-columns: 1fr 450px;
            gap: 20px;
        }

        @media (max-width: 1000px) { .editor-panels { grid-template-columns: 1fr; } }

        .panel {
            background: var(--panel-bg);
            padding: 20px;
            border-radius: 12px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.05);
            max-height: 55vh;
            overflow: auto;
        }

        h2 { margin: 0 0 20px 0; font-size: 1.1rem; border-bottom: 2px solid #eee; padding-bottom: 8px; }

        /* Dual Input (Slider + Number) */
        .control-row {
            display: grid;
            grid-template-columns: 100px 1fr 70px 70px;
            align-items: center;
            gap: 10px;
            margin-bottom: 12px;
        }
        .control-row label { font-size: 0.8rem; font-weight: 600; color: #555; }
        .control-row input[type="range"] { width: 100%; }
        .control-row input[type="number"] { width: 100%; padding: 4px; border: 1px solid #ddd; border-radius: 4px; font-size: 0.8rem; }
        .unit-label { font-size: 0.7rem; color: #999; text-align: center; display: block; }

        /* Card Item Editor */
        .card-item-editor {
            background: #e4e4e4;
            padding: 15px;
            border-radius: 8px;
            margin-bottom: 15px;
            border: 1px solid #eee;
            /*border-left: 5px solid var(--accent);*/
            position: relative;
        }

        .input-group { margin-bottom: 10px; }
        label.small-label { display: block; font-size: 0.75rem; color: #888; margin-bottom: 3px; }
        
        input[type="text"], select {
            width: 100%;
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
            box-sizing: border-box;
        }

        .graphic-grid {
            display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px;
        }

        /* Buttons & Utility */
        .preset-btn {
            padding: 6px 12px; border: none; border-radius: 15px; cursor: pointer; font-size: 0.75rem; margin: 0 5px 5px 0;
        }
        .btn-add {
            width: 100%; padding: 12px; background: #27ae60; color: white; border: none; border-radius: 8px; cursor: pointer; font-weight: bold;
            max-width: max-content;
            margin: auto;
        }
        .download-group {
            display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 20px;
        }
        .btn-download {
            padding: 15px; background: var(--accent); color: white; border: none; border-radius: 8px; cursor: pointer; font-size: 0.9rem; font-weight: bold;
        }
        .btn-pdf { background: #e67e22; }
        .delete-btn {
            position: absolute; right: 10px; top: 10px; color: #e74c3c; background: none; border: none; cursor: pointer; padding: 5px;
        }