#puzzle-app-ps_rectangle{width:100%;max-width:100%;min-width:0;box-sizing:border-box}
#puzzle-app-ps_rectangle *,#puzzle-app-ps_rectangle *::before,#puzzle-app-ps_rectangle *::after{box-sizing:border-box}
#puzzle-app-ps_rectangle *{ box-sizing: border-box; font-family: 'Segoe UI', system-ui, sans-serif; }
        #puzzle-app-ps_rectangle{ margin: 0; padding: 20px; min-height: 100vh; background: #f5f7fa; display: flex; align-items: center; justify-content: center; }
        #puzzle-app-ps_rectangle .container{ background: white; border-radius: 16px; box-shadow: 0 10px 40px rgba(0,0,0,0.1); padding: 30px; width: 100%; max-width: 900px; margin: 20px; }
        #puzzle-app-ps_rectangle h1{ color: #2c3e50; text-align: center; margin-bottom: 15px; font-weight: 700; font-size: 1.8em; }
        #puzzle-app-ps_rectangle .themes-menu{ display: flex; justify-content: center; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; }
        #puzzle-app-ps_rectangle .theme-card{ padding: 10px 16px; border-radius: 10px; cursor: pointer; transition: all 0.3s; background: white; border: 2px solid #e0e6ed; font-weight: 600; color: #2c3e50; font-size: 0.95em; }
        #puzzle-app-ps_rectangle .theme-card:hover{ transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0,0,0,0.1); }
        #puzzle-app-ps_rectangle .theme-card.active{ border-color: #3498db; background: #f0f7ff; }
        #puzzle-app-ps_rectangle .levels-compact{ display: flex; justify-content: center; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; }
        #puzzle-app-ps_rectangle .level-compact{ display: flex; flex-direction: column; align-items: center; padding: 10px 16px; border-radius: 10px; cursor: pointer; transition: all 0.3s; background: white; border: 2px solid #e0e6ed; min-width: 90px; position: relative; }
        #puzzle-app-ps_rectangle .level-compact:hover{ transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0,0,0,0.1); }
        #puzzle-app-ps_rectangle .level-compact.active{ border-color: #3498db; background: #f0f7ff; }
        #puzzle-app-ps_rectangle .level-stars{ font-size: 1.2em; font-weight: bold; margin-bottom: 4px; }
        #puzzle-app-ps_rectangle .level-name-compact{ font-size: 0.85em; font-weight: 600; color: #2c3e50; margin-bottom: 2px; }
        #puzzle-app-ps_rectangle .level-stats-compact{ font-size: 0.75em; color: #7f8c8d; }
        #puzzle-app-ps_rectangle .level-tooltip{ position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); background: #2c3e50; color: white; padding: 6px 10px; border-radius: 6px; font-size: 0.8em; white-space: nowrap; opacity: 0; visibility: hidden; transition: opacity 0.3s; margin-bottom: 8px; z-index: 100; }
        #puzzle-app-ps_rectangle .level-compact:hover .level-tooltip{ opacity: 1; visibility: visible; }
        #puzzle-app-ps_rectangle .level-tooltip:after{ content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border-width: 4px; border-style: solid; border-color: #2c3e50 transparent transparent transparent; }
        
        #puzzle-app-ps_rectangle .task-display{ background: #fff; border-radius: 16px; padding: 20px; text-align: center; margin-bottom: 15px; border: 2px solid #e0e6ed; box-shadow: 0 4px 12px rgba(0,0,0,0.05); position: relative; }
        #puzzle-app-ps_rectangle .task-example{ margin: 0; display: flex; align-items: center; justify-content: center; position: relative; }
        #puzzle-app-ps_rectangle #figureSvg{ width: 100%; max-width: 580px; height: auto; display: block; margin: 0 auto; }
        
        /* 🔧 Слой для пользовательских элементов */
        #puzzle-app-ps_rectangle #drawingLayer{
            position: absolute; top: 0; left: 0;
            width: 100%; height: 100%;
            pointer-events: none; cursor: default; z-index: 5;
        }
        #puzzle-app-ps_rectangle #drawingLayer.active{ 
            pointer-events: all; 
            cursor: crosshair;
        }
        /* 🔧 Скрываем курсор при режиме ластика */
        #puzzle-app-ps_rectangle #drawingLayer.eraser-active{
            cursor: none;
        }
        
        #puzzle-app-ps_rectangle .task-description{ font-size: 0.95em; color: #2c3e50; font-weight: 600; margin-top: 8px; }

        /* 🔧 Панель инструментов */
        #puzzle-app-ps_rectangle .toolbar-btn{ 
            position: absolute; top: 15px; left: 15px; 
            background: white; border: 1px solid #e0e6ed; border-radius: 8px; 
            width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
            font-size: 1.2em; cursor: pointer; transition: all 0.3s; opacity: 0.7; z-index: 10;
        }
        #puzzle-app-ps_rectangle .toolbar-btn:hover{ opacity: 1; box-shadow: 0 2px 8px rgba(0,0,0,0.1); transform: translateY(-1px); }
        #puzzle-app-ps_rectangle .toolbar-btn.active{ opacity: 1; background: #e8f4fd; border-color: #3498db; box-shadow: 0 0 0 2px rgba(52,152,219,0.2); }
        
        #puzzle-app-ps_rectangle #screenshotBtn{ left: 15px; }
        #puzzle-app-ps_rectangle #drawBtn{ left: 57px; }

        /* 🔧 Инструменты рисования (появляются только в режиме рисования) */
        #puzzle-app-ps_rectangle .draw-toolbar{
            position: absolute; top: 60px; left: 15px;
            display: none; gap: 6px; pointer-events: all; z-index: 20;
        }
        #puzzle-app-ps_rectangle .draw-toolbar.visible{ display: flex; }
        #puzzle-app-ps_rectangle .draw-btn{
            background: white; border: 1px solid #e0e6ed; border-radius: 8px; 
            width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
            font-size: 1em; cursor: pointer; transition: all 0.2s; opacity: 0.8;
            user-select: none;
            padding: 0;
        }
        #puzzle-app-ps_rectangle .draw-btn:hover{ opacity: 1; background: #f8fafc; }
        #puzzle-app-ps_rectangle .draw-btn.active{ opacity: 1; background: #e8f4fd; border-color: #3498db; box-shadow: 0 0 0 2px rgba(52,152,219,0.2); }
        #puzzle-app-ps_rectangle .draw-btn img,
