@media (max-width: 768px) {
            .category-title {
                font-size: 0.8em;
            }
        }

@media (max-width: 600px) {
            .category-title {
                font-size: 0.75em;
                margin-bottom: 8px;
            }
        }

@media (max-width: 768px) {
            .special-chars-section {
                padding: 12px;
            }

            .special-chars-title {
                font-size: 0.8em;
                margin-bottom: 10px;
            }

            .special-chars {
                gap: 5px;
            }
        }

@media (max-width: 480px) {
            .special-chars-section {
                padding: 10px;
            }

            .special-chars {
                gap: 4px;
            }
        }

@media (max-width: 768px) {
            .char-btn {
                padding: 6px 10px;
                font-size: 0.8em;
            }
        }

@media (max-width: 600px) {
            .char-btn {
                padding: 5px 8px;
                font-size: 0.7em;
            }
        }

@media (max-width: 768px) {
            .property-group {
                margin-bottom: 15px;
            }

            .property-label {
                font-size: 0.8em;
            }
        }

@media (max-width: 600px) {
            .property-group {
                margin-bottom: 12px;
            }

            .property-label {
                font-size: 0.75em;
            }
        }

@media (max-width: 600px) {
            .color-picker-group {
                flex-wrap: wrap;
                gap: 6px;
            }

            .color-input {
                width: 45px;
                height: 35px;
            }

            .color-value {
                flex: 1 1 100%;
                font-size: 0.75em;
            }
        }

@media (max-width: 600px) {
            .color-select {
                font-size: 0.75em;
                padding: 6px;
            }
        }

@media (max-width: 900px) {
            .attributes-grid {
                grid-template-columns: 1fr;
                gap: 6px;
            }
        }

@media (max-width: 600px) {
            .attributes-grid {
                grid-template-columns: 1fr;
                gap: 5px;
            }
        }

@media (max-width: 600px) {
            .attr-checkbox label {
                font-size: 0.8em;
            }
        }

@media (max-width: 600px) {
            .btn-primary, .btn-secondary, .btn-danger {
                padding: 8px 12px;
                font-size: 0.8em;
            }
            .property-actions-row .btn-primary,
            .property-actions-row .btn-danger {
                width: 100%;
            }
        }

@media (max-width: 1400px) {
            .main-layout {
                grid-template-columns: 380px 1fr 280px;
            }

            .left-panel {
                height: 750px;
            }

            .right-panel {
                height: 750px;
            }
        }

@media (max-width: 1200px) {
            .main-layout {
                grid-template-columns: 320px 1fr 260px;
                gap: 15px;
                padding: 0 15px 15px 15px;
            }

            .left-panel {
                height: 650px;
            }

            .right-panel {
                height: 650px;
            }
        }

@media (max-width: 1000px) {
            .main-layout {
                grid-template-columns: 1fr;
                padding: 0 20px 20px 20px;
                gap: 15px;
            }

            .left-panel, .right-panel {
                height: auto;
                max-height: 400px;
            }

            header {
                margin-bottom: 15px;
                height: 80px;
            }

            header h1 {
                font-size: 1.2em;
            }

            header h2 {
                font-size: 0.7em;
            }
        }

@media (max-width: 768px) {
            .main-layout {
                grid-template-columns: 1fr;
                padding: 0 15px 15px 15px;
                gap: 12px;
            }

            header {
                margin-bottom: 12px;
                height: 75px;
                padding: 0 10px;
            }

            header h1 {
                font-size: 1.1em;
            }

            header h2 {
                font-size: 0.65em;
            }

            .left-panel, .right-panel {
                max-height: 350px;
                padding: 15px;
            }

            .left-panel h3, .right-panel h3 {
                font-size: 0.95em;
            }

            .elements-grid {
                gap: 6px;
            }

            .element-btn {
                padding: 6px 8px;
                font-size: 0.75em;
            }

            .canvas, .preview-inline, .code-inline {
                padding: 15px;
            }

            .preview {
                font-size: 0.9em;
                min-height: 80px;
            }

            .code-output {
                font-size: 0.8em;
                min-height: 80px;
            }

            .element-item {
                padding: 3px 10px;
                height: 32px;
                font-size: 0.85em;
            }

            .btn-icon {
                width: 22px;
                height: 22px;
                font-size: 0.75em;
                margin-left: 3px;
            }

            .copy-btn, .reset-btn, .delete-btn {
                padding: 8px 12px;
                font-size: 0.85em;
            }
        }

