* { box-sizing: border-box; }
        body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background-color: #f4f6f9; margin: 0; padding: 20px; color: #333; }
        
        .app-grid { display: grid; grid-template-columns: 200px 1fr 200px; gap: 20px; max-width: 1400px; margin: 0 auto; }
        .ad-sidebar { background: #e2e8f0; border: 2px dashed #cbd5e1; border-radius: 12px; padding: 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #64748b; font-weight: bold; font-size: 14px; text-align: center; min-height: 500px; }
        .container { background: #ffffff; padding: 25px; border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.08); }
        h1, h2, h3 { color: #2c3e50; margin-top: 0; }
        .hidden { display: none !important; }
        
        input, select, textarea { padding: 10px; width: 100%; margin-bottom: 12px; font-size: 15px; border: 1px solid #ccc; border-radius: 6px; }
        textarea { resize: vertical; height: 60px; font-family: monospace; font-weight: bold; }
        
        .btn { padding: 12px 20px; cursor: pointer; border: none; border-radius: 6px; background-color: #007bff; color: white; font-weight: bold; font-size: 15px; transition: 0.2s; }
        .btn:hover { background-color: #0056b3; }
        .btn-danger { background-color: #dc3545; }
        .btn-danger:hover { background-color: #bd2130; }
        .btn-warning { background-color: #f39c12; color: white; }
        .btn-warning:hover { background-color: #d35400; }
        .btn-success { background-color: #2ecc71; color: white; }
        .btn-success:hover { background-color: #27ae60; }
        .btn-simul { background-color: #8e44ad; color: white; width: 100%; margin-top: 10px; font-size: 16px; border-radius: 8px; border: 2px solid #732d91; }
        .btn-simul:hover { background-color: #9b59b6; box-shadow: 0 0 10px rgba(142, 68, 173, 0.5); }
        
        .board-wrapper { margin: 15px auto; max-width: 400px; width: 100%; position: relative; }
        .board-with-coords { display: grid; grid-template-columns: 22px 1fr; grid-template-rows: 1fr 22px; gap: 0; }
        .board-coord-ranks { display: grid; grid-template-rows: repeat(8, 1fr); font-size: 11px; font-weight: bold; color: #7f8c8d; }
        .board-coord-ranks span { display: flex; align-items: center; justify-content: center; }
        .board-coord-files { grid-column: 2; display: grid; grid-template-columns: repeat(8, 1fr); font-size: 11px; font-weight: bold; color: #7f8c8d; }
        .board-coord-files span { text-align: center; padding-top: 2px; }
        .board-inner { grid-column: 2; grid-row: 1; position: relative; }
        .chess-board { display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(8, 1fr); width: 100%; aspect-ratio: 1 / 1; border: 5px solid #34495e; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); overflow: hidden; }
        .square { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; position: relative; user-select: none; }
        .square.light { background-color: #f0d9b5; }
        .square.dark { background-color: #b58863; }
        .square.selected { background-color: #74b9ff !important; } 
        .square.highlighted-danger { background-color: rgba(231, 76, 60, 0.65) !important; }
        .square.last-move { box-shadow: inset 0 0 0 4px rgba(155, 199, 0, 0.85); }
        .square.in-check { background-color: rgba(231, 76, 60, 0.55) !important; }
        .square.legal-move::after {
            content: ''; position: absolute; width: 28%; height: 28%; border-radius: 50%;
            background: rgba(0, 0, 0, 0.18); pointer-events: none; z-index: 1;
        }
        .square.legal-capture::after {
            width: 88%; height: 88%; border-radius: 50%; background: transparent;
            border: 5px solid rgba(0, 0, 0, 0.18);
        }
        .square.dark.legal-move::after, .square.dark.legal-capture::after { border-color: rgba(255,255,255,0.35); background: rgba(255,255,255,0.22); }
        .square.dark.legal-capture::after { background: transparent; border: 5px solid rgba(255,255,255,0.35); }

        .connection-banner {
            position: fixed; top: 0; left: 0; right: 0; z-index: 9999;
            padding: 10px; text-align: center; font-weight: bold; font-size: 14px;
        }
        .connection-banner.connecting { background: #f39c12; color: #fff; }
        .connection-banner.disconnected { background: #e74c3c; color: #fff; }
        .connection-banner.connected { background: #27ae60; color: #fff; }

        .promotion-overlay {
            position: fixed; inset: 0; background: rgba(0,0,0,0.55); z-index: 10000;
            display: flex; align-items: center; justify-content: center;
        }
        .promotion-picker {
            background: #fff; border-radius: 12px; padding: 20px; text-align: center;
            box-shadow: 0 8px 30px rgba(0,0,0,0.25); max-width: 320px; width: 90%;
        }
        .promotion-pieces { display: flex; gap: 10px; justify-content: center; margin-top: 12px; }
        .promotion-pieces button {
            width: 64px; height: 64px; border: 2px solid #bdc3c7; border-radius: 8px;
            background: #f8f9fa; cursor: pointer; padding: 4px;
        }
        .promotion-pieces button:hover { border-color: #3498db; background: #ebf5fb; }
        .promotion-pieces img { width: 100%; height: 100%; object-fit: contain; }

        .simul-ended-badge { font-size: 12px; color: #c0392b; font-weight: bold; }
        .btn-resign { width: 100%; max-width: 400px; margin: 10px auto; display: block; padding: 10px; font-size: 14px; }
        
        .arrows-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 10; }
        .piece-img { width: 90%; height: 90%; object-fit: contain; cursor: pointer; transition: transform 0.1s; z-index: 2; }
        .piece-img:hover { transform: scale(1.08); }
        
        .player-clock-bar { display: flex; justify-content: space-between; align-items: center; background: #ecf0f1; padding: 8px 12px; border-radius: 6px; margin-bottom: 5px; font-weight: bold; border: 1px solid #bdc3c7;}
        .clock-time { font-size: 20px; font-family: monospace; background: #2c3e50; color: #fff; padding: 4px 10px; border-radius: 4px; min-width: 75px; text-align: center; }
        .clock-active { background: #f1c40f; color: #d35400; box-shadow: 0 0 8px #f1c40f; }

        .answers-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 15px 0; }
        .btn-ans { background-color: #2ecc71; color: white; padding: 15px; font-size: 16px; border-radius: 8px; text-align: left; font-weight: bold; }
        
        #timer, #timer-coach { font-size: 28px; font-weight: bold; color: #e74c3c; margin: 10px 0; text-align: center; }
        .status-text { font-size: 16px; font-weight: bold; color: #16a085; margin: 10px 0; text-align: center; }
        .mode-badge { display: inline-block; padding: 6px 14px; border-radius: 20px; font-weight: bold; font-size: 14px; margin-bottom: 10px; }
        .turn-badge { display: inline-block; padding: 4px 10px; border-radius: 4px; font-weight: bold; font-size: 13px; margin-top: 5px; }

        .coach-layout { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 20px; text-align: left; }
        .log-box { background: #f8f9fa; border: 1px solid #e2e8f0; padding: 15px; border-radius: 8px; height: 250px; overflow-y: auto; }
        .simul-item { padding: 10px; margin-bottom: 8px; border-radius: 6px; background: #fff; border: 1px solid #ddd; cursor: pointer; display: flex; justify-content: space-between; align-items: center; transition: 0.2s; }
        .simul-item:hover { background: #f1f5f9; border-color: #94a3b8; }
        .simul-item.active { border: 2px solid #3498db; background: #ebf5fb; }
        .simul-indicator-green { width: 12px; height: 12px; background: #2ecc71; border-radius: 50%; display: inline-block; box-shadow: 0 0 5px #2ecc71;}
        .simul-indicator-wait { width: 12px; height: 12px; background: #bdc3c7; border-radius: 50%; display: inline-block; }

        .leaderboard-section { margin-top: 30px; border-top: 2px dashed #cbd5e1; padding-top: 20px; }
        table { width: 100%; border-collapse: collapse; margin-top: 10px; }
        th, td { padding: 12px; text-align: center; border-bottom: 1px solid #e2e8f0; }
        th { background-color: #34495e; color: white; border-radius: 4px 4px 0 0; }
        tr:nth-child(even) { background-color: #f8f9fa; }
        .rank-1 { font-weight: bold; color: #f1c40f; }

        .study-panel { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; padding: 12px; margin-bottom: 12px; }
        .study-nav { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
        .study-nav .btn { flex: 1; min-width: 44px; padding: 8px 10px; font-size: 14px; background: #34495e; }
        .study-nav .btn:hover { background: #2c3e50; }
        .move-list { background: #fff; border: 1px solid #ddd; border-radius: 6px; padding: 10px; min-height: 80px; max-height: 180px; overflow-y: auto; font-family: 'Segoe UI', monospace; font-size: 14px; line-height: 1.7; cursor: default; }
        .move-num { color: #7f8c8d; margin-right: 2px; font-weight: bold; }
        .move-san { cursor: pointer; padding: 1px 4px; border-radius: 3px; }
        .move-san:hover { background: #dfe6e9; }
        .move-san.move-current { background: #3498db; color: #fff; font-weight: bold; }
        .move-variation { color: #636e72; }
        .pgn-io { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; align-items: center; }
        .pgn-io .btn { flex: 1; min-width: 120px; padding: 8px; font-size: 13px; background: #16a085; }
        .pgn-io input[type=file] { font-size: 12px; flex: 1; min-width: 140px; }
        .quiz-stats-panel { background: #fffdf0; border: 2px solid #e67e22; border-radius: 8px; padding: 12px; margin-top: 10px; }
        .quiz-result-panel { background: #f0fff4; border: 2px solid #27ae60; border-radius: 8px; padding: 12px; margin: 10px auto; max-width: 400px; text-align: center; }
        .quiz-result-panel.wrong { background: #fff5f5; border-color: #e74c3c; }
        .room-badge { display: inline-block; background: #34495e; color: #fff; padding: 4px 12px; border-radius: 12px; font-size: 13px; margin-bottom: 8px; }
        .student-count-badge { display: inline-block; background: #27ae60; color: #fff; padding: 4px 12px; border-radius: 12px; font-size: 13px; margin-left: 6px; }
        .room-link-box { background: #e8f8f5; border: 1px solid #a3e4d7; border-radius: 8px; padding: 10px; margin-bottom: 12px; font-size: 13px; word-break: break-all; }
        .login-hint { font-size: 13px; color: #7f8c8d; margin: 8px 0 0; }

        @media (max-width: 1100px) { .app-grid { grid-template-columns: 1fr; } .ad-sidebar { min-height: 100px; } .coach-layout { grid-template-columns: 1fr; } }