#puzzle-app-ps_rectangle .draw-btn svg{
            width: 24px;
            height: 24px;
            display: block;
        }
        
        /* 🔧 Скрываем рисование на мобильных */
        @media (max-width: 767px){#puzzle-app-ps_rectangle #drawBtn,
#puzzle-app-ps_rectangle .draw-toolbar{ display: none !important; }
            #puzzle-app-ps_rectangle #screenshotBtn{ left: 15px; }}

        #puzzle-app-ps_rectangle .controls-row{ display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: center; gap: 15px; margin: 15px 0 5px; }
        #puzzle-app-ps_rectangle .input-block{ flex: 0 1 280px; }
        #puzzle-app-ps_rectangle .input-label{ display: block; margin-bottom: 5px; color: #2c3e50; font-weight: 600; font-size: 0.9em; }
        #puzzle-app-ps_rectangle input{ width: 100%; padding: 11px 14px; border: 2px solid #e0e6ed; border-radius: 8px; font-size: 1.05em; transition: all 0.3s; background: #f8fafc; text-align: center; height: 44px; }
        #puzzle-app-ps_rectangle input:focus{ outline: none; border-color: #667eea; background: white; box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1); }
        
        #puzzle-app-ps_rectangle .new-task-btn{ height: 44px; flex: 0 0 auto; background: #3498db; color: white; border: none; border-radius: 8px; padding: 0 20px; font-size: 0.95em; font-weight: 600; cursor: pointer; transition: all 0.3s; white-space: nowrap; margin: 0; }
        #puzzle-app-ps_rectangle .new-task-btn:hover{ background: #2980b9; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(52, 152, 219, 0.3); }

        #puzzle-app-ps_rectangle .check-btn{ width: 100%; padding: 14px; border: none; border-radius: 8px; font-size: 1.05em; font-weight: 600; cursor: pointer; transition: all 0.3s; background: #2ecc71; color: white; margin: 10px 0 0; flex-basis: 100%; }
        #puzzle-app-ps_rectangle .check-btn:hover:not(:disabled){ background: #27ae60; transform: translateY(-1px); }
        #puzzle-app-ps_rectangle .check-btn:disabled{ opacity: 0.65; cursor: default; transform: none; box-shadow: none; }

        #puzzle-app-ps_rectangle .result{ margin-top: 15px; padding: 15px; border-radius: 8px; text-align: center; font-size: 1em; font-weight: 600; display: none; animation: ps-rectangle-fade-in 0.4s ease; }
        @keyframes ps-rectangle-fade-in{ from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
        #puzzle-app-ps_rectangle .success{ background: #d5f4e6; color: #27ae60; border: 2px solid #2ecc71; }
        #puzzle-app-ps_rectangle .error{ background: #ffeaea; color: #e74c3c; border: 2px solid #e74c3c; }
        #puzzle-app-ps_rectangle .stats{ display: flex; justify-content: space-around; margin-top: 15px; padding: 12px; background: #f8f9fa; border-radius: 8px; font-size: 0.9em; font-weight: 500; }
        #puzzle-app-ps_rectangle .stat-item{ text-align: center; }
        #puzzle-app-ps_rectangle .stat-value{ font-size: 1.4em; font-weight: 700; color: #667eea; display: block; }
        #puzzle-app-ps_rectangle .cache-control{ text-align: center; margin-top: 12px; padding-top: 12px; border-top: 1px solid #eee; }
        #puzzle-app-ps_rectangle .clear-cache-btn{ background: transparent; color: #95a5a6; border: 1px solid #ddd; padding: 5px 10px; font-size: 0.8em; border-radius: 6px; cursor: pointer; transition: all 0.3s; }
        #puzzle-app-ps_rectangle .clear-cache-btn:hover{ background: #f8f9fa; color: #7f8c8d; }
        #puzzle-app-ps_rectangle .cache-info{ font-size: 0.7em; color: #bdc3c7; margin-top: 5px; }
        
        @media (max-width: 767px){#puzzle-app-ps_rectangle .container{ padding: 15px; max-width: 100%; }
            #puzzle-app-ps_rectangle h1{ font-size: 1.4em; margin-bottom: 8px; }
            #puzzle-app-ps_rectangle .task-display{ padding: 12px; margin-bottom: 8px; }
            #puzzle-app-ps_rectangle #figureSvg{ max-width: 340px !important; }
            #puzzle-app-ps_rectangle .task-description{ font-size: 0.85em; margin-top: 5px; }
            
            #puzzle-app-ps_rectangle .controls-row{ flex-direction: column; align-items: stretch; gap: 4px; margin: 4px 0 0; }
            #puzzle-app-ps_rectangle .input-block{ order: 1; margin-bottom: 0; width: 100%; flex: 0 0 auto; }
            #puzzle-app-ps_rectangle .check-btn{ order: 2; margin: 0; padding: 12px; flex-basis: auto; width: 100%; }
            #puzzle-app-ps_rectangle .new-task-btn{ order: 3; width: 100%; justify-content: center; margin-top: 6px; }
            #puzzle-app-ps_rectangle .stats{ padding: 10px; font-size: 0.8em; }}
        @media (max-width: 374px){#puzzle-app-ps_rectangle .levels-compact{ flex-wrap: nowrap; justify-content: space-between; gap: 6px; }
            #puzzle-app-ps_rectangle .level-compact{ padding: 8px 4px; min-width: 0; flex: 1; }
            #puzzle-app-ps_rectangle .level-name-compact{ font-size: 0.7em; }
            #puzzle-app-ps_rectangle .level-stars{ font-size: 1em; margin-bottom: 2px; }
            #puzzle-app-ps_rectangle .level-stats-compact{ font-size: 0.6em; }}
        @media (max-width: 480px){
            #puzzle-app-ps_rectangle{padding:0;min-height:0}
            #puzzle-app-ps_rectangle .container{min-width:0;margin:0}
            #puzzle-app-ps_rectangle .levels-compact{flex-wrap:wrap}
            #puzzle-app-ps_rectangle .level-compact{min-width:0;flex:1 1 5rem}
            #puzzle-app-ps_rectangle .level-tooltip{display:none}
        }

        /* 🔧 Курсор-круг для ластика */
        #puzzle-app-ps_rectangle #eraserCursor{
            pointer-events: none;
            display: none;
        }

        /* 🔧 Всплывающее поле ввода текста */
        #puzzle-app-ps_rectangle #textInputPopup{
            position: fixed;
            z-index: 1000;
            background: white;
            border: 2px solid #3498db;
            border-radius: 8px;
            padding: 4px 8px;
            display: none;
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
            min-width: 120px;
        }
        #puzzle-app-ps_rectangle #textInputPopup input{
            width: 100%;
            padding: 4px 6px;
            border: 1px solid #e0e6ed;
            border-radius: 4px;
            font-size: 0.9em;
            text-align: center;
            height: 28px;
            background: #f8fafc;
        }
        #puzzle-app-ps_rectangle #textInputPopup input:focus{
            outline: none;
            border-color: #3498db;
            background: white;
        }
        #puzzle-app-ps_rectangle #textInputPopup .popup-actions{
            display: flex;
            gap: 4px;
            margin-top: 4px;
            justify-content: center;
        }
        #puzzle-app-ps_rectangle #textInputPopup .popup-btn{
            padding: 2px 8px;
            font-size: 0.8em;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            background: #e0e6ed;
            color: #2c3e50;
        }
        #puzzle-app-ps_rectangle #textInputPopup .popup-btn.confirm{
            background: #2ecc71;
            color: white;
        }
        #puzzle-app-ps_rectangle #textInputPopup .popup-btn.cancel{
            background: #e74c3c;
            color: white;
        }
        #puzzle-app-ps_rectangle #textInputPopup .popup-btn:hover{
            opacity: 0.9;
        }