* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', sans-serif; }
        body {
            background-color: var(--bg);
            background-image:
                repeating-linear-gradient(45deg, rgba(38, 78, 112, 0.02) 0px, rgba(38, 78, 112, 0.02) 2px, transparent 2px, transparent 8px),
                radial-gradient(circle at 20% 40%, rgba(200, 120, 80, 0.05) 0%, transparent 30%);
            min-height: 100vh;
            padding: 20px;
            color: var(--text);
        }
        .container { max-width: 1400px; margin: 0 auto; }
        .glass-card {
            background: var(--paper);
            border: 1px solid var(--line);
            border-radius: 18px;
            box-shadow: 0 10px 24px rgba(38, 78, 112, 0.08);
            padding: 28px;
            margin-bottom: 20px;
        }
        .header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 20px; }
        h1 {
            color: var(--indigo);
            font-size: 31px;
            font-family: 'Noto Serif JP', serif;
            font-weight: 500;
            letter-spacing: 0.5px;
        }
        h2 {
            color: var(--indigo);
            font-family: 'Noto Serif JP', serif;
            font-weight: 500;
        }
        .btn {
            padding: 10px 20px;
            border-radius: 40px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s ease;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            border: 2px solid transparent;
        }
        .btn-primary { background: var(--terracotta); color: #fff; box-shadow: 0 2px 6px rgba(198, 73, 44, 0.28); }
        .btn-primary:hover { background: #a53c22; transform: translateY(-2px); box-shadow: 0 8px 18px rgba(198, 73, 44, 0.2); }
        .btn-secondary { background: transparent; color: var(--indigo); border-color: var(--indigo); }
        .btn-secondary:hover { background: var(--indigo); color: #fff; }
        .btn-sm { padding: 5px 10px; font-size: 13px; }

        .params-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 15px; margin-top: 20px; }
        .param-item label { display: block; margin-bottom: 5px; font-weight: 500; color: var(--muted); }
        input, select { width: 100%; padding: 10px; border: 1px solid var(--line); border-radius: 8px; font-size: 16px; background: #fffdf9; transition: border-color 0.2s ease, box-shadow 0.2s ease; }
        input:focus, select:focus { outline: none; border-color: var(--terracotta); box-shadow: 0 0 0 2px rgba(198, 73, 44, 0.1); }
        .checkbox-item { display: flex; align-items: center; gap: 10px; padding-top: 23px; }
        .checkbox-item input[type="checkbox"] { width: 20px; height: 20px; }

        .blocks-container { display: flex; gap: 20px; overflow-x: auto; padding-bottom: 20px; min-height: 400px; margin-top: 20px; }
        .block-column { background: #fffdf9; border-radius: 12px; padding: 15px; min-width: 320px; max-width: 320px; display: flex; flex-direction: column; border: 1px solid var(--line-soft); transition: border-color 0.2s, box-shadow 0.2s; }
        .block-column:hover { border-color: var(--line); box-shadow: 0 8px 20px rgba(38, 78, 112, 0.08); }
        .block-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; padding-bottom: 10px; border-bottom: 1px solid var(--line-soft); }
        .block-title { font-weight: 600; font-size: 16px; color: var(--indigo); background: transparent; border: 1px solid transparent; padding: 4px 8px; border-radius: 4px; cursor: text; }
        .block-title:hover { background: #f3ede4; }
        .block-title.editing { background: #fff; border: 1px solid var(--terracotta); outline: none; }
        .block-badge { background: var(--indigo); color: #fff; padding: 2px 10px; border-radius: 20px; font-size: 13px; }
        .block-meta { display: flex; align-items: center; gap: 6px; }
        .block-meta .groups-badge { background: #8a6f56; }
        .delete-block-btn { background: transparent; border: none; color: var(--terracotta); cursor: pointer; font-size: 16px; padding: 4px 8px; border-radius: 4px; }
        .delete-block-btn:hover { background: #fee2e2; }
        .delete-block-btn:disabled { opacity: 0.3; cursor: not-allowed; }
        .block-content { flex-grow: 1; min-height: 200px; margin-bottom: 15px; }
        .block-footer { display: flex; justify-content: flex-end; gap: 10px; margin-top: 10px; }
        .hint-strip {
            margin: 10px 0 18px;
            padding: 10px 12px;
            border-radius: 10px;
            background: #f3ede4;
            color: #2c241b;
            font-size: 13px;
            border: 1px solid var(--line);
        }
        .tools-strip {
            display: grid;
            grid-template-columns: 1.5fr 1fr 1fr auto;
            gap: 10px;
            margin-bottom: 14px;
            align-items: center;
        }
        .tools-strip input,
        .tools-strip select {
            padding: 8px 10px;
            font-size: 14px;
            border-width: 1px;
        }
        .tools-strip .btn {
            padding: 8px 12px;
            font-size: 13px;
        }
        .drop-active {
            border-color: var(--terracotta) !important;
            box-shadow: 0 0 0 3px rgba(198, 73, 44, 0.18);
            background: #fff5ee;
        }
        .empty-state {
            color: #64748b;
            text-align: center;
            padding: 30px 12px;
            font-size: 14px;
        }
        @media (max-width: 900px) {
            .tools-strip {
                grid-template-columns: 1fr;
            }
        }
        
        /* Стиль для верхней кнопки перехода */
        .block-column .btn-primary.btn-sm {
            margin-bottom: 15px;
            font-size: 12px;
            padding: 8px 10px;
            width: 100%;
            justify-content: center;
        }

        .participant { cursor: grab; background: #fff; border: 1px solid var(--line-soft); border-radius: 8px; padding: 10px; margin-bottom: 8px; transition: all 0.2s; box-shadow: 0 2px 4px rgba(0,0,0,0.02); }
        .participant:hover { background: #fff9f2; border-color: var(--terracotta); transform: translateY(-1px); box-shadow: 0 4px 8px rgba(198, 73, 44, 0.18); }
        .participant:active { cursor: grabbing; }
        .sortable-ghost {
            opacity: 0.35;
            background: #f9efe6 !important;
            border: 1px dashed #c98b71 !important;
            transform: none !important;
            box-shadow: none !important;
        }
        .sortable-chosen {
            background: #fff6ed;
            border-color: #c98b71;
        }
        .sortable-drag,
        .sortable-fallback {
            opacity: 1 !important;
            transform: none !important;
            box-shadow: 0 6px 12px rgba(0,0,0,0.18) !important;
            cursor: grabbing !important;
        }
        body.is-dragging .participant:hover {
            background: white;
            border-color: #e0e0e0;
            transform: none;
            box-shadow: 0 2px 4px rgba(0,0,0,0.02);
        }
        .participant-name { font-weight: 600; margin-bottom: 4px; }
        .participant-details { font-size: 12px; color: #6b5f52; display: flex; align-items: center; gap: 8px; }
        .level-badge { display: inline-block; padding: 2px 8px; border-radius: 12px; font-size: 11px; font-weight: 600; }
        .level-high { background: #d4edda; color: #155724; }
        .level-medium { background: #fff3cd; color: #856404; }
        .level-low { background: #f8d7da; color: #721c24; }
        .participant-club { font-size: 11px; color: #7d6e5a; margin-top: 4px; }

        .modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.7); display: none; justify-content: center; align-items: center; z-index: 2000; }
        .modal-content { background: var(--paper); padding: 30px; border-radius: 15px; max-width: 400px; width: 90%; border: 1px solid var(--line); }
        .modal-content h3 { margin-bottom: 20px; }
        .modal-content .form-group { margin-bottom: 15px; }
        .modal-content label { display: block; margin-bottom: 5px; font-weight: 500; color: var(--muted); }
        .modal-content input, .modal-content select { width: 100%; padding: 10px; border: 1px solid var(--line); border-radius: 5px; background: #fffdf9; }
        .modal-buttons { display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px; }

        #loadingOverlay { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(29,26,21,0.35); z-index: 9999; justify-content: center; align-items: center; }
        #loadingOverlay > div { background: white; padding: 20px; border-radius: 10px; text-align: center; }
        @media (max-width: 768px) { .header { flex-direction: column; align-items: stretch; } .btn { width: 100%; justify-content: center; } }

        /* ========== КРАСИВАЯ СТАТИСТИКА ========== */
        #statsContent {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
            gap: 20px;
            padding: 10px 0;
        }

        .stat-card {
            background: #fffdf9;
            border-radius: 16px;
            padding: 20px 15px;
            box-shadow: 0 8px 20px rgba(38, 78, 112, 0.08);
            display: flex;
            align-items: center;
            gap: 15px;
            transition: transform 0.2s ease, box-shadow 0.2s ease;
            border: 1px solid var(--line-soft);
            animation: fadeInUp 0.4s ease forwards;
            opacity: 0; /* начальное состояние для анимации */
        }

        .stat-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 12px 30px rgba(38, 78, 112, 0.14);
            border-color: var(--line);
        }

        .stat-icon {
            width: 48px;
            height: 48px;
            background: rgba(38, 78, 112, 0.1);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            color: var(--indigo);
        }

        .stat-content {
            flex: 1;
        }

        .stat-value {
            font-size: 26px;
            font-weight: 700;
            color: #2d3748;
            line-height: 1.2;
        }

        .stat-label {
            font-size: 14px;
            color: #7d6e5a;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        /* Цветовые акценты для разных типов карточек */
        .stat-card.total .stat-icon { background: rgba(38, 78, 112, 0.12); color: var(--indigo); }
        .stat-card.in-blocks .stat-icon { background: rgba(198, 73, 44, 0.12); color: var(--terracotta); }
        .stat-card.waiting .stat-icon { background: rgba(166, 101, 58, 0.12); color: #a5653a; }
        .stat-card.blocks-count .stat-icon { background: rgba(88, 116, 138, 0.14); color: #58748a; }
        .stat-card.groups-count .stat-icon { background: rgba(125, 110, 90, 0.15); color: #7d6e5a; }
        .stat-card.belts-yes .stat-icon { background: rgba(198, 73, 44, 0.12); color: var(--terracotta); }
        .stat-card.belts-no .stat-icon { background: rgba(95, 111, 126, 0.14); color: var(--muted); }

        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(10px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* Задержки анимации для каждой карточки */
        .stat-card:nth-child(1) { animation-delay: 0.1s; }
        .stat-card:nth-child(2) { animation-delay: 0.15s; }
        .stat-card:nth-child(3) { animation-delay: 0.2s; }
        .stat-card:nth-child(4) { animation-delay: 0.25s; }
        .stat-card:nth-child(5) { animation-delay: 0.3s; }
        .stat-card:nth-child(6) { animation-delay: 0.35s; }
        .stat-card:nth-child(7) { animation-delay: 0.4s; }