<style>
        /* --- GRUNDLEGENDES DESIGN --- */
        *, *::before, *::after { box-sizing: border-box; }
       :root {
            --bg-color: #2b2e4a;
            --text-color: #ffffff;
            --accent: #e84545; /* Rot für PlanA / Chef */
            --panel-bg: rgba(30, 30, 40, 0.96);
            --success: #2ecc71;
            --gold: #f1c40f;
            --error: #c0392b;
            --ai-color: #9b59b6; 
            --law-color: #3498db; /* <-- DIESE ZEILE WURDE HINZUGEFÜGT (Blau) */
        }
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
            color: var(--text-color);
            margin: 0;
            height: 100vh;
            overflow: hidden;
            display: flex;
            flex-direction: column;
        }

        /* HEADER */
        header {
            background-color: rgba(0,0,0,0.95);
            padding: 10px 30px;
            display: flex;
            justify-content: space-between;
            align-items: center; 
            border-bottom: 3px solid var(--accent);
            height: auto;
            min-height: 80px;
            flex-shrink: 0;
            box-shadow: 0 5px 20px rgba(0,0,0,0.6);
            z-index: 50;
        }
        .header-left { display: flex; align-items: center; }
        .bc-logo { height: 55px; background: rgba(255,255,255,0.95); padding: 5px; border-radius: 4px; margin-right: 20px; }
        .title-group { display: flex; flex-direction: column; }
        .main-title { font-weight: bold; font-size: 1.6rem; color: #ffffff; letter-spacing: 0.5px; text-shadow: 0 2px 4px rgba(0,0,0,0.5); }
        .sub-title { font-size: 1rem; color: #bbb; letter-spacing: 1px; margin-top: 3px; font-weight: 300; }
        
        /* KPI BARS */
        .kpi-container { display: flex; gap: 20px; align-items: flex-start; }
        .kpi-box { text-align: center; width: 120px; position: relative; }
        .kpi-label { font-size: 0.7rem; color: #aaa; display: block; margin-bottom: 3px; }
        .progress-bg { background: #333; height: 10px; border-radius: 5px; overflow: hidden; border: 1px solid #444; }
        .progress-fill { height: 100%; transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1); }
.impressum-link { 
            display: inline-block; /* Geändert von block auf inline-block */
            margin-top: 0; 
            font-size: 0.7rem; 
            color: #888; 
            text-decoration: underline; 
            cursor: pointer; 
            transition: color 0.2s; 
        }        .impressum-link:hover { color: var(--gold); }

        /* STAGE LAYOUT */
        .stage {
            flex: 1; display: grid; grid-template-columns: 350px 1fr; gap: 20px; padding: 20px 40px; max-width: 1400px;
            margin: 0 auto; width: 100%; position: relative; overflow: hidden; 
        }

        /* LINKE SPALTE */
        .char-column { 
            display: flex; flex-direction: column; justify-content: flex-start; align-items: center; 
            height: 100%; position: relative; max-width: 100%; 
        }
        
        .privacy-hint-sidebar {
            font-size: 0.7rem; color: #aaa; margin-bottom: 10px; display: flex; align-items: flex-start; gap: 8px; line-height: 1.3;
            background: rgba(0,0,0,0.3); padding: 10px; border-radius: 6px; width: 100%; border-left: 2px solid #888;
        }
        .undo-btn {
            background: #444; border: 1px solid #666; color: white; padding: 8px 15px; border-radius: 4px; cursor: pointer; font-size: 0.9rem;
            display: flex; align-items: center; justify-content: center; gap: 5px; transition: 0.2s; width: 100%; margin-bottom: 10px;
        }
        .undo-btn:hover { background: #666; border-color: #888; }
        .undo-btn:disabled { opacity: 0.3; cursor: not-allowed; }

        .name-input-group { width: 100%; margin-bottom: 20px; text-align: left; display: none; }
        .name-label { font-size: 0.8rem; color: var(--gold); margin-bottom: 4px; display: block; line-height: 1.3; }
        .name-input {
            width: 100%; background: rgba(0,0,0,0.3); border: 1px solid #555; color: #fff; padding: 10px; border-radius: 4px;
            font-family: inherit; font-size: 1rem; transition: 0.2s; font-style: italic;
        }
        .name-input:focus { outline: none; border-color: var(--gold); background: rgba(0,0,0,0.5); }

        .char-img-container {
            width: 100%; height: 200px; display: flex; align-items: flex-end; justify-content: center;
            background: radial-gradient(circle at bottom, rgba(232, 69, 69, 0.15) 0%, transparent 70%); 
            margin-bottom: 0; transition: background 0.5s ease;
        }
        .char-img-container.klara-mode {
            background: radial-gradient(circle at bottom, rgba(155, 89, 182, 0.25) 0%, transparent 70%) !important;
        }
        .char-img { max-width: 100%; max-height: 100%; filter: drop-shadow(0 0 15px rgba(0,0,0,0.7)); transition: transform 0.3s ease-out; }
        
        .char-name-badge {
            background: var(--accent); color: white; padding: 8px 20px; border-radius: 20px; font-weight: bold; z-index: 10;
            font-size: 1.1rem; box-shadow: 0 4px 10px rgba(0,0,0,0.5); border: 1px solid rgba(255,255,255,0.2);
            margin-top: -25px; margin-bottom: 15px; position: relative; transition: background 0.5s;
        }
        .char-name-badge.klara-mode { background: var(--ai-color); }

        /* Container unter dem Bild (Links) */
        .char-extra-box {
            width: 100%; min-height: 100px; background: rgba(0,0,0,0.4); border: 1px solid #555; border-radius: 12px; padding: 20px; 
            backdrop-filter: blur(5px); display: flex; flex-direction: column; justify-content: center; align-items: center;
            text-align: left; animation: slideUp 0.8s ease-out;
        }
        .role-text { font-size: 0.95rem; line-height: 1.5; color: #ddd; }
        
        /* SPEZIELLER STYLE FÜR 'IHRE ROLLE' BOX (LINKS) */
        .role-box-left {
            width: 100%;
            background: #1a1a2e;
            border: 1px solid #444;
            border-radius: 8px;
            padding: 15px;
            text-align: left;
            box-shadow: 0 4px 10px rgba(0,0,0,0.5);
        }
        .role-title {
            color: #f1c40f;
            font-weight: bold;
            text-transform: uppercase;
            font-size: 0.8rem;
            letter-spacing: 1px;
            margin-bottom: 10px;
            display: block;
        }
        .role-description {
            font-size: 0.9rem;
            color: #ccc;
            margin-bottom: 15px;
            line-height: 1.4;
        }

        /* RECHTE SPALTE */
        .dialog-column { display: flex; flex-direction: column; gap: 20px; overflow-y: auto; padding-right: 10px; max-height: 88vh; }
        
        .dialog-box {
            background: var(--panel-bg); border: 1px solid #444; border-radius: 12px; padding: 35px;
            box-shadow: 0 15px 40px rgba(0,0,0,0.6); position: relative; backdrop-filter: blur(5px);
        }
        .dialog-box h2 { 
            margin-top: 0; 
            color: var(--accent); 
            font-size: 1.8rem; 
            margin-bottom: 20px; 
            /* WICHTIG: Genug Platz für die Button-Reihe oben drüber */
            padding-top: 30px; 
            /* Verhindert, dass der Titel zu breit wird und unter die Buttons rutscht */
            padding-right: 20px; 
            min-height: 40px;
            line-height: 1.2;
        }
        
        /* INHALT RECHTS (PlanA Infos) */
        .intro-title { color: #e84545; font-size: 2.2rem; font-weight: bold; margin-bottom: 20px; }
        .product-list { margin: 15px 0; line-height: 1.6; padding-left: 5px; }
        .product-list b { color: #fff; }

        .team-grid {
            display: grid; grid-template-columns: 260px 1fr;
            gap: 8px;
            background: rgba(0,0,0,0.3); padding: 15px; border-radius: 8px; border-left: 3px solid #e84545;
            margin-top: 20px; margin-bottom: 20px; font-size: 0.95rem;
        }
        .team-role { color: #f1c40f; font-weight: bold; }
        .team-name { color: #ffffff; }

        /* BUTTONS */
        .actions-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 15px; padding-bottom: 20px; }
        
        button.choice-btn {
            background: linear-gradient(180deg, #2d3436 0%, #1a1a1a 100%); border: 1px solid #555; color: white; padding: 18px 25px;
            border-radius: 8px; font-size: 1.1rem; cursor: pointer; transition: all 0.2s ease; text-align: left;
            position: relative; overflow: hidden; box-shadow: 0 4px 0 #000; width: 100%;
        }
        button.choice-btn:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 6px 0 #000; }
        /* --- NEU: Style für erledigte Aufgaben/Mails --- */
        .choice-btn.read {
            opacity: 0.7;
            border-color: #2ecc71;
            background: #2c3e50;
            position: relative;
        }
        .choice-btn.read::after {
            content: '✅';
            position: absolute;
            top: 10px;
            right: 10px;
            font-size: 1.2rem;
        }

        /* DYNAMISCHES DASHBOARD (Admin-Tool freundlich) */
        /* Wenn der Container im Dashboard-Modus ist: 3 Spalten */
        .actions-container.dashboard-mode {
            display: grid;
            grid-template-columns: repeat(3, 1fr); /* 3 Spalten nebeneinander */
            gap: 15px;
        }
        
        /* Die Buttons darin werden zu hohen Kacheln */
        .actions-container.dashboard-mode .choice-btn {
            min-height: 100px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
            font-size: 0.95rem;
            background: linear-gradient(135deg, #34495e 0%, #2c3e50 100%);
            border: 1px solid #4a69bd;
        }
        
        .actions-container.dashboard-mode .choice-btn:hover {
            transform: translateY(-3px);
            border-color: var(--gold);
        }

        /* Der Exit-Button soll trotzdem breit sein (über alle Spalten) */
        .actions-container.dashboard-mode .choice-btn.exit-btn {
            grid-column: 1 / -1; /* Volle Breite */
            min-height: 50px;    /* Flacher */
            background: linear-gradient(180deg, #c0392b 0%, #96281b 100%) !important;
            border: 1px solid #e74c3c !important;
            flex-direction: row; /* Icon wieder neben Text */
        }

        /* Handy-Anpassung für das Grid */
        @media (max-width: 600px) {
            .actions-container.dashboard-mode {
                grid-template-columns: 1fr 1fr; /* Auf Handy nur 2 Spalten */
            }
        }

        /* Start Button (Grün) */
        button.start-btn-green {
            background: linear-gradient(180deg, #27ae60 0%, #219150 100%); border: 1px solid #2ecc71;
            color: white; font-size: 1.1rem; font-weight: bold; padding: 12px; width: 100%;
            border-radius: 6px; cursor: pointer; box-shadow: 0 4px 0 #1e8449; transition: transform 0.1s; text-align: center;
        }
        button.start-btn-green:hover { transform: translateY(-2px); box-shadow: 0 6px 0 #1e8449; }
        button.start-btn-green:active { transform: translateY(2px); box-shadow: 0 2px 0 #1e8449; }

        /* ANIMATIONEN */
        .fade-in-effect { animation: fadeIn 0.5s ease-out forwards; }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
        @keyframes slideUp { from { transform: translateY(50px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

        /* OVERLAYS */
        .overlay {
            position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.92); z-index: 100;
            display: flex; flex-direction: column; align-items: center; justify-content: center; backdrop-filter: blur(5px);
        }
        .hidden { display: none !important; }

        .overlay-card {
            background: #222; border: 2px solid var(--accent); padding: 40px; border-radius: 12px;
            max-width: 1000px; width: 95%; text-align: center; box-shadow: 0 0 30px rgba(232, 69, 69, 0.2);
            max-height: 95vh; overflow-y: auto;
            position: relative; /* Für den Debug Button */
        }

        /* AI & QUIZ STYLES */
        .ai-input-area { width: 100%; min-height: 120px; background: #1a1a2e; border: 2px solid var(--ai-color); color: #fff; padding: 15px; font-size: 1.1rem; border-radius: 8px; margin-bottom: 15px; }
        .ai-feedback-box { background: rgba(155, 89, 182, 0.1); border-left: 4px solid var(--ai-color); padding: 15px; text-align: left; margin-top: 15px; border-radius: 4px; display: none; }
        .ai-score-bar { height: 8px; background: #333; width: 100%; border-radius: 4px; margin-top: 10px; overflow: hidden; }
        .ai-score-fill { height: 100%; width: 0%; background: var(--ai-color); transition: width 1s ease-out; }
        
        #quiz-questions-container { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; text-align: left; margin-bottom: 20px; }
        .quiz-option { display: block; text-align: left; background: #333; padding: 12px; margin: 5px 0; border-radius: 5px; cursor: pointer; border: 1px solid #555; transition: 0.2s; }
        .quiz-option:hover { background: #444; }
        .law-text { background: #111; padding: 15px; border-left: 4px solid #f1c40f; text-align: left; margin-bottom: 20px; color: #ccc; }

        .certificate-container { border: 10px solid var(--gold); padding: 40px; background: #fff; color: #222; width: 80%; max-width: 700px; text-align: center; box-shadow: 0 0 50px rgba(241, 196, 15, 0.5); animation: popIn 0.8s ease-out; }
        @keyframes popIn { 0% { transform: scale(0.5); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }

        .watermark { position: fixed; bottom: 20px; right: 30px; opacity: 0.1; font-size: 3rem; font-weight: bold; pointer-events: none; color: white; z-index: 0; }
        
        /* SKIP BUTTON STYLE */
        .debug-skip-btn {
            display: none; /* Standardmäßig ausgeblendet! */
            position: absolute; top: 10px; right: 10px; 
            background: transparent; border: 1px solid #444; color: #666; 
            font-size: 0.8rem; padding: 2px 6px; cursor: pointer; opacity: 0.3; transition: 0.2s;
            border-radius: 4px; z-index: 10;
        }
        .debug-skip-btn:hover { opacity: 1; color: white; border-color: white; }


/* KREUZWORTRÄTSEL STYLES (Modern) */
        .crossword-grid { 
            display: grid; 
            gap: 4px; 
            justify-content: center; 
            margin: 20px auto; 
            background: transparent; 
            padding: 0; 
            width: fit-content; 
        }

       
.cw-cell { 
            width: 40px; height: 40px; 
            background: #2c3e50; 
            
            /* HIER IST DIE NEUE FARBE (Hellblau): */
            border: 2px solid #f1c40f; 
            
            color: #ecf0f1; 
            text-align: center; 
            font-size: 1.0rem; 
            text-transform: uppercase; 
            font-weight: bold; 
            position: relative; 
            border-radius: 8px; /* Etwas runder */
            
            /* Der 3D-Tasten-Effekt unten */
            box-shadow: 0 4px 0 #1f2a36; 
            
            transition: all 0.1s ease; 
            margin-bottom: 4px; /* Platz für den 3D-Effekt */
        }

        /* Effekt beim Anklicken (Taste wird "gedrückt") */
        .cw-cell:focus { 
            background: #34495e; 
            border-color: #f1c40f; /* Goldener Rand wenn aktiv */
            color: #f1c40f;
            outline: none; 
            transform: translateY(4px); /* Bewegt sich nach unten */
            box-shadow: 0 0 0 #1f2a36; /* Schatten verschwindet -> Drück-Effekt */
            z-index: 10;
        }





        .cw-cell.black { 
            background: transparent; 
            border: none; 
            box-shadow: none;
            pointer-events: none; 
        }
        
        .cw-start-num {
            position: absolute;
            top: 2px; left: 4px;
            font-size: 0.6rem;
            color: rgba(255,255,255,0.4); 
            line-height: 1;
            z-index: 5;
            pointer-events: none;
        }

        .cw-clues { 
            text-align: left; 
            font-size: 0.95rem; 
            margin-top: 25px; 
            display: grid; 
            grid-template-columns: 1fr 1fr; 
            gap: 20px; 
            background: rgba(0,0,0,0.2); 
            padding: 15px;
            border-radius: 8px;
        }



/* SORTIER-AUFGABE STYLES */
        .sort-list { display: flex; flex-direction: column; gap: 8px; max-width: 600px; margin: 0 auto; }
        .sort-item {
            background: #34495e; padding: 15px; border-radius: 6px; border: 1px solid #555;
            cursor: grab; transition: transform 0.2s, background 0.2s; display: flex; align-items: center; justify-content: space-between;
            user-select: none;
        }
        .sort-item:hover { background: #3e5871; }
        .sort-item.selected { border: 2px solid #f1c40f; background: #2c3e50; transform: scale(1.02); }
        .sort-item.correct { border-color: #2ecc71; background: rgba(46, 204, 113, 0.2); }
        .sort-item.wrong { border-color: #c0392b; background: rgba(192, 57, 43, 0.2); }
        .sort-handle { color: #aaa; margin-right: 15px; font-size: 1.2rem; cursor: grab; }
        /* EISENHOWER MATRIX STYLES */
        .eisenhower-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            grid-template-rows: auto 1fr 1fr;
            gap: 10px;
            max-width: 800px;
            margin: 0 auto;
            height: 500px;
        }
        .matrix-header { text-align: center; font-weight: bold; color: #aaa; text-transform: uppercase; font-size: 0.8rem; padding: 5px; }
        .matrix-quadrant {
            background: rgba(255,255,255,0.05);
            border: 2px dashed #555;
            border-radius: 8px;
            padding: 10px;
            display: flex;
            flex-direction: column;
            gap: 5px;
            position: relative;
            transition: background 0.2s;
        }
        .matrix-quadrant h4 { margin: 0 0 10px 0; font-size: 0.9rem; opacity: 0.7; pointer-events: none; }
        .matrix-quadrant.drag-over { background: rgba(255,255,255,0.15); border-color: var(--gold); }
        
        /* Quadranten-Farben */
        .q1 { border-color: #e74c3c; } /* Do */
        .q2 { border-color: #3498db; } /* Schedule */
        .q3 { border-color: #f1c40f; } /* Delegate */
        .q4 { border-color: #95a5a6; } /* Delete */

        .matrix-pool {
            grid-column: 1 / -1;
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            background: #222;
            padding: 15px;
            border-radius: 8px;
            min-height: 80px;
            justify-content: center;
            border-top: 2px solid #444;
        }
        
        .matrix-item {
            background: #34495e;
            padding: 8px 15px;
            border-radius: 4px;
            cursor: grab;
            font-size: 0.85rem;
            box-shadow: 0 2px 5px rgba(0,0,0,0.5);
            user-select: none;
        }
        .matrix-item:active { cursor: grabbing; }
        .matrix-item.correct { border: 2px solid #2ecc71; }
        .matrix-item.wrong { border: 2px solid #e74c3c; }
        /* BUCHSTABENSALAT STYLES */
        .search-grid { 
            display: grid; 
            gap: 2px; 
            justify-content: center; 
            margin: 20px auto; 
            background: #222; 
            padding: 5px; 
            border-radius: 4px;
        }
        .search-cell { 
            width: 35px; 
            height: 35px; 
            background: #444; 
            color: #ddd; 
            display: flex; 
            align-items: center; 
            justify-content: center; 
            font-weight: bold; 
            cursor: pointer; 
            user-select: none;
            border-radius: 2px;
            transition: background 0.1s;
        }
        .search-cell:hover { background: #555; }
        .search-cell.selected { background: #f1c40f; color: #2c3e50; transform: scale(0.95); } /* Gelb bei Auswahl */
        .search-cell.solved { background: #2ecc71 !important; color: white !important; cursor: default; } /* Grün bei Erfolg */
        .search-cell.wrong { background: #e74c3c !important; animation: shake 0.3s; } /* Rot bei Fehler */
        
        .search-word-list {
            display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 15px; color: #aaa; font-size: 0.9rem;
        }
        .search-word-item {
            background: rgba(0,0,0,0.3); padding: 4px 10px; border-radius: 10px; border: 1px solid #555;
        }
        @keyframes shake { 0% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } 100% { transform: translateX(0); } }

        /* DRUCK-STYLES */
        @media print {
            body { background: #fff !important; color: #000 !important; height: auto !important; overflow: visible !important; }
            header, .stage, .watermark { display: none !important; }
            .overlay { position: static !important; background: #fff !important; width: 100% !important; height: auto !important; backdrop-filter: none !important; display: block !important; }
            .overlay-card { border: none !important; box-shadow: none !important; background: #fff !important; color: #000 !important; max-width: 100% !important; padding: 0 !important; text-align: left !important; }
            button { display: none !important; }
            .ai-input-area { border: 1px solid #ccc !important; color: #000 !important; background: #fff !important; }
            h2, h3, strong, p { color: #000 !important; }
            .ai-feedback-box { border-left: 4px solid #000 !important; background: #f0f0f0 !important; color: #000 !important; }
            .overlay.hidden { display: none !important; }
            /* Debug Button beim Drucken ausblenden */
            .debug-skip-btn { display: none !important; }
        }

        @media (max-width: 900px) {
            body { height: auto; overflow-y: auto; }
            header { flex-direction: column; height: auto; gap: 15px; padding: 15px; }
            .stage { display: flex; flex-direction: column; height: auto; padding: 15px; }
            .char-column { width: 100%; height: auto; margin-bottom: 30px; }
            .actions-container { grid-template-columns: 1fr; }
        }

/* --- NEU: TEAM SIDEBAR (Rechts) --- */
        .sidebar-overlay {
            position: fixed; top: 0; right: 0; width: 320px; height: 100%;
            background: rgba(26, 26, 46, 0.98); /* Dunkelblau, fast undurchsichtig */
            border-left: 3px solid #e84545; /* Roter Rand passend zum Design */
            box-shadow: -10px 0 50px rgba(0,0,0,0.8); 
            z-index: 9999; /* Ganz weit oben */
            transform: translateX(100%); /* Standardmäßig versteckt (rechts draußen) */
            transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); /* Sanftes Reinfahren */
            padding: 25px; overflow-y: auto; backdrop-filter: blur(5px);
        }
        .sidebar-overlay.open { transform: translateX(0); } /* Klasse zum Einblenden */
        
        .sidebar-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; border-bottom: 1px solid #444; padding-bottom: 10px; }
        .sidebar-title { font-size: 1.4rem; color: #f1c40f; font-weight: bold; margin: 0; }
        .sidebar-close { background: none; border: none; color: #fff; font-size: 2rem; cursor: pointer; line-height: 1; }
        .sidebar-close:hover { color: #e84545; }

        .team-list-item { display: flex; align-items: center; margin-bottom: 15px; animation: fadeIn 0.5s; }
        .team-emoji { font-size: 2.2rem; margin-right: 15px; width: 50px; text-align: center; }
        .team-info { display: flex; flex-direction: column; }
        .team-name-side { font-weight: bold; color: #fff; font-size: 1rem; }
        .team-role-side { font-size: 0.8rem; color: #aaa; font-style: italic; }

        /* Der Knopf oben im Header */
        .team-toggle-btn { 
            cursor: pointer; margin-left: 10px; font-size: 0.85rem; color: #ccc; 
            border: 1px solid #555; padding: 4px 10px; border-radius: 4px; display: inline-block; transition:0.2s;
        }
        .team-toggle-btn:hover { background: #e84545; color: white; border-color: #e84545; }

/* Button-Leiste im Dialog-Fenster */
        .dialog-toolbar {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 6px;
            flex-wrap: nowrap;
            overflow-x: hidden;
            padding-bottom: 8px;
            margin-bottom: 10px;
            border-bottom: 1px solid rgba(255,255,255,0.08);
        }
        .team-btn-corner {
            position: static !important;
            background: rgba(0,0,0,0.7) !important;
            border: 1px solid #777 !important;
            color: #ddd !important;
            padding: 5px 9px !important;
            border-radius: 16px !important;
            cursor: pointer !important;
            font-size: 0.74rem !important;
            line-height: 1.15 !important;
            z-index: 100 !important;
            white-space: nowrap !important;
            display: inline-block !important;
            width: auto !important;
            flex: 0 1 auto;
            max-width: 190px;
            text-overflow: ellipsis;
            overflow: hidden;
        }
        @media (max-width: 1050px) {
            .dialog-toolbar { justify-content: flex-start; overflow-x: auto; }
            .team-btn-corner { font-size: 0.72rem !important; padding: 5px 8px !important; }
        }
        .team-btn-corner.pos-4 { background: #2c3e50 !important; border-color: #3498db !important; }
        .team-btn-corner.pos-5 { background: #2c3e50 !important; border-color: #9b59b6 !important; }
        .dialog-box h2 { padding-top: 0 !important; }

        
       
     
    </style>