@media (max-width: 600px) {
            .main-layout {
                grid-template-columns: 1fr;
                padding: 0 12px 12px 12px;
                gap: 10px;
            }

            body {
                font-size: 14px;
            }

            header {
                margin-bottom: 10px;
                height: 70px;
                padding: 0 5px;
            }

            header h1 {
                font-size: 1em;
            }

            header h2 {
                font-size: 0.6em;
            }

            .left-panel, .right-panel {
                max-height: 300px;
                padding: 12px;
            }

            .left-panel h3, .right-panel h3, .category-title {
                font-size: 0.9em;
                margin-bottom: 8px;
            }

            .elements-grid {
                gap: 5px;
            }

            .element-btn {
                padding: 5px 7px;
                font-size: 0.7em;
                border-radius: 4px;
            }

            .canvas {
                min-height: 80px;
                padding: 12px;
            }

            #sortable-list {
                gap: 6px;
            }

            .element-item {
                padding: 2px 8px;
                height: 30px;
                font-size: 0.8em;
                border-radius: 6px;
            }

            .element-label {
                font-size: 0.8em;
            }

            .btn-icon {
                width: 20px;
                height: 20px;
                font-size: 0.7em;
                margin-left: 2px;
            }

            .preview-inline, .code-inline {
                padding: 12px;
                margin-top: 10px;
            }

            .preview-inline h3, .code-inline h3 {
                font-size: 0.95em;
                margin-bottom: 10px;
            }

            .preview {
                font-size: 0.85em;
                min-height: 70px;
            }

            .code-output {
                font-size: 0.75em;
                min-height: 70px;
                padding: 10px;
            }

            .copy-btn, .reset-btn, .delete-btn {
                padding: 6px 10px;
                font-size: 0.8em;
                min-height: 35px;
            }

            .button-wrapper {
                gap: 8px;
            }

            .special-chars {
                gap: 5px;
            }

            .char-btn {
                padding: 6px 8px;
                font-size: 0.8em;
            }
        }

@media (max-width: 480px) {
            .container {
                padding: 0;
            }

            body {
                font-size: 13px;
            }

            header {
                min-height: 84px;
                height: auto;
                margin-bottom: 8px;
                padding: 10px 8px;
            }

            header h1 {
                font-size: 1.35rem;
                line-height: 1.2;
            }

            header h2 {
                font-size: 0.9rem;
                line-height: 1.3;
            }

            .main-layout {
                display: flex;
                flex-direction: column;
                padding: 0 10px 10px 10px;
                gap: 8px;
                margin-bottom: 20px;
            }

            .left-panel, .right-panel {
                max-height: 250px;
                padding: 10px;
                border-radius: 8px;
            }

            .left-panel h3, .right-panel h3 {
                font-size: 0.85em;
                margin-bottom: 8px;
            }

            .canvas {
                min-height: 70px;
                padding: 10px;
                border-radius: 8px;
            }

            .element-item {
                padding: 2px 6px;
                height: 28px;
                font-size: 0.75em;
            }

            .btn-icon {
                width: 18px;
                height: 18px;
                font-size: 0.6em;
            }

            .element-label {
                font-size: 0.75em;
            }

            .preview-inline, .code-inline {
                padding: 10px;
                margin-top: 8px;
            }

            .preview {
                font-size: 0.8em;
                min-height: 60px;
            }

            .code-output {
                font-size: 0.7em;
                min-height: 60px;
                padding: 8px;
            }

            .copy-btn, .reset-btn, .delete-btn {
                padding: 6px 8px;
                font-size: 0.75em;
            }

            .button-wrapper {
                gap: 6px;
                margin-top: 8px;
            }

            .special-chars {
                gap: 4px;
                flex-wrap: wrap;
            }

            .char-btn {
                padding: 4px 6px;
                font-size: 0.7em;
            }
        }

@media (max-height: 700px) {
            .left-panel, .right-panel {
                max-height: 400px !important;
            }

            header {
                height: 70px !important;
            }
        }

@media (max-height: 500px) {
            header {
                height: 60px !important;
                margin-bottom: 10px;
            }

            header h1 {
                font-size: 0.7em;
            }

            header h2 {
                font-size: 0.4em;
            }

            .left-panel, .right-panel {
                max-height: 300px !important;
            }
        }

@media (max-width: 600px) {
            .color-palette {
                grid-template-columns: repeat(auto-fill, minmax(25px, 1fr));
                gap: 4px;
                margin: 8px 0;
            }
        }

@media (max-width: 600px) {
            .color-swatch {
                width: 25px;
                height: 25px;
            }

            .color-swatch:hover {
                transform: scale(1.05);
            }
        }

@media (max-width: 600px) {
            .color-mode-tabs {
                gap: 6px;
                margin-bottom: 8px;
            }

            .color-mode-tabs button {
                padding: 5px 8px;
                font-size: 0.7em;
            }
        }

@media (max-width: 768px) {
            header {
                min-height: 88px;
                height: auto;
            }

            header h1 {
                font-size: 1.55rem;
                line-height: 1.2;
            }

            header h2 {
                font-size: 0.95rem;
                line-height: 1.3;
            }

            .right-panel {
                position: fixed;
                inset: 0;
                width: 100%;
                height: 100%;
                min-height: 100vh;
                height: 100dvh;
                max-height: none;
                border-radius: 0;
                z-index: 1000;
                transform: translateX(100%);
                transition: transform 0.25s ease;
                display: block;
                overflow-y: auto;
                padding: max(env(safe-area-inset-top), 56px) max(env(safe-area-inset-right), 16px) max(env(safe-area-inset-bottom), 16px) max(env(safe-area-inset-left), 16px);
            }

            .right-panel.mobile-open {
                transform: translateX(0);
            }

            .right-panel .panel-toggle {
                display: none;
            }

            .mobile-close-btn {
                display: flex;
            }

            .left-panel .panel-toggle {
                display: block;
            }

            .left-panel.collapsed #elementsPanel {
                display: none;
            }

            .left-panel.collapsed h3 {
                margin-bottom: 0;
                border-bottom: none;
                padding-bottom: 0;
            }
        }

@media (max-width: 600px) {
            .panel-toggle {
                display: block;
                padding: 8px 12px;
                font-size: 0.8em;
                margin-bottom: 8px;
            }
        }

@media (max-width: 480px) {
            .panel-toggle {
                padding: 6px 10px;
                font-size: 0.75em;
            }
        }

@media (max-width: 600px) {
            .about-bash {
                padding: 12px 14px;
            }

            .about-bash h2 {
            color: #2c3e50;
            font-size: 1.25rem;
            margin-bottom: 8px;
            text-align: center;
        }
        .about-bash p {
            color: #34495e;
            line-height: 1.6;
            text-align: center;
            max-width: 100%;
        }

        .about-bash ul,
        .about-bash ol {
            max-width: 100%;
            padding-left: 18px;
        }

        .about-bash pre {
            max-width: 100%;
            font-size: 0.85em;
            padding: 8px 10px;
        }
        }

@media (max-width: 600px) {
            .site-footer {
                font-size: 0.85rem;
                padding: 12px 8px 16px;
            }
        }