/* ui.css - Buttons, Panels, and Draggables */

/* --- SIDEBARS (Fixed Scrolling & Spacing) --- */
#tactics-pro-app .toolbar-wing {
    width: 280px; 
    background: var(--tp-bg-panel);
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 20px;
    height: 100%; 
    overflow-y: auto; 
    flex-shrink: 0;
}

#tactics-pro-app .left-wing { border-right: 1px solid var(--tp-border); }
#tactics-pro-app .right-wing { border-left: 1px solid var(--tp-border); }

#tactics-pro-app .wing-section h3 {
    font-size: 0.75rem;
    color: var(--tp-text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
}
#tactics-pro-app .wing-section h3::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--tp-border);
    margin-left: 10px;
}

#tactics-pro-app .drill-header-info h2 { 
    font-size: 1.2rem; 
    color: var(--tp-primary); 
    margin-bottom: 5px; 
}

/* --- FORM INPUTS --- */
#tactics-pro-app .input-group { margin-bottom: 16px; }
#tactics-pro-app .input-group label { display: block; font-size: 0.75rem; color: var(--tp-text-muted); margin-bottom: 8px; font-weight: 600; }
#tactics-pro-app .input-group select, #tactics-pro-app .input-group input { 
    width: 100%; 
    padding: 10px 12px; 
    background: var(--tp-bg-dark); 
    border: 1px solid var(--tp-border); 
    color: white; 
    border-radius: 6px; 
    outline: none; 
    margin-bottom: 5px; 
    font-size: 0.85rem;
    transition: border-color 0.2s;
}
#tactics-pro-app .input-group select:focus, #tactics-pro-app .input-group input:focus {
    border-color: var(--tp-primary);
}

#tactics-pro-app .input-group select {
    color-scheme: dark;
    min-height: 40px;
}

#tactics-pro-app .input-group select option {
    background: var(--tp-bg-dark);
    color: #ffffff;
}

#tactics-pro-app .input-group select option:checked,
#tactics-pro-app .input-group select option:hover {
    background: var(--tp-primary);
    color: #000000;
}
#tactics-pro-app .note-input { 
    width: 100%; 
    height: 120px; 
    background: var(--tp-bg-dark); 
    border: 1px solid var(--tp-border); 
    color: white; 
    padding: 12px; 
    border-radius: 8px; 
    resize: none; 
    font-family: inherit; 
    font-size: 0.85rem; 
}
#tactics-pro-app .note-input:focus { border-color: var(--tp-primary); outline: none; }

/* --- BUTTONS --- */
#tactics-pro-app .btn { 
    padding: 10px 20px; 
    border-radius: 6px; 
    border: none; 
    font-weight: 700; 
    cursor: pointer; 
    font-size: 0.85rem; 
    transition: all 0.2s; 
    display: inline-flex; 
    align-items: center; 
    justify-content: center;
}
#tactics-pro-app .btn:hover { opacity: 0.8; transform: translateY(-1px); }
#tactics-pro-app .btn:active { transform: translateY(0); }
#tactics-pro-app .btn.primary { background: var(--tp-primary); color: #000; }
#tactics-pro-app .btn.success { background: var(--tp-success); color: white; }
#tactics-pro-app .btn.danger { background: var(--tp-danger); color: white; }
#tactics-pro-app .btn.warning { background: var(--tp-warning); color: #000; }
#tactics-pro-app .btn.full-width { width: 100%; }

#tactics-pro-app .btn-icon { 
    width: 36px; height: 36px; 
    border-radius: 8px; 
    background: var(--tp-bg-accent); 
    border: 1px solid var(--tp-border); 
    color: white; 
    cursor: pointer; 
    display: flex; align-items: center; justify-content: center; 
    transition: all 0.2s;
}
#tactics-pro-app .btn-icon:hover { background: var(--tp-border); }
#tactics-pro-app .btn-icon:disabled { opacity: 0.3; cursor: not-allowed; }

/* --- DRAGGABLES --- */
#tactics-pro-app .tool-grid { 
    display: grid; 
    grid-template-columns: repeat(2, 1fr); 
    gap: 12px; 
}
#tactics-pro-app .draggable-tool { 
    background: var(--tp-bg-accent); 
    padding: 12px 8px; 
    border-radius: 8px; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center; 
    cursor: grab; 
    border: 1px solid var(--tp-border); 
    transition: all 0.2s ease; 
}
#tactics-pro-app .draggable-tool:hover { 
    border-color: var(--tp-primary); 
    transform: translateY(-2px); 
    background: var(--tp-bg-panel); 
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
#tactics-pro-app .tool-label { 
    font-size: 0.7rem; 
    color: var(--tp-text-muted); 
    font-weight: 600; 
    text-transform: uppercase; 
    margin-top: 8px; 
}

/* CSS Icons */
#tactics-pro-app .icon { 
    width: 32px; height: 32px; 
    border-radius: 50%; 
    display: flex; align-items: center; justify-content: center; 
    font-weight: 800; font-size: 12px; 
    border: 2px solid rgba(255,255,255,0.8); 
    box-shadow: inset 0 -3px 0 rgba(0,0,0,0.2), 0 2px 4px rgba(0,0,0,0.3); 
}
#tactics-pro-app .icon.attacker { background: radial-gradient(circle at 30% 30%, #ff8f8a, var(--tp-danger)); color: white; }
#tactics-pro-app .icon.defender { background: radial-gradient(circle at 30% 30%, #64b5f6, #1976d2); color: white; }
#tactics-pro-app .icon.goalie { background: radial-gradient(circle at 30% 30%, #ffe082, var(--tp-warning)); color: #4a3b00; border-color: #4a3b00; }
#tactics-pro-app .icon.ball { background: radial-gradient(circle at 35% 35%, #ffffff, #bbbbbb); border: 1px solid #999; width: 20px; height: 20px; }
#tactics-pro-app .icon.cone { width: 0; height: 0; border-radius: 0; background: transparent; border: none; box-shadow: none; position: relative; border-left: 12px solid transparent; border-right: 12px solid transparent; border-bottom: 24px solid #e67e22; filter: drop-shadow(0 2px 2px rgba(0,0,0,0.4)); }
#tactics-pro-app .icon.cone::after { content: ''; position: absolute; bottom: -24px; left: -14px; width: 28px; height: 4px; background: #d35400; border-radius: 2px; }
#tactics-pro-app .icon.net { border-radius: 4px; background: linear-gradient(90deg, rgba(255,255,255,0.8) 1px, transparent 1px), linear-gradient(rgba(255,255,255,0.8) 1px, transparent 1px); background-size: 6px 6px; background-color: rgba(255,255,255,0.1); border: 2px solid white; }
#tactics-pro-app .icon.zone { border-radius: 4px; background: rgba(248, 81, 73, 0.3); border: 2px dashed #f85149; box-shadow: none; }
#tactics-pro-app .icon.ghost { background: transparent; border: 2px dashed #888; color: #888; box-shadow: none; }
#tactics-pro-app .icon.mannequin { background: #888; border: 2px solid #fff; color: #fff; border-radius: 4px; }

/* --- SQUAD BUILDER --- */
#tactics-pro-app .squad-controls { background: var(--tp-bg-dark); padding: 16px; border-radius: 10px; border: 1px solid var(--tp-border); }
#tactics-pro-app .control-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
#tactics-pro-app .control-row span { font-size: 0.8rem; font-weight: 600; }
#tactics-pro-app .counter { display: flex; align-items: center; gap: 10px; background: var(--tp-bg-panel); padding: 4px 8px; border-radius: 6px; }
#tactics-pro-app .counter button { width: 24px; height: 24px; border: 1px solid var(--tp-border); background: var(--tp-bg-accent); color: white; cursor: pointer; border-radius: 4px; font-weight: bold; }
#tactics-pro-app .counter span { min-width: 15px; text-align: center; color: var(--tp-primary); font-weight: bold; }
#tactics-pro-app .formation-presets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
#tactics-pro-app .preset-btn { padding: 8px; background: var(--tp-bg-accent); border: 1px solid var(--tp-border); color: white; border-radius: 6px; cursor: pointer; font-weight: 700; font-size: 0.75rem; transition: all 0.2s; }
#tactics-pro-app .preset-btn:hover { border-color: var(--tp-primary); color: var(--tp-primary); }

/* --- TIMELINE & VARIANTS --- */
#tactics-pro-app .timeline-bar { height: 70px; background: var(--tp-bg-panel); border-top: 1px solid var(--tp-border); display: flex; align-items: center; padding: 0 24px; gap: 20px; }
#tactics-pro-app .timeline-nav { flex: 1; display: flex; align-items: center; gap: 12px; }
#tactics-pro-app .step-list { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
#tactics-pro-app .step-item { min-width: 40px; height: 40px; background: var(--tp-bg-accent); border-radius: 8px; display: flex; align-items: center; justify-content: center; cursor: pointer; font-weight: bold; border: 2px solid transparent; transition: all 0.2s; }
#tactics-pro-app .step-item:hover { border-color: var(--tp-text-muted); }
#tactics-pro-app .step-item.active { border-color: var(--tp-primary); color: var(--tp-primary); background: var(--tp-bg-dark); }

#tactics-pro-app .variant-bar { height: 48px; background: var(--tp-bg-panel); border-bottom: 1px solid var(--tp-border); display: flex; align-items: center; padding: 0 20px; gap: 15px; }
#tactics-pro-app .variant-label { font-size: 0.75rem; color: var(--tp-text-muted); font-weight: bold; }
#tactics-pro-app .variant-tabs { display: flex; gap: 8px; }
#tactics-pro-app .variant-tab { padding: 6px 16px; background: var(--tp-bg-accent); border-radius: 20px; font-size: 0.75rem; cursor: pointer; display: flex; align-items: center; gap: 8px; border: 1px solid transparent; transition: all 0.2s; }
#tactics-pro-app .variant-tab:hover { border-color: var(--tp-text-muted); }
#tactics-pro-app .variant-tab.active { background: var(--tp-primary); color: #000; font-weight: 700; }
#tactics-pro-app .variant-tab.add-btn { background: transparent; border: 1px dashed var(--tp-border); color: var(--tp-text-muted); }
#tactics-pro-app .variant-del-btn { opacity: 0.5; font-size: 1.1rem; line-height: 1; }
#tactics-pro-app .variant-del-btn:hover { color: var(--tp-danger); opacity: 1; }

/* --- DASHBOARDS (Front Office & Film Room) --- */
#tactics-pro-app .settings-container { max-width: 1000px; margin: 40px auto; padding: 0 20px; }
#tactics-pro-app .settings-container h1 { margin-bottom: 30px; font-size: 2rem; color: white; }
#tactics-pro-app .settings-container h1 small { display: block; font-size: 1rem; color: var(--tp-text-muted); font-weight: 400; margin-top: 5px; }
#tactics-pro-app .settings-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; }
#tactics-pro-app .settings-card { background: var(--tp-bg-panel); border: 1px solid var(--tp-border); border-radius: 12px; padding: 24px; box-shadow: 0 8px 24px rgba(0,0,0,0.2); }
#tactics-pro-app .settings-card h3 { color: var(--tp-primary); font-size: 0.9rem; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 20px; }

#tactics-pro-app .library-container { max-width: 1200px; margin: 40px auto; padding: 0 20px; }
#tactics-pro-app .library-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; }
#tactics-pro-app .library-header h1 { font-size: 2rem; color: white; }
#tactics-pro-app .library-header h1 small { display: block; font-size: 1rem; color: var(--tp-text-muted); font-weight: 400; margin-top: 5px; }
#tactics-pro-app .drill-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; }
#tactics-pro-app .drill-card { background: var(--tp-bg-panel); border: 1px solid var(--tp-border); border-radius: 12px; overflow: hidden; cursor: pointer; transition: transform 0.2s, border-color 0.2s; box-shadow: 0 4px 12px rgba(0,0,0,0.15); }
#tactics-pro-app .drill-card:hover { transform: translateY(-4px); border-color: var(--tp-primary); }
#tactics-pro-app .drill-card-preview { height: 160px; background: linear-gradient(135deg, #1b2e1b 0%, #0a140a 100%); border-bottom: 1px solid var(--tp-border); display: flex; align-items: center; justify-content: center; font-weight: 800; color: rgba(255,255,255,0.2); font-size: 1.5rem; letter-spacing: 2px; }
#tactics-pro-app .drill-card-info { padding: 20px; }
#tactics-pro-app .drill-card-info h4 { margin-bottom: 6px; font-size: 1.1rem; color: white; }
#tactics-pro-app .drill-card-info p { font-size: 0.8rem; color: var(--tp-text-muted); margin: 0; }

/* --- VISUAL LEGEND --- */
#tactics-pro-app .legend-preview { margin-top: auto; }
#tactics-pro-app .key-item { display: flex; align-items: center; gap: 12px; font-size: 0.75rem; margin-bottom: 10px; color: var(--tp-text-main); }
#tactics-pro-app .line-sample { width: 35px; height: 0; }
#tactics-pro-app .line-sample.run { border-bottom: 3px dashed #ffffff; }
#tactics-pro-app .line-sample.pass { border-bottom: 3px dashed #f1e05a; }
#tactics-pro-app .line-sample.dribble { border-bottom: 4px dashed #58a6ff; }
#tactics-pro-app .line-sample.shot { border-bottom: 3px solid #f85149; }
#tactics-pro-app .line-sample.fake { border-bottom: 3px dotted #e67e22; }

/* --- FLOATING RADIAL MENU (LONG PRESS) --- */
.tp-floating-menu {
    position: fixed;
    background: rgba(22, 27, 34, 0.95);
    backdrop-filter: blur(10px);
    border: 1px solid var(--tp-border);
    border-radius: 16px;
    padding: 15px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.8);
    display: none;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    z-index: 9999;
    transform: translate(-50%, -50%); 
}
.tp-floating-menu.active {
    display: grid;
    animation: tpPopIn 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
@keyframes tpPopIn {
    0% { transform: translate(-50%, -50%) scale(0.5); opacity: 0; }
    100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}
.tp-floating-menu .draggable-tool {
    cursor: pointer;
    padding: 10px 5px;
    background: transparent;
    border: none;
}
.tp-floating-menu .draggable-tool:hover {
    background: rgba(255,255,255,0.1);
}
.tp-floating-menu .tool-label {
    color: #ffffff; /* High contrast text for floating menu */
}

/* --- FLOATING CAMERA CONTROLS --- */
.camera-controls {
    position: absolute;
    bottom: 20px;
    right: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: rgba(22, 27, 34, 0.8);
    padding: 8px;
    border-radius: 8px;
    border: 1px solid var(--tp-border);
    backdrop-filter: blur(5px);
    z-index: 100;
}
.camera-controls button {
    width: 36px;
    height: 36px;
    background: var(--tp-bg-accent);
    border: 1px solid var(--tp-border);
    color: white;
    font-size: 1.2rem;
    font-weight: bold;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}
.camera-controls button:hover {
    background: var(--tp-primary);
    color: #000;
}


/* --- USER GUIDE --- */
#tactics-pro-app .tp-guide-wrap {
    max-width: 1000px;
    margin: 40px auto;
    padding: 0 20px;
    color: var(--tp-text-main);
}
#tactics-pro-app .tp-guide-header {
    margin-bottom: 30px;
}
#tactics-pro-app .tp-guide-header h1 {
    font-size: 2rem;
    color: white;
    margin: 0 0 5px 0;
    font-weight: 600;
}
#tactics-pro-app .tp-guide-header p {
    font-size: 1rem;
    color: var(--tp-text-muted);
    margin: 0;
}
#tactics-pro-app .tp-guide-layout {
    display: flex;
    gap: 30px;
    align-items: flex-start;
}
#tactics-pro-app .tp-guide-nav {
    width: 240px;
    position: sticky;
    top: 20px;
    flex-shrink: 0;
}
#tactics-pro-app .tp-guide-nav h3 {
    font-size: 0.85rem;
    color: var(--tp-text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    border-bottom: 1px solid var(--tp-border);
    padding-bottom: 10px;
    margin-top: 0;
    margin-bottom: 15px;
}
#tactics-pro-app .tp-guide-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
#tactics-pro-app .tp-guide-nav li {
    margin-bottom: 5px;
}
#tactics-pro-app .tp-guide-nav a {
    text-decoration: none;
    color: var(--tp-text-main);
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.2s ease;
    display: block;
    padding: 8px 12px;
    border-radius: 6px;
}
#tactics-pro-app .tp-guide-nav a:hover, 
#tactics-pro-app .tp-guide-nav a.active {
    background: rgba(88, 166, 255, 0.1);
    color: var(--tp-primary);
}
#tactics-pro-app .tp-guide-content {
    flex: 1;
    background: var(--tp-bg-panel);
    padding: 40px;
    border-radius: 12px;
    border: 1px solid var(--tp-border);
    box-shadow: 0 8px 24px rgba(0,0,0,0.2);
}
#tactics-pro-app .tp-guide-section {
    margin-bottom: 50px;
}
#tactics-pro-app .tp-guide-section:last-child {
    margin-bottom: 0;
}
#tactics-pro-app .tp-guide-section h2 {
    font-size: 1.5rem;
    color: var(--tp-primary);
    border-bottom: 1px solid var(--tp-border);
    padding-bottom: 15px;
    margin-top: 0;
    margin-bottom: 20px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
}
#tactics-pro-app .tp-guide-section h3 {
    font-size: 1.1rem;
    color: white;
    margin-top: 30px;
    margin-bottom: 15px;
    font-weight: 600;
}
#tactics-pro-app .tp-guide-section p {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--tp-text-main);
    margin-bottom: 15px;
}
#tactics-pro-app .tp-guide-section ul, 
#tactics-pro-app .tp-guide-section ol {
    padding-left: 20px;
    margin-bottom: 20px;
}
#tactics-pro-app .tp-guide-section li {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--tp-text-main);
    margin-bottom: 8px;
}
#tactics-pro-app .tp-icon-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    background: var(--tp-bg-dark);
    border: 1px solid var(--tp-border);
    font-size: 11px;
    font-weight: bold;
    margin-right: 8px;
    color: #fff;
    vertical-align: middle;
}
#tactics-pro-app .tp-highlight {
    background: rgba(88, 166, 255, 0.05);
    border-left: 3px solid var(--tp-primary);
    padding: 15px 20px;
    border-radius: 0 8px 8px 0;
    margin: 25px 0;
}
#tactics-pro-app .tp-highlight strong {
    color: var(--tp-primary);
    font-weight: 600;
}
#tactics-pro-app .tp-guide-content code {
    background: var(--tp-bg-dark);
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid var(--tp-border);
    color: #ff7b72;
    font-family: monospace;
    font-size: 0.85rem;
}
#tactics-pro-app .tp-fo-content-shell {
    margin-top: 20px;
}
#tactics-pro-app .tp-loading {
    padding: 24px;
    font-size: 0.9rem;
    color: var(--tp-text-muted);
}
#tactics-pro-app .tp-error {
    padding: 24px;
    font-size: 0.9rem;
    color: #f85149;
}

#tactics-pro-app .tp-fo-panel-host { margin-top: 20px; }
#tactics-pro-app .tp-fo-loading {
    padding: 24px;
    border: 1px dashed var(--tp-border);
    border-radius: 12px;
    color: var(--tp-text-muted);
    background: rgba(127,127,127,0.04);
}


/* ═══════════════════════════════════════════════════════════
   FRONT OFFICE — Header bar, tab strip, status chip, AJAX shell
   ═══════════════════════════════════════════════════════════ */

/* Header bar: status chip | tabs | actions */
#tactics-pro-app .tp-fo-header-bar {
    display: flex;
    align-items: center;
    gap: 16px;
    background: var(--tp-bg-panel);
    border: 1px solid var(--tp-border);
    border-radius: 10px;
    padding: 10px 16px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

/* Status chip */
#tactics-pro-app .tp-fo-status-chip {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    color: var(--tp-text-muted);
    white-space: nowrap;
}
#tactics-pro-app .tp-fo-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--tp-text-muted);
}
#tactics-pro-app .tp-fo-status-dot.is-active  { background: #238636; box-shadow: 0 0 6px #238636; }
#tactics-pro-app .tp-fo-status-dot.is-expired { background: #da3633; box-shadow: 0 0 6px #da3633; }
#tactics-pro-app .tp-fo-status-sep { opacity: 0.4; }

/* Tab strip */
#tactics-pro-app .tp-fo-tabs {
    display: flex;
    gap: 4px;
    flex: 1;
    justify-content: center;
}
#tactics-pro-app .tp-fo-tab {
    padding: 7px 18px;
    border-radius: 6px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--tp-text-muted);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}
#tactics-pro-app .tp-fo-tab:hover {
    background: var(--tp-bg-accent);
    color: white;
}
#tactics-pro-app .tp-fo-tab.is-active {
    background: var(--tp-primary);
    color: #000;
    border-color: var(--tp-primary);
}

/* Header action links */
#tactics-pro-app .tp-fo-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
    white-space: nowrap;
}
#tactics-pro-app .tp-fo-action-link {
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none;
    color: var(--tp-primary);
    transition: opacity 0.15s;
}
#tactics-pro-app .tp-fo-action-link:hover { opacity: 0.7; }
#tactics-pro-app .tp-fo-action-link--muted { color: var(--tp-text-muted); }

/* AJAX content shell */
#tactics-pro-app .tp-fo-content-shell {
    min-height: 120px;
}
#tactics-pro-app .tp-fo-loading {
    padding: 32px 24px;
    border: 1px dashed var(--tp-border);
    border-radius: 10px;
    color: var(--tp-text-muted);
    font-size: 0.9rem;
    background: rgba(127,127,127,0.03);
    text-align: center;
}
#tactics-pro-app .tp-fo-error {
    padding: 20px 24px;
    border: 1px solid var(--tp-danger);
    border-radius: 10px;
    color: var(--tp-danger);
    font-size: 0.9rem;
    background: rgba(218,54,51,0.06);
}

/* Overview grid: 3-col layout */
#tactics-pro-app .tp-fo-overview-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
#tactics-pro-app .tp-fo-span-2 { grid-column: span 2; }
#tactics-pro-app .tp-fo-span-3 { grid-column: span 3; }

/* Overview card body text */
#tactics-pro-app .tp-fo-body {
    font-size: 0.9rem;
    line-height: 1.65;
    color: var(--tp-text-main);
    margin-bottom: 10px;
}

/* Account detail rows */
#tactics-pro-app .tp-account-detail-grid { display: flex; flex-direction: column; gap: 8px; }
#tactics-pro-app .tp-account-detail-row  { display: flex; justify-content: space-between; align-items: center; font-size: 0.85rem; }
#tactics-pro-app .tp-account-detail-label { color: var(--tp-text-muted); }
#tactics-pro-app .tp-account-detail-value { color: white; font-weight: 600; }

/* Inline action buttons inside cards */
#tactics-pro-app .tp-inline-actions { display: flex; gap: 8px; flex-wrap: wrap; }
#tactics-pro-app .tp-link-btn { text-decoration: none; padding: 8px 14px; font-size: 0.8rem; }
#tactics-pro-app .tp-btn-outline {
    background: transparent;
    border: 1px solid var(--tp-border);
    color: var(--tp-text-muted);
}
#tactics-pro-app .tp-btn-outline:hover { border-color: white; color: white; }

/* How it Works — horizontal steps list */
#tactics-pro-app .tp-fo-steps-list {
    padding: 0;
    margin: 0;
    list-style: none;
}
#tactics-pro-app .tp-fo-steps-horizontal {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 14px;
    counter-reset: steps;
}
#tactics-pro-app .tp-fo-steps-horizontal li {
    counter-increment: steps;
    background: var(--tp-bg-dark);
    border: 1px solid var(--tp-border);
    border-radius: 8px;
    padding: 14px 16px 14px 44px;
    font-size: 0.85rem;
    line-height: 1.55;
    color: var(--tp-text-main);
    position: relative;
}
#tactics-pro-app .tp-fo-steps-horizontal li::before {
    content: counter(steps);
    position: absolute;
    left: 12px;
    top: 14px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--tp-primary);
    color: #000;
    font-weight: 800;
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Tips grid */
#tactics-pro-app .tp-fo-tips-grid { display: flex; flex-direction: column; gap: 12px; }
#tactics-pro-app .tp-fo-tip-row { display: flex; gap: 10px; align-items: flex-start; }
#tactics-pro-app .tp-fo-tip-icon { font-size: 1rem; flex-shrink: 0; margin-top: 2px; }

/* Responsive: collapse to 1-col on narrow screens */
@media (max-width: 768px) {
    #tactics-pro-app .tp-fo-overview-grid { grid-template-columns: 1fr; }
    #tactics-pro-app .tp-fo-span-2,
    #tactics-pro-app .tp-fo-span-3 { grid-column: span 1; }
    #tactics-pro-app .tp-fo-header-bar { flex-direction: column; align-items: flex-start; }
    #tactics-pro-app .tp-fo-tabs { justify-content: flex-start; flex-wrap: wrap; }
    #tactics-pro-app .tp-fo-header-actions { margin-left: 0; }
    #tactics-pro-app .tp-fo-steps-horizontal { grid-template-columns: 1fr; }
}

/* Draw Route mode needs a high-contrast active state because the button label alone
   is easy to miss during Playmaker editing. */
#tactics-pro-app #btnRecordRoute.active,
#tactics-pro-app #btnRecordRoute[aria-pressed="true"] {
    background: #f1e05a;
    color: #0a0c10;
    border: 2px solid #ffffff;
    box-shadow: 0 0 0 3px rgba(241, 224, 90, 0.25), 0 0 22px rgba(241, 224, 90, 0.35);
    position: relative;
}

#tactics-pro-app #btnRecordRoute.active::before,
#tactics-pro-app #btnRecordRoute[aria-pressed="true"]::before {
    content: '●';
    margin-right: 8px;
    font-size: 0.9rem;
    line-height: 1;
}

#tactics-pro-app #btnRecordRoute.active:hover,
#tactics-pro-app #btnRecordRoute[aria-pressed="true"]:hover {
    opacity: 1;
    transform: translateY(-1px);
}

/* [CHANGE START] Focused Coach View and scroll containment
   Prevents nested sidebar scrolling from chaining into the WordPress page and
   lets coaches open the Playmaker as a full-window workspace. */
html.tp-focus-view-active,
body.tp-focus-view-active {
    overflow: hidden !important;
}

#tactics-pro-app {
    overscroll-behavior: contain;
}

#tactics-pro-app .page-content,
#tactics-pro-app .playmaker-layout,
#tactics-pro-app .toolbar-wing,
#tactics-pro-app .field-container,
#tactics-pro-app .canvas-wrapper {
    min-height: 0;
    overscroll-behavior: contain;
}

#tactics-pro-app .toolbar-wing {
    overscroll-behavior-y: contain;
}

#tactics-pro-app .tp-focus-toggle {
    background: transparent;
    color: var(--tp-text-main);
    border: 1px solid var(--tp-border);
    padding: 8px 12px;
    white-space: nowrap;
}

#tactics-pro-app .tp-focus-toggle:hover,
#tactics-pro-app .tp-focus-toggle:focus-visible {
    border-color: var(--tp-primary);
    color: var(--tp-primary);
    opacity: 1;
}

#tactics-pro-app .tp-focus-toggle.active,
#tactics-pro-app .tp-focus-toggle[aria-pressed="true"] {
    background: var(--tp-primary);
    color: #000000;
    border-color: var(--tp-primary);
    box-shadow: 0 0 0 3px rgba(88, 166, 255, 0.16);
}

#tactics-pro-app.tp-focus-view {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    z-index: 999999 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    isolation: isolate;
}

#tactics-pro-app.tp-focus-view .main-nav {
    height: 56px;
    padding: 0 16px;
}

#tactics-pro-app.tp-focus-view .nav-btn {
    height: 56px;
}

#tactics-pro-app.tp-focus-view .nav-logo {
    font-size: 1.05rem;
}

#tactics-pro-app.tp-focus-view .nav-actions {
    gap: 8px;
}

#tactics-pro-app.tp-focus-view .nav-actions .btn {
    padding: 8px 12px;
}

#tactics-pro-app.tp-focus-view.tp-is-playmaker .playmaker-layout {
    height: calc(100dvh - 56px) !important;
    overflow: hidden !important;
}

#tactics-pro-app.tp-focus-view.tp-is-playmaker .toolbar-wing {
    width: 260px;
    padding: 14px;
    gap: 14px;
}

#tactics-pro-app.tp-focus-view.tp-is-playmaker .wing-section {
    margin-bottom: 0;
}

#tactics-pro-app.tp-focus-view.tp-is-playmaker .input-group {
    margin-bottom: 10px;
}

#tactics-pro-app.tp-focus-view.tp-is-playmaker .input-group label {
    margin-bottom: 5px;
}

#tactics-pro-app.tp-focus-view.tp-is-playmaker .input-group select,
#tactics-pro-app.tp-focus-view.tp-is-playmaker .input-group input {
    min-height: 34px;
    padding: 7px 10px;
}

#tactics-pro-app.tp-focus-view.tp-is-playmaker .tool-grid {
    gap: 8px;
}

#tactics-pro-app.tp-focus-view.tp-is-playmaker .draggable-tool {
    padding: 8px 5px;
}

#tactics-pro-app.tp-focus-view.tp-is-playmaker .icon {
    width: 30px;
    height: 30px;
    margin-bottom: 4px;
}

#tactics-pro-app.tp-focus-view.tp-is-playmaker .field-container {
    height: 100%;
    overflow: hidden !important;
}

#tactics-pro-app.tp-focus-view.tp-is-playmaker .variant-bar {
    min-height: 40px;
    height: auto;
    padding: 6px 14px;
}

#tactics-pro-app.tp-focus-view.tp-is-playmaker .canvas-wrapper {
    padding: 10px;
    overflow: hidden !important;
}

#tactics-pro-app.tp-focus-view.tp-is-playmaker .timeline-bar {
    height: 58px;
    padding: 0 14px;
    gap: 12px;
}

#tactics-pro-app.tp-focus-view.tp-is-playmaker .step-item {
    width: 34px;
    min-width: 34px;
    height: 34px;
}

#tactics-pro-app.tp-focus-view.tp-is-playmaker .timeline-actions {
    gap: 8px !important;
}

#tactics-pro-app.tp-focus-view.tp-is-playmaker .timeline-actions .btn {
    padding: 7px 10px;
    font-size: 0.75rem;
}

#tactics-pro-app.tp-focus-view.tp-is-playmaker .note-input {
    height: 92px;
}

#tactics-pro-app.tp-focus-view.tp-is-playmaker .key-item {
    margin-bottom: 7px;
}

@media (max-width: 1100px) {
    #tactics-pro-app .tp-focus-toggle {
        padding: 7px 9px;
        font-size: 0.75rem;
    }

    #tactics-pro-app.tp-focus-view .nav-logo {
        display: none;
    }
}

@media (max-width: 992px) {
    #tactics-pro-app.tp-focus-view {
        height: 100dvh !important;
    }

    #tactics-pro-app.tp-focus-view .main-nav {
        height: 54px;
    }

    #tactics-pro-app.tp-focus-view.tp-is-playmaker .playmaker-layout {
        height: calc(100dvh - 54px) !important;
    }
}
/* [CHANGE END] */


/* [CHANGE START] Batch 17 — App-scoped shared form system
   These classes give future Front Office, onboarding, roster, communications,
   share, and review forms one common visual language. */
#tactics-pro-app .tp-form-card,
#tactics-pro-app .settings-card,
#tactics-pro-app .tp-comm-sidebar {
    background: linear-gradient(180deg, var(--tp-bg-panel) 0%, var(--tp-bg-dark) 100%);
    border: 1px solid var(--tp-border);
    border-radius: 14px;
    box-shadow: 0 10px 28px rgba(0,0,0,0.24);
}

#tactics-pro-app .settings-card {
    padding: 22px;
}

#tactics-pro-app .tp-form-header {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 18px;
}

#tactics-pro-app .tp-form-kicker {
    color: var(--tp-primary);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

#tactics-pro-app .tp-form-title {
    color: #ffffff;
    font-size: 1.1rem;
    font-weight: 800;
    line-height: 1.25;
    margin: 0;
}

#tactics-pro-app .tp-form-subtitle,
#tactics-pro-app .tp-field-help {
    color: var(--tp-text-muted);
    font-size: 0.84rem;
    line-height: 1.5;
    margin: 0;
}

#tactics-pro-app .tp-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

#tactics-pro-app .tp-form-grid--single { grid-template-columns: 1fr; }
#tactics-pro-app .tp-form-grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }

#tactics-pro-app .tp-form-section {
    border-top: 1px solid var(--tp-border);
    padding-top: 18px;
    margin-top: 18px;
}

#tactics-pro-app .tp-form-section:first-child {
    border-top: 0;
    padding-top: 0;
    margin-top: 0;
}

#tactics-pro-app .tp-form-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    margin-top: 18px;
    flex-wrap: wrap;
}

#tactics-pro-app .input-group {
    margin-bottom: 14px;
}

#tactics-pro-app .input-group label,
#tactics-pro-app .tp-field-label {
    display: block;
    color: var(--tp-text-main);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    margin-bottom: 7px;
}

#tactics-pro-app .input-group small,
#tactics-pro-app .input-group .tp-field-help {
    display: block;
    color: var(--tp-text-muted);
    font-size: 0.76rem;
    line-height: 1.45;
    margin-top: 7px;
}

#tactics-pro-app .input-group select,
#tactics-pro-app .input-group input,
#tactics-pro-app .input-group textarea,
#tactics-pro-app .tp-inp {
    min-height: 42px;
    border-radius: 10px;
    background: var(--tp-bg-dark);
    border: 1px solid var(--tp-border);
    color: #ffffff;
    padding: 10px 12px;
    font-size: 0.9rem;
    line-height: 1.45;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.02);
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

#tactics-pro-app .input-group textarea,
#tactics-pro-app textarea.tp-inp {
    min-height: 110px;
    resize: vertical;
}

#tactics-pro-app .input-group select:hover,
#tactics-pro-app .input-group input:hover,
#tactics-pro-app .input-group textarea:hover,
#tactics-pro-app .tp-inp:hover {
    border-color: rgba(88, 166, 255, 0.45);
}

#tactics-pro-app .input-group select:focus,
#tactics-pro-app .input-group input:focus,
#tactics-pro-app .input-group textarea:focus,
#tactics-pro-app .tp-inp:focus {
    border-color: var(--tp-primary);
    box-shadow: 0 0 0 3px rgba(88, 166, 255, 0.14);
    background: #090d13;
    outline: none;
}

#tactics-pro-app .input-group textarea::placeholder,
#tactics-pro-app .input-group input::placeholder,
#tactics-pro-app .tp-inp::placeholder {
    color: #6e7681;
}

#tactics-pro-app .tp-status-message,
#tactics-pro-app #commStatus,
#tactics-pro-app #shareEmailStatus {
    min-height: 22px;
    margin-top: 12px;
    padding: 8px 10px;
    border-radius: 10px;
    font-size: 0.84rem;
    line-height: 1.35;
    text-align: center;
    color: var(--tp-text-muted);
    background: rgba(127, 127, 127, 0.06);
    border: 1px solid rgba(48, 54, 61, 0.8);
}

#tactics-pro-app .tp-status-message:empty,
#tactics-pro-app #commStatus:empty,
#tactics-pro-app #shareEmailStatus:empty {
    display: none;
}

#tactics-pro-app .tp-status-success {
    color: #7ee787;
    background: rgba(46, 160, 67, 0.1);
    border-color: rgba(46, 160, 67, 0.36);
}

#tactics-pro-app .tp-status-error {
    color: #ff7b72;
    background: rgba(248, 81, 73, 0.1);
    border-color: rgba(248, 81, 73, 0.36);
}

#tactics-pro-app .tp-status-warning {
    color: #e3b341;
    background: rgba(210, 153, 34, 0.1);
    border-color: rgba(210, 153, 34, 0.36);
}

#tactics-pro-app .tp-comm-layout {
    gap: 22px;
}

#tactics-pro-app .tp-comm-sidebar {
    padding: 22px;
}

#tactics-pro-app .tp-comm-sidebar h3,
#tactics-pro-app .tp-roster-grid h3,
#tactics-pro-app .settings-card h3 {
    color: var(--tp-primary);
    font-size: 0.78rem;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-top: 0;
}

#tactics-pro-app .tp-comm-grid {
    gap: 12px;
}

#tactics-pro-app .tp-selectable-card {
    border-radius: 12px;
    padding: 14px;
    background: linear-gradient(180deg, var(--tp-bg-dark), rgba(10, 12, 16, 0.92));
    border: 1px solid var(--tp-border);
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease, background 0.18s ease;
}

#tactics-pro-app .tp-selectable-card:hover {
    border-color: var(--tp-primary);
    transform: translateY(-1px);
    box-shadow: 0 8px 22px rgba(0,0,0,0.24);
}

#tactics-pro-app .tp-selectable-card.is-selected {
    border-color: var(--tp-success);
    background: linear-gradient(180deg, rgba(46, 160, 67, 0.16), rgba(46, 160, 67, 0.06));
    box-shadow: 0 0 0 3px rgba(46, 160, 67, 0.12);
}

#tactics-pro-app .tp-roster-list-card {
    border-radius: 14px;
    padding: 16px;
}

#tactics-pro-app .tp-player-tag {
    border-radius: 10px;
    background: rgba(13, 17, 23, 0.88);
}

#tactics-pro-app .tp-usage-bar-container {
    border: 1px solid rgba(48, 54, 61, 0.7);
}

#tactics-pro-app .tp-modal-box .input-group {
    text-align: left;
}

@media (max-width: 720px) {
    #tactics-pro-app .tp-form-grid,
    #tactics-pro-app .tp-form-grid--three {
        grid-template-columns: 1fr;
    }

    #tactics-pro-app .tp-form-actions {
        justify-content: stretch;
    }

    #tactics-pro-app .tp-form-actions .btn {
        width: 100%;
    }
}
/* [CHANGE END] */


/* [Batch 47] Playmaker accordion, scroll, and guided walkthrough polish */
#tactics-pro-app .playmaker-layout {
    min-height: 0;
}

#tactics-pro-app .toolbar-wing {
    min-height: 0;
    max-height: 100%;
    overflow-y: auto !important;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    padding-bottom: 48px;
}

#tactics-pro-app .toolbar-wing.left-wing,
#tactics-pro-app .toolbar-wing.right-wing {
    flex: 0 0 280px;
}

#tactics-pro-app .tp-control-mode-card,
#tactics-pro-app .tp-accordion {
    background: linear-gradient(180deg, rgba(33, 38, 45, 0.96), rgba(13, 17, 23, 0.92));
    border: 1px solid var(--tp-border);
    border-radius: 14px;
    box-shadow: var(--tp-shadow-soft);
}

#tactics-pro-app .tp-control-mode-card {
    padding: 14px;
    display: grid;
    gap: 10px;
}

#tactics-pro-app .tp-control-mode-switch {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

#tactics-pro-app .tp-control-mode-btn {
    border: 1px solid var(--tp-border);
    background: var(--tp-bg-dark);
    color: var(--tp-text-muted);
    border-radius: 999px;
    padding: 8px 10px;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.18s ease;
}

#tactics-pro-app .tp-control-mode-btn:hover,
#tactics-pro-app .tp-control-mode-btn.is-active {
    border-color: var(--tp-primary);
    color: #ffffff;
    background: rgba(88, 166, 255, 0.16);
}

#tactics-pro-app .tp-accordion {
    overflow: visible;
    padding: 0;
}

#tactics-pro-app .tp-accordion-toggle {
    width: 100%;
    border: 0;
    background: transparent;
    color: #ffffff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 14px;
    font-weight: 900;
    letter-spacing: 0.02em;
    text-align: left;
}

#tactics-pro-app .tp-accordion-toggle span:first-child {
    text-transform: uppercase;
    font-size: 0.78rem;
}

#tactics-pro-app .tp-accordion-chevron {
    color: var(--tp-primary);
    transition: transform 0.18s ease;
}

#tactics-pro-app .tp-accordion.is-open .tp-accordion-chevron {
    transform: rotate(180deg);
}

#tactics-pro-app .tp-accordion-body {
    display: none;
    padding: 0 14px 16px;
}

#tactics-pro-app .tp-accordion.is-open .tp-accordion-body {
    display: block;
}

#tactics-pro-app.tp-control-basic .tp-advanced-control {
    display: none !important;
}

#tactics-pro-app.tp-control-advanced .tp-advanced-control {
    display: block;
}

#tactics-pro-app .tp-tour-start {
    white-space: nowrap;
}

#tactics-pro-app .tp-tour-overlay {
    position: fixed;
    inset: 0;
    z-index: 999999;
    background: rgba(0, 0, 0, 0.62);
    pointer-events: auto;
}

#tactics-pro-app .tp-tour-spotlight {
    position: fixed;
    z-index: 1000000;
    border: 2px solid var(--tp-primary);
    border-radius: 16px;
    box-shadow: 0 0 0 9999px rgba(0,0,0,0.56), 0 0 34px rgba(88,166,255,0.42);
    pointer-events: none;
    transition: all 0.2s ease;
}

#tactics-pro-app .tp-tour-card {
    position: fixed;
    z-index: 1000001;
    width: min(420px, calc(100vw - 32px));
    background: linear-gradient(180deg, #161b22, #0d1117);
    border: 1px solid var(--tp-border-strong);
    border-radius: 18px;
    box-shadow: 0 24px 80px rgba(0,0,0,0.55);
    padding: 18px;
    color: var(--tp-text-main);
}

#tactics-pro-app .tp-tour-card h3 {
    margin: 0 0 8px;
    color: #ffffff;
    font-size: 1.05rem;
}

#tactics-pro-app .tp-tour-card p {
    color: var(--tp-text-muted);
    line-height: 1.45;
    font-size: 0.9rem;
    margin: 0 0 14px;
}

#tactics-pro-app .tp-tour-progress {
    font-size: 0.72rem;
    color: var(--tp-primary);
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 8px;
}

#tactics-pro-app .tp-tour-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}

#tactics-pro-app .tp-tour-actions .btn {
    padding: 8px 12px;
    font-size: 0.78rem;
}

#tactics-pro-app .tp-tour-intro .tp-tour-actions {
    justify-content: stretch;
}

#tactics-pro-app .tp-tour-intro .tp-tour-actions .btn {
    flex: 1 1 auto;
}

@media (max-width: 992px) {
    #tactics-pro-app .toolbar-wing {
        max-height: calc(100dvh - 54px);
        padding-bottom: 80px;
    }

    #tactics-pro-app .tp-tour-card {
        left: 16px !important;
        right: 16px !important;
        top: auto !important;
        bottom: 16px !important;
        width: auto;
    }
}

@media (max-width: 640px) {
    #tactics-pro-app .tp-tour-start {
        display: none;
    }
}


/* [CHANGE START] Batch 48 — Playmaker sidebar scroll and stable accordion geometry */
#tactics-pro-app.tp-is-playmaker {
    min-height: 0 !important;
    overflow: hidden !important;
}

#tactics-pro-app #page-playmaker.playmaker-layout {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: calc(100dvh - 96px) !important;
    max-height: calc(100dvh - 96px) !important;
    overflow: hidden !important;
    align-items: stretch !important;
}

#tactics-pro-app #page-playmaker > .toolbar-wing {
    align-self: stretch !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-y: contain !important;
    scrollbar-gutter: stable both-edges;
    scroll-padding-bottom: 120px;
}

#tactics-pro-app #leftPanel.toolbar-wing,
#tactics-pro-app #rightPanel.toolbar-wing {
    flex: 0 0 280px !important;
}

#tactics-pro-app #leftPanel.toolbar-wing {
    gap: 14px !important;
    padding-bottom: 120px !important;
}

#tactics-pro-app #rightPanel.toolbar-wing {
    padding-bottom: 90px !important;
}

#tactics-pro-app #page-playmaker .field-container {
    min-width: 0 !important;
    min-height: 0 !important;
    height: 100% !important;
    overflow: hidden !important;
}

#tactics-pro-app #page-playmaker .canvas-wrapper {
    min-height: 0 !important;
}

#tactics-pro-app #leftPanel .tp-control-mode-card,
#tactics-pro-app #leftPanel .tp-accordion {
    width: 100% !important;
    flex: 0 0 auto !important;
}

#tactics-pro-app #leftPanel .tp-accordion {
    display: block !important;
    overflow: hidden !important;
    border-radius: 14px !important;
    border: 1px solid var(--tp-border) !important;
    background: linear-gradient(180deg, rgba(33, 38, 45, 0.96), rgba(13, 17, 23, 0.92)) !important;
    box-shadow: var(--tp-shadow-soft);
}

#tactics-pro-app #leftPanel .tp-accordion-toggle {
    min-height: 46px !important;
    border-radius: 0 !important;
    border-bottom: 1px solid rgba(70, 81, 95, 0.56) !important;
    flex: 0 0 auto !important;
}

#tactics-pro-app #leftPanel .tp-accordion:not(.is-open) .tp-accordion-toggle {
    border-bottom-color: transparent !important;
}

#tactics-pro-app #leftPanel .tp-accordion-body {
    display: none !important;
    width: 100% !important;
    padding: 14px !important;
    overflow: visible !important;
}

#tactics-pro-app #leftPanel .tp-accordion.is-open .tp-accordion-body {
    display: block !important;
}

#tactics-pro-app #leftPanel .tp-accordion-body > *:last-child {
    margin-bottom: 0 !important;
}

#tactics-pro-app #leftPanel .tp-accordion .input-group,
#tactics-pro-app #leftPanel .tp-accordion .control-row,
#tactics-pro-app #leftPanel .tp-accordion .tp-ai-tactics-panel,
#tactics-pro-app #leftPanel .tp-accordion .tool-grid,
#tactics-pro-app #leftPanel .tp-accordion .tp-playmaker-save-actions {
    max-width: 100%;
}

@media (max-width: 992px) {
    #tactics-pro-app #page-playmaker.playmaker-layout {
        height: calc(100dvh - 54px) !important;
        max-height: calc(100dvh - 54px) !important;
    }

    #tactics-pro-app #page-playmaker > .toolbar-wing {
        height: 100dvh !important;
        max-height: 100dvh !important;
        padding-bottom: 120px !important;
    }
}

@supports not (height: 100dvh) {
    #tactics-pro-app #page-playmaker.playmaker-layout {
        height: calc(100vh - 96px) !important;
        max-height: calc(100vh - 96px) !important;
    }

    @media (max-width: 992px) {
        #tactics-pro-app #page-playmaker.playmaker-layout {
            height: calc(100vh - 54px) !important;
            max-height: calc(100vh - 54px) !important;
        }
    }
}
/* [CHANGE END] */


/* [CHANGE START] Batch 49 — Restore Playmaker accordion color identity */
#tactics-pro-app #leftPanel .tp-accordion {
    --tp-accordion-accent: var(--tp-primary);
    --tp-accordion-soft: rgba(88, 166, 255, 0.10);
    --tp-accordion-border: rgba(88, 166, 255, 0.34);
    border-left: 5px solid var(--tp-accordion-accent) !important;
    border-color: var(--tp-accordion-border) !important;
}

#tactics-pro-app #leftPanel .tp-accordion[data-tp-accordion="current-drill"] {
    --tp-accordion-accent: #2ea043;
    --tp-accordion-soft: rgba(46, 160, 67, 0.14);
    --tp-accordion-border: rgba(46, 160, 67, 0.42);
}

#tactics-pro-app #leftPanel .tp-accordion[data-tp-accordion="field-setup"] {
    --tp-accordion-accent: #58a6ff;
    --tp-accordion-soft: rgba(88, 166, 255, 0.14);
    --tp-accordion-border: rgba(88, 166, 255, 0.42);
}

#tactics-pro-app #leftPanel .tp-accordion[data-tp-accordion="squad-builder"] {
    --tp-accordion-accent: #d29922;
    --tp-accordion-soft: rgba(210, 153, 34, 0.15);
    --tp-accordion-border: rgba(210, 153, 34, 0.44);
}

#tactics-pro-app #leftPanel .tp-accordion[data-tp-accordion="draggables"] {
    --tp-accordion-accent: #a371f7;
    --tp-accordion-soft: rgba(163, 113, 247, 0.15);
    --tp-accordion-border: rgba(163, 113, 247, 0.44);
}

#tactics-pro-app #leftPanel .tp-accordion .tp-accordion-toggle {
    background: linear-gradient(90deg, var(--tp-accordion-soft), rgba(255,255,255,0.015)) !important;
}

#tactics-pro-app #leftPanel .tp-accordion .tp-accordion-toggle:hover {
    background: linear-gradient(90deg, var(--tp-accordion-soft), rgba(88,166,255,0.075)) !important;
}

#tactics-pro-app #leftPanel .tp-accordion .tp-accordion-chevron,
#tactics-pro-app #leftPanel .tp-accordion.is-open .tp-accordion-chevron {
    color: var(--tp-accordion-accent) !important;
}

#tactics-pro-app #leftPanel .tp-accordion.is-open {
    box-shadow: 0 0 0 1px var(--tp-accordion-border), 0 12px 28px rgba(0,0,0,0.24) !important;
}

#tactics-pro-app #leftPanel .tp-accordion.is-open .tp-accordion-body {
    background: linear-gradient(180deg, rgba(13,17,23,0.18), var(--tp-accordion-soft)) !important;
}
/* [CHANGE END] */


/* Batch 91: Basic / Advanced onboarding walkthrough */
#tactics-pro-app .tp-tour-choice-card {
    width: min(680px, calc(100vw - 32px));
    max-height: calc(100dvh - 40px);
    overflow: auto;
}

#tactics-pro-app .tp-tour-choice-card h3 {
    font-size: 1.35rem;
}

#tactics-pro-app .tp-tour-choice-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 16px 0;
}

#tactics-pro-app .tp-tour-choice {
    display: grid;
    gap: 7px;
    text-align: left;
    padding: 16px;
    border-radius: 16px;
    border: 1px solid rgba(139,148,158,.28);
    background:
        radial-gradient(circle at top left, rgba(88,166,255,.12), transparent 34%),
        rgba(22,27,34,.92);
    color: #f0f6fc;
    cursor: pointer;
    transition: transform .16s ease, border-color .16s ease, background .16s ease;
}

#tactics-pro-app .tp-tour-choice:hover,
#tactics-pro-app .tp-tour-choice:focus {
    transform: translateY(-1px);
    border-color: rgba(88,166,255,.55);
    background:
        radial-gradient(circle at top left, rgba(88,166,255,.18), transparent 34%),
        rgba(22,27,34,.98);
    outline: none;
}

#tactics-pro-app .tp-tour-choice-kicker {
    color: var(--tp-primary);
    font-size: .68rem;
    letter-spacing: .09em;
    text-transform: uppercase;
    font-weight: 950;
}

#tactics-pro-app .tp-tour-choice strong {
    font-size: 1rem;
    color: #ffffff;
}

#tactics-pro-app .tp-tour-choice small {
    color: var(--tp-text-muted);
    line-height: 1.45;
    font-size: .82rem;
}

#tactics-pro-app .tp-tour-actions--split {
    justify-content: space-between;
    border-top: 1px solid rgba(139,148,158,.18);
    padding-top: 12px;
}

#tactics-pro-app .tp-tour-card .btn[disabled] {
    opacity: .45;
    cursor: not-allowed;
}

#tactics-pro-app .tp-tour-card {
    backdrop-filter: blur(10px);
}

#tactics-pro-app .tp-tour-spotlight {
    animation: tpTourPulse 1.8s ease-in-out infinite;
}

@keyframes tpTourPulse {
    0%, 100% { box-shadow: 0 0 0 9999px rgba(0,0,0,0.56), 0 0 26px rgba(88,166,255,0.32); }
    50% { box-shadow: 0 0 0 9999px rgba(0,0,0,0.56), 0 0 42px rgba(88,166,255,0.52); }
}

@media (max-width: 700px) {
    #tactics-pro-app .tp-tour-choice-grid {
        grid-template-columns: 1fr;
    }

    #tactics-pro-app .tp-tour-choice-card {
        left: 16px !important;
        right: 16px !important;
        top: 50% !important;
        bottom: auto !important;
        width: auto;
        transform: translateY(-50%) !important;
    }

    #tactics-pro-app .tp-tour-actions--split {
        display: grid;
        grid-template-columns: 1fr;
    }
}


/* Batch 93: Walkthrough spotlight visibility fix */
#tactics-pro-app .tp-tour-overlay {
    background: transparent !important;
}

#tactics-pro-app .tp-tour-spotlight {
    background: transparent !important;
    border: 3px solid var(--tp-primary) !important;
    box-shadow:
        0 0 0 9999px rgba(0, 0, 0, 0.58),
        0 0 0 6px rgba(88, 166, 255, 0.18),
        0 0 34px rgba(88, 166, 255, 0.58) !important;
    pointer-events: none !important;
}

#tactics-pro-app .tp-tour-card {
    border-color: rgba(88,166,255,.45) !important;
}

#tactics-pro-app .tp-tour-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}

@keyframes tpTourPulse {
    0%, 100% {
        box-shadow:
            0 0 0 9999px rgba(0,0,0,0.58),
            0 0 0 6px rgba(88,166,255,0.18),
            0 0 26px rgba(88,166,255,0.42);
    }
    50% {
        box-shadow:
            0 0 0 9999px rgba(0,0,0,0.58),
            0 0 0 7px rgba(88,166,255,0.24),
            0 0 44px rgba(88,166,255,0.64);
    }
}


/* Batch 94: Walkthrough scroll and target-lift fix */
#tactics-pro-app .tp-tour-target-lift {
    isolation: isolate;
    filter: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    box-shadow:
        0 0 0 3px rgba(88,166,255,.22),
        0 0 22px rgba(88,166,255,.55) !important;
    border-radius: 12px;
}

#tactics-pro-app #draggable-tools-container.tp-tour-target-lift,
#tactics-pro-app #btnRecordRoute.tp-tour-target-lift {
    background: rgba(22,27,34,.98) !important;
}

#tactics-pro-app .tp-tour-overlay {
    pointer-events: none !important;
}

#tactics-pro-app .tp-tour-card {
    pointer-events: auto !important;
}

#tactics-pro-app .tp-tour-spotlight {
    pointer-events: none !important;
}

#tactics-pro-app .toolbar-wing .tp-tour-target-lift {
    scroll-margin-top: 90px;
    scroll-margin-bottom: 120px;
}

#tactics-pro-app .tp-accordion-body .tp-tour-target-lift {
    scroll-margin-top: 80px;
    scroll-margin-bottom: 100px;
}


/* Batch 95: Walkthrough card/target layering fix */
#tactics-pro-app .tp-tour-spotlight {
    z-index: 1000000 !important;
}

#tactics-pro-app .tp-tour-target-lift {
    z-index: 1000001 !important;
}

#tactics-pro-app .tp-tour-card {
    z-index: 1000004 !important;
    pointer-events: auto !important;
}

#tactics-pro-app .tp-tour-card .tp-tour-actions,
#tactics-pro-app .tp-tour-card .tp-tour-actions * {
    position: relative;
    z-index: 1000005 !important;
    pointer-events: auto !important;
}

#tactics-pro-app #btnRecordRoute.tp-tour-target-lift,
#tactics-pro-app #draggable-tools-container.tp-tour-target-lift {
    color: #ffffff !important;
    outline: 3px solid rgba(88,166,255,.55) !important;
    outline-offset: 3px !important;
}

#tactics-pro-app #btnRecordRoute.tp-tour-target-lift {
    background: linear-gradient(135deg, #d97706, #f59e0b) !important;
    border-color: #fbbf24 !important;
    color: #111827 !important;
    box-shadow:
        0 0 0 3px rgba(251,191,36,.24),
        0 0 28px rgba(251,191,36,.45) !important;
}

#tactics-pro-app #draggable-tools-container.tp-tour-target-lift {
    border-radius: 14px;
    padding: 8px;
    background: rgba(13,17,23,.96) !important;
}

#tactics-pro-app .timeline-bar.tp-tour-target-lift,
#tactics-pro-app #variantContainer.tp-tour-target-lift,
#tactics-pro-app #page-library .library-header.tp-tour-target-lift,
#tactics-pro-app #page-settings .tp-fo-header-bar.tp-tour-target-lift,
#tactics-pro-app #page-guide.tp-tour-target-lift {
    background: rgba(22,27,34,.98) !important;
}


/* Batch 96: Walkthrough emergency exit and large-target fix */
#tpTourOverlay.tp-tour-overlay {
    position: fixed !important;
    inset: 0 !important;
    z-index: 2147482000 !important;
    width: 100vw !important;
    height: 100dvh !important;
    pointer-events: none !important;
}

#tpTourOverlay .tp-tour-spotlight {
    position: fixed !important;
    z-index: 2147482001 !important;
    pointer-events: none !important;
}

#tpTourOverlay .tp-tour-card {
    position: fixed !important;
    z-index: 2147483000 !important;
    pointer-events: auto !important;
}

#tpTourOverlay .tp-tour-card,
#tpTourOverlay .tp-tour-card * {
    pointer-events: auto !important;
}

#tpTourOverlay .tp-tour-close-x {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2147483001;
    width: 34px;
    height: 34px;
    border-radius: 999px;
    border: 1px solid rgba(139,148,158,.35);
    background: rgba(13,17,23,.92);
    color: #ffffff;
    font-size: 1.25rem;
    font-weight: 900;
    line-height: 1;
    cursor: pointer;
}

#tpTourOverlay .tp-tour-close-x:hover,
#tpTourOverlay .tp-tour-close-x:focus {
    background: #da3633;
    border-color: #da3633;
    outline: none;
}

#tpTourOverlay .tp-tour-progress {
    padding-right: 38px;
}

#tactics-pro-app .tp-tour-target-context {
    outline: 3px solid rgba(88,166,255,.38) !important;
    outline-offset: -3px !important;
}

body:has(#tpTourOverlay) #tactics-pro-app .tp-tour-target-lift {
    z-index: 2147482002 !important;
}

@supports not selector(:has(*)) {
    #tactics-pro-app .tp-tour-target-lift {
        z-index: 2147482002 !important;
    }
}


/* Batch 97 rollback-from-96: targeted walkthrough fixes only */
#tpTourOverlay.tp-tour-overlay {
    z-index: 2147482000 !important;
}

#tpTourOverlay .tp-tour-spotlight {
    z-index: 2147482001 !important;
}

body #tactics-pro-app .tp-tour-target-lift {
    z-index: 2147482002 !important;
}

#tpTourOverlay .tp-tour-card {
    z-index: 2147483000 !important;
    pointer-events: auto !important;
}

#tpTourOverlay .tp-tour-card,
#tpTourOverlay .tp-tour-card * {
    pointer-events: auto !important;
}

#tpTourOverlay .tp-tour-actions,
#tpTourOverlay .tp-tour-actions * {
    position: relative;
    z-index: 2147483001 !important;
    pointer-events: auto !important;
}

/* Make only the problem sidebar targets visible without changing popup styling */
#tactics-pro-app #btnRecordRoute.tp-tour-target-lift {
    background: linear-gradient(135deg, #f2c94c, #f59e0b) !important;
    border-color: #fbbf24 !important;
    color: #111827 !important;
    box-shadow:
        0 0 0 3px rgba(251,191,36,.24),
        0 0 28px rgba(251,191,36,.45) !important;
    outline: 3px solid rgba(251,191,36,.55) !important;
    outline-offset: 3px !important;
}

#tactics-pro-app #draggable-tools-container.tp-tour-target-lift {
    background: rgba(13,17,23,.96) !important;
    outline: 3px solid rgba(88,166,255,.55) !important;
    outline-offset: 3px !important;
    border-radius: 14px;
    padding: 8px;
}

/* Large page-level targets should not float above the walkthrough card */
#tactics-pro-app .tp-tour-target-context {
    z-index: auto !important;
    outline: 3px solid rgba(88,166,255,.35) !important;
    outline-offset: -3px !important;
}


/* Batch 98: Restore original walkthrough popup styling after body-level overlay move */
#tpTourOverlay.tp-tour-overlay {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    z-index: 2147482000 !important;
    background: transparent !important;
    pointer-events: none !important;
    --tp-primary: #58a6ff;
    --tp-border-strong: rgba(139,148,158,.42);
    --tp-text-main: #f0f6fc;
    --tp-text-muted: #8b949e;
}

#tpTourOverlay .tp-tour-spotlight {
    position: fixed !important;
    z-index: 2147482001 !important;
    border: 2px solid var(--tp-primary) !important;
    border-radius: 16px !important;
    box-shadow:
        0 0 0 9999px rgba(0,0,0,0.56),
        0 0 34px rgba(88,166,255,0.42) !important;
    pointer-events: none !important;
    transition: all 0.2s ease !important;
}

#tpTourOverlay .tp-tour-card {
    position: fixed !important;
    z-index: 2147483000 !important;
    width: min(420px, calc(100vw - 32px)) !important;
    background: linear-gradient(180deg, #161b22, #0d1117) !important;
    border: 1px solid var(--tp-border-strong) !important;
    border-radius: 18px !important;
    box-shadow: 0 24px 80px rgba(0,0,0,0.55) !important;
    padding: 18px !important;
    color: var(--tp-text-main) !important;
    pointer-events: auto !important;
    font-family: inherit !important;
}

#tpTourOverlay .tp-tour-card,
#tpTourOverlay .tp-tour-card * {
    box-sizing: border-box !important;
    pointer-events: auto !important;
}

#tpTourOverlay .tp-tour-card h3 {
    margin: 0 0 8px !important;
    color: #ffffff !important;
    font-size: 1.05rem !important;
    line-height: 1.25 !important;
    font-weight: 900 !important;
    padding-right: 36px !important;
}

#tpTourOverlay .tp-tour-card p {
    color: var(--tp-text-muted) !important;
    line-height: 1.45 !important;
    font-size: 0.9rem !important;
    margin: 0 0 14px !important;
}

#tpTourOverlay .tp-tour-progress {
    font-size: 0.72rem !important;
    color: var(--tp-primary) !important;
    font-weight: 800 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    margin-bottom: 8px !important;
    padding-right: 38px !important;
}

#tpTourOverlay .tp-tour-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    justify-content: flex-end !important;
    align-items: center !important;
    margin-top: 0 !important;
    position: relative !important;
    z-index: 2147483001 !important;
}

#tpTourOverlay .tp-tour-actions .btn {
    appearance: none !important;
    border-radius: 999px !important;
    border: 1px solid rgba(139,148,158,.35) !important;
    background: rgba(255,255,255,.06) !important;
    color: #f0f6fc !important;
    padding: 8px 12px !important;
    font-size: 0.78rem !important;
    line-height: 1.15 !important;
    font-weight: 800 !important;
    cursor: pointer !important;
    text-decoration: none !important;
}

#tpTourOverlay .tp-tour-actions .btn:hover:not(:disabled),
#tpTourOverlay .tp-tour-actions .btn:focus:not(:disabled) {
    background: rgba(88,166,255,.14) !important;
    border-color: rgba(88,166,255,.55) !important;
    outline: none !important;
}

#tpTourOverlay .tp-tour-actions .btn:disabled {
    opacity: .45 !important;
    cursor: not-allowed !important;
}

#tpTourOverlay .tp-tour-actions .btn.primary,
#tpTourOverlay .tp-tour-actions [data-tour-action="next"] {
    background: var(--tp-primary) !important;
    border-color: var(--tp-primary) !important;
    color: #04111f !important;
}

#tpTourOverlay .tp-tour-actions [data-tour-action="dismiss"] {
    color: #ffb4b4 !important;
    border-color: rgba(218,54,51,.42) !important;
}

#tpTourOverlay .tp-tour-intro .tp-tour-actions {
    justify-content: stretch !important;
}

#tpTourOverlay .tp-tour-intro .tp-tour-actions .btn {
    flex: 1 1 auto !important;
}

#tpTourOverlay .tp-tour-choice-card {
    width: min(680px, calc(100vw - 32px)) !important;
    max-height: calc(100dvh - 40px) !important;
    overflow: auto !important;
}

#tpTourOverlay .tp-tour-choice-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    margin: 16px 0 !important;
}

#tpTourOverlay .tp-tour-choice {
    display: grid !important;
    gap: 7px !important;
    text-align: left !important;
    padding: 16px !important;
    border-radius: 16px !important;
    border: 1px solid rgba(139,148,158,.28) !important;
    background:
        radial-gradient(circle at top left, rgba(88,166,255,.12), transparent 34%),
        rgba(22,27,34,.92) !important;
    color: #f0f6fc !important;
    cursor: pointer !important;
}

#tpTourOverlay .tp-tour-choice:hover,
#tpTourOverlay .tp-tour-choice:focus {
    border-color: rgba(88,166,255,.55) !important;
    background:
        radial-gradient(circle at top left, rgba(88,166,255,.18), transparent 34%),
        rgba(22,27,34,.98) !important;
    outline: none !important;
}

#tpTourOverlay .tp-tour-choice-kicker {
    color: var(--tp-primary) !important;
    font-size: .68rem !important;
    letter-spacing: .09em !important;
    text-transform: uppercase !important;
    font-weight: 950 !important;
}

#tpTourOverlay .tp-tour-choice strong {
    font-size: 1rem !important;
    color: #ffffff !important;
}

#tpTourOverlay .tp-tour-choice small {
    color: var(--tp-text-muted) !important;
    line-height: 1.45 !important;
    font-size: .82rem !important;
}

#tpTourOverlay .tp-tour-close-x {
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    z-index: 2147483001 !important;
    width: 34px !important;
    height: 34px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(139,148,158,.35) !important;
    background: rgba(13,17,23,.92) !important;
    color: #ffffff !important;
    font-size: 1.25rem !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    cursor: pointer !important;
}

#tpTourOverlay .tp-tour-close-x:hover,
#tpTourOverlay .tp-tour-close-x:focus {
    background: #da3633 !important;
    border-color: #da3633 !important;
    outline: none !important;
}

@media (max-width: 992px) {
    #tpTourOverlay .tp-tour-card {
        left: 16px !important;
        right: 16px !important;
        top: auto !important;
        bottom: 16px !important;
        width: auto !important;
        max-height: calc(100dvh - 32px) !important;
        overflow: auto !important;
    }
}

@media (max-width: 700px) {
    #tpTourOverlay .tp-tour-choice-grid {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 640px) {
    #tpTourOverlay .tp-tour-actions {
        justify-content: stretch !important;
    }

    #tpTourOverlay .tp-tour-actions .btn {
        flex: 1 1 calc(50% - 8px) !important;
    }

    #tpTourOverlay .tp-tour-choice-card .tp-tour-actions .btn {
        flex: 1 1 100% !important;
    }
}

/* v2.0.24 - Coach/Club profile-style workspace logo uploader */
.tp-brand-logo-editor{
  display:flex;
  align-items:center;
  gap:16px;
  padding:14px;
  border:1px solid var(--tp-border,#d8dee4);
  border-radius:14px;
  background:rgba(255,255,255,.035);
}
.tp-brand-logo-preview{
  width:84px;
  height:84px;
  flex:0 0 84px;
  border-radius:50%;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(145deg,#202938,#111827);
  border:2px solid rgba(255,255,255,.14);
  box-shadow:0 8px 22px rgba(0,0,0,.22);
  color:#fff;
  font-weight:800;
  letter-spacing:.04em;
}
.tp-brand-logo-preview img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.tp-brand-logo-actions{
  min-width:0;
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
}
.tp-brand-logo-upload{cursor:pointer;}
.tp-brand-logo-actions .tp-field-help{
  flex-basis:100%;
  margin:3px 0 0;
  line-height:1.45;
  opacity:.74;
}
@media (max-width:600px){
  .tp-brand-logo-editor{align-items:flex-start;gap:12px;}
  .tp-brand-logo-preview{width:68px;height:68px;flex-basis:68px;}
  .tp-brand-logo-actions{align-items:stretch;}
  .tp-brand-logo-actions .tp-btn{width:100%;justify-content:center;text-align:center;}
}

/* v2.0.31.8 — Coach Academy hands-on training */
#tactics-pro-app .tp-academy-wrap {
    width: min(1180px, calc(100% - 36px));
    margin: 0 auto;
    padding: 28px 0 44px;
    display: grid;
    gap: 20px;
}

#tactics-pro-app .tp-academy-hero {
    display: flex;
    justify-content: space-between;
    gap: 22px;
    align-items: flex-start;
    padding: 24px;
    border: 1px solid var(--tp-border);
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(88,166,255,.09), rgba(22,27,34,.94) 45%);
}

#tactics-pro-app .tp-academy-hero > div:first-child {
    min-width: 0;
    max-width: 760px;
}

#tactics-pro-app .tp-academy-hero p,
#tactics-pro-app .tp-academy-course p,
#tactics-pro-app .tp-academy-panel p {
    color: var(--tp-text-muted);
    line-height: 1.55;
}

#tactics-pro-app .tp-academy-level {
    min-width: 220px;
    display: grid;
    gap: 5px;
    padding: 16px 18px;
    border: 1px solid rgba(88,166,255,.28);
    border-radius: 14px;
    background: rgba(13,17,23,.72);
}

#tactics-pro-app .tp-academy-level span,
#tactics-pro-app .tp-academy-level small {
    color: var(--tp-text-muted);
    font-size: .78rem;
}

#tactics-pro-app .tp-academy-level strong {
    color: #fff;
    font-size: 1.08rem;
}

#tactics-pro-app .tp-academy-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(300px, .75fr);
    gap: 18px;
    align-items: start;
}

#tactics-pro-app .tp-academy-course,
#tactics-pro-app .tp-academy-panel {
    border: 1px solid var(--tp-border);
    border-radius: 16px;
    background: var(--tp-bg-panel);
    padding: 20px;
}

#tactics-pro-app .tp-academy-course.is-featured {
    border-color: rgba(88,166,255,.34);
}

#tactics-pro-app .tp-academy-course-head {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 10px;
}

#tactics-pro-app .tp-academy-course h2,
#tactics-pro-app .tp-academy-panel h2 {
    color: #fff;
    font-size: 1.15rem;
    margin: 4px 0 8px;
}

#tactics-pro-app .tp-academy-status,
#tactics-pro-app .tp-academy-course-count {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 5px 9px;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 800;
    color: #dbeafe;
    background: rgba(88,166,255,.14);
    border: 1px solid rgba(88,166,255,.26);
}

#tactics-pro-app .tp-academy-course-outline {
    margin: 16px 0 18px 20px;
    color: #d7dee8;
    line-height: 1.55;
    columns: 2;
    column-gap: 34px;
}

#tactics-pro-app .tp-academy-course-outline li {
    break-inside: avoid;
    margin-bottom: 6px;
}

#tactics-pro-app .tp-academy-course-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

#tactics-pro-app .tp-academy-complete-note {
    color: #7ee787;
    font-weight: 800;
}

#tactics-pro-app .tp-academy-awards {
    display: grid;
    gap: 10px;
    margin-top: 14px;
}

#tactics-pro-app .tp-academy-award {
    display: grid;
    gap: 4px;
    padding: 13px;
    border: 1px solid rgba(139,148,158,.22);
    border-radius: 12px;
    background: rgba(13,17,23,.55);
}

#tactics-pro-app .tp-academy-award strong { color: #fff; }
#tactics-pro-app .tp-academy-award span { color: var(--tp-text-muted); font-size: .8rem; }
#tactics-pro-app .tp-academy-award.is-locked { opacity: .58; }
#tactics-pro-app .tp-academy-award.is-earned {
    opacity: 1;
    border-color: rgba(126,231,135,.42);
    background: rgba(46,160,67,.10);
}

#tactics-pro-app .tp-academy-challenges {
    display: grid;
    grid-template-columns: minmax(220px, .7fr) minmax(0, 1.3fr);
    gap: 18px;
    align-items: start;
}

#tactics-pro-app .tp-academy-challenge-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

#tactics-pro-app .tp-academy-challenge-grid > div {
    display: grid;
    gap: 4px;
    padding: 13px;
    border: 1px solid rgba(139,148,158,.2);
    border-radius: 12px;
    background: rgba(13,17,23,.48);
}

#tactics-pro-app .tp-academy-challenge-grid strong { color: #fff; }
#tactics-pro-app .tp-academy-challenge-grid span { color: var(--tp-text-muted); font-size: .8rem; line-height: 1.4; }
#tactics-pro-app .tp-academy-challenge-grid small { color: var(--tp-primary); font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }

#tpTourOverlay .tp-training-card {
    width: min(430px, calc(100vw - 32px));
}

#tpTourOverlay .tp-training-requirement {
    display: grid;
    gap: 4px;
    margin-top: 12px;
    padding: 11px 12px;
    border: 1px solid rgba(251,191,36,.32);
    border-radius: 11px;
    background: rgba(245,158,11,.08);
}

#tpTourOverlay .tp-training-requirement strong {
    color: #fbbf24;
    font-size: .78rem;
}

#tpTourOverlay .tp-training-requirement span {
    color: #d7dee8;
    font-size: .78rem;
    line-height: 1.45;
}

#tpTourOverlay .tp-training-requirement.is-complete {
    border-color: rgba(126,231,135,.34);
    background: rgba(46,160,67,.10);
}

#tpTourOverlay .tp-training-requirement.is-complete strong { color: #7ee787; }

@media (max-width: 900px) {
    #tactics-pro-app .tp-academy-grid,
    #tactics-pro-app .tp-academy-challenges {
        grid-template-columns: 1fr;
    }

    #tactics-pro-app .tp-academy-challenge-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    #tactics-pro-app .tp-academy-wrap {
        width: min(100% - 20px, 1180px);
        padding-top: 14px;
    }

    #tactics-pro-app .tp-academy-hero {
        display: grid;
        padding: 16px;
    }

    #tactics-pro-app .tp-academy-level { min-width: 0; }
    #tactics-pro-app .tp-academy-course-outline { columns: 1; }
    #tactics-pro-app .tp-academy-course-head { display: grid; }
    #tactics-pro-app .tp-academy-challenge-grid { grid-template-columns: 1fr; }
}
#tactics-pro-app .tp-tour-choice--training {
    grid-column: 1 / -1;
}
@media (max-width: 700px) {
    #tactics-pro-app .tp-tour-choice--training { grid-column: auto; }
}

/* v2.0.31.9 — Coach Academy Expert path: Player Controls */
#tactics-pro-app .tp-academy-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

#tactics-pro-app .tp-academy-grid > .tp-academy-panel {
    grid-column: 1 / -1;
}

#tactics-pro-app .tp-academy-course.is-locked {
    opacity: .62;
}

#tactics-pro-app .tp-academy-course.is-locked .tp-academy-status {
    color: var(--tp-text-muted);
    background: rgba(139,148,158,.09);
    border-color: rgba(139,148,158,.2);
}

@media (max-width: 900px) {
    #tactics-pro-app .tp-academy-grid {
        grid-template-columns: 1fr;
    }
}


/* v2.0.31.10 — Academy strict gates + practical learning paths */
#tactics-pro-app .tp-academy-paths {
    border: 1px solid var(--tp-border);
    border-radius: 16px;
    background: var(--tp-bg-panel);
    padding: 20px;
}
#tactics-pro-app .tp-academy-paths-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 18px;
    margin-bottom: 16px;
}
#tactics-pro-app .tp-academy-paths-head h2 {
    margin: 4px 0 7px;
    color: #fff;
    font-size: 1.15rem;
}
#tactics-pro-app .tp-academy-paths-head p {
    margin: 0;
    max-width: 780px;
    color: var(--tp-text-muted);
    line-height: 1.5;
}
#tactics-pro-app .tp-academy-paths-note {
    flex: 0 0 auto;
    display: inline-flex;
    min-height: 30px;
    align-items: center;
    padding: 5px 10px;
    border-radius: 999px;
    color: #dbeafe;
    background: rgba(88,166,255,.12);
    border: 1px solid rgba(88,166,255,.24);
    font-size: .72rem;
    font-weight: 800;
}
#tactics-pro-app .tp-academy-path-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}
#tactics-pro-app .tp-academy-path {
    min-width: 0;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 10px 12px;
    align-items: start;
    padding: 15px;
    border: 1px solid rgba(139,148,158,.2);
    border-radius: 13px;
    background: rgba(13,17,23,.48);
}
#tactics-pro-app .tp-academy-path.is-active {
    border-color: rgba(126,231,135,.38);
    background: rgba(46,160,67,.08);
}
#tactics-pro-app .tp-academy-path-icon {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    color: #fff;
    background: rgba(88,166,255,.16);
    border: 1px solid rgba(88,166,255,.24);
    font-size: .76rem;
    font-weight: 900;
    letter-spacing: .04em;
}
#tactics-pro-app .tp-academy-path strong {
    display: block;
    color: #fff;
    margin-bottom: 4px;
}
#tactics-pro-app .tp-academy-path span:not(.tp-academy-path-icon) {
    display: block;
    color: var(--tp-text-muted);
    font-size: .79rem;
    line-height: 1.42;
}
#tactics-pro-app .tp-academy-path small {
    grid-column: 2;
    color: var(--tp-primary);
    font-size: .68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .05em;
}
#tpTourOverlay .tp-training-card [data-tour-action="next"][disabled] {
    opacity: .42;
    cursor: not-allowed;
    filter: saturate(.45);
}
#tpTourOverlay .tp-training-requirement:not(.is-complete) {
    box-shadow: inset 3px 0 0 rgba(251,191,36,.65);
}
@media (max-width: 980px) {
    #tactics-pro-app .tp-academy-path-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    #tactics-pro-app .tp-academy-paths { padding: 16px; }
    #tactics-pro-app .tp-academy-paths-head { display: grid; }
    #tactics-pro-app .tp-academy-path-grid { grid-template-columns: 1fr; }
}

/* v2.0.31.11 — Coach Academy verified points + visual reward progress */
#tactics-pro-app .tp-academy-progress-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    padding: 16px;
    border: 1px solid var(--tp-border);
    border-radius: 16px;
    background: var(--tp-bg-panel);
}
#tactics-pro-app .tp-academy-stat {
    min-width: 0;
    display: grid;
    gap: 5px;
    padding: 14px;
    border: 1px solid rgba(139,148,158,.2);
    border-radius: 13px;
    background: rgba(13,17,23,.48);
}
#tactics-pro-app .tp-academy-stat > span {
    color: var(--tp-text-muted);
    font-size: .72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .05em;
}
#tactics-pro-app .tp-academy-stat > strong {
    color: #fff;
    font-size: 1.55rem;
    line-height: 1.05;
}
#tactics-pro-app .tp-academy-stat > small {
    color: var(--tp-text-muted);
    font-size: .75rem;
    line-height: 1.4;
}
#tactics-pro-app .tp-academy-progress-meter-wrap {
    grid-column: 1 / -1;
    display: grid;
    gap: 9px;
}
#tactics-pro-app .tp-academy-progress-meter-copy {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    color: var(--tp-text-muted);
    font-size: .76rem;
}
#tactics-pro-app .tp-academy-progress-meter-copy strong { color: #fff; }
#tactics-pro-app .tp-academy-progress-meter {
    height: 10px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(139,148,158,.16);
    border: 1px solid rgba(139,148,158,.16);
}
#tactics-pro-app .tp-academy-progress-meter > span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--tp-primary), #7ee787);
    transition: width .28s ease;
}
#tactics-pro-app .tp-academy-course-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 7px;
}
#tactics-pro-app .tp-academy-course-reward {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 5px 9px;
    border-radius: 999px;
    color: #7ee787;
    background: rgba(46,160,67,.10);
    border: 1px solid rgba(126,231,135,.3);
    font-size: .72rem;
    font-weight: 900;
}
#tactics-pro-app .tp-academy-award {
    grid-template-columns: 42px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
}
#tactics-pro-app .tp-academy-award-icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    color: #d7dee8;
    background: rgba(139,148,158,.10);
    border: 1px solid rgba(139,148,158,.18);
    font-size: .9rem;
    font-weight: 900;
}
#tactics-pro-app .tp-academy-award > div {
    min-width: 0;
    display: grid;
    gap: 3px;
}
#tactics-pro-app .tp-academy-award > small {
    color: var(--tp-text-muted);
    font-size: .7rem;
    font-weight: 900;
    white-space: nowrap;
}
#tactics-pro-app .tp-academy-award.is-earned .tp-academy-award-icon {
    color: #7ee787;
    border-color: rgba(126,231,135,.38);
    background: rgba(46,160,67,.12);
}
#tactics-pro-app .tp-academy-award.is-earned > small { color: #7ee787; }

@media (max-width: 820px) {
    #tactics-pro-app .tp-academy-progress-summary { grid-template-columns: 1fr 1fr; }
    #tactics-pro-app .tp-academy-stat:first-child { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
    #tactics-pro-app .tp-academy-progress-summary { grid-template-columns: 1fr; padding: 13px; }
    #tactics-pro-app .tp-academy-stat:first-child { grid-column: auto; }
    #tactics-pro-app .tp-academy-progress-meter-copy { display: grid; gap: 4px; }
    #tactics-pro-app .tp-academy-course-meta { justify-content: flex-start; }
    #tactics-pro-app .tp-academy-award { grid-template-columns: 42px minmax(0, 1fr); }
    #tactics-pro-app .tp-academy-award > small { grid-column: 2; }
}

/* v2.0.31.12.1 — Front Office modern-minimal design correction */
#tactics-pro-app #page-settings .settings-container {
    width: min(100% - 48px, 1440px);
    max-width: 1440px;
    margin: 28px auto 64px;
    padding: 0;
}

#tactics-pro-app .tp-fo-page-title {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 28px;
    margin: 0 0 20px;
}
#tactics-pro-app .tp-fo-page-title > div { min-width: 0; }
#tactics-pro-app .tp-fo-page-eyebrow,
#tactics-pro-app .tp-fo-section-label {
    display: block;
    margin-bottom: 5px;
    color: var(--tp-text-muted);
    font-size: .68rem;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: .1em;
    text-transform: uppercase;
}
#tactics-pro-app .tp-fo-page-title h1 {
    margin: 0;
    color: #f0f6fc;
    font-size: clamp(1.75rem, 2.6vw, 2.35rem);
    font-weight: 720;
    line-height: 1.05;
    letter-spacing: -.04em;
}
#tactics-pro-app .tp-fo-page-title > p {
    margin: 0 0 2px;
    max-width: 560px;
    color: var(--tp-text-muted);
    font-size: .88rem;
    line-height: 1.5;
    text-align: right;
}

/* Quiet application navigation: no boxed admin toolbar. */
#tactics-pro-app .tp-fo-header-bar {
    display: flex;
    align-items: center;
    gap: 24px;
    margin: 0 0 38px;
    padding: 0;
    border: 0;
    border-bottom: 1px solid rgba(139,148,158,.18);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    flex-wrap: nowrap;
}
#tactics-pro-app .tp-fo-tabs {
    display: flex;
    flex: 1 1 auto;
    justify-content: flex-start;
    gap: 24px;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
}
#tactics-pro-app .tp-fo-tabs::-webkit-scrollbar { display: none; }
#tactics-pro-app .tp-fo-tab {
    position: relative;
    flex: 0 0 auto;
    min-height: 45px;
    padding: 4px 0 11px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #8b949e;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: -.005em;
    transition: color .16s ease;
}
#tactics-pro-app .tp-fo-tab:hover {
    background: transparent;
    color: #c9d1d9;
}
#tactics-pro-app .tp-fo-tab::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    border-radius: 2px 2px 0 0;
    background: transparent;
}
#tactics-pro-app .tp-fo-tab.is-active {
    border: 0;
    background: transparent;
    color: #f0f6fc;
}
#tactics-pro-app .tp-fo-tab.is-active::after { background: var(--tp-primary); }
#tactics-pro-app .tp-fo-tab:focus-visible {
    outline: 2px solid var(--tp-primary);
    outline-offset: 4px;
}
#tactics-pro-app .tp-fo-header-meta {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 16px;
    padding-bottom: 10px;
}
#tactics-pro-app .tp-fo-status-chip {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    color: #8b949e;
    font-size: .72rem;
    white-space: nowrap;
}
#tactics-pro-app .tp-fo-status-dot {
    width: 7px;
    height: 7px;
    box-shadow: none !important;
}
#tactics-pro-app .tp-fo-status-sep { opacity: .35; }
#tactics-pro-app .tp-fo-header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
}
#tactics-pro-app .tp-fo-action-link {
    color: #c9d1d9;
    font-size: .72rem;
    font-weight: 700;
    text-decoration: none;
}
#tactics-pro-app .tp-fo-action-link:hover { color: #fff; opacity: 1; }
#tactics-pro-app .tp-fo-action-link--muted { color: #6e7681; }

#tactics-pro-app .tp-fo-content-shell { margin-top: 0; }
#tactics-pro-app .tp-fo-dashboard {
    display: grid;
    gap: 36px;
}
#tactics-pro-app .tp-fo-dashboard-intro {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 28px;
    padding: 0;
}
#tactics-pro-app .tp-fo-dashboard-intro-copy { min-width: 0; }
#tactics-pro-app .tp-fo-dashboard-intro h2 {
    margin: 0 0 7px;
    color: #f0f6fc;
    font-size: clamp(1.45rem, 2.2vw, 1.95rem);
    font-weight: 690;
    letter-spacing: -.035em;
}
#tactics-pro-app .tp-fo-dashboard-intro p {
    margin: 0;
    max-width: 700px;
    color: #8b949e;
    font-size: .88rem;
    line-height: 1.55;
}
#tactics-pro-app .tp-fo-dashboard-account {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 5px 12px;
    max-width: 500px;
}
#tactics-pro-app .tp-fo-dashboard-account > span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #6e7681;
    font-size: .7rem;
    font-weight: 650;
}
#tactics-pro-app .tp-fo-dashboard-account > span + span::before {
    content: '·';
    margin-right: 7px;
    color: #484f58;
}
#tactics-pro-app .tp-fo-dashboard-account .tp-fo-dashboard-account-status { color: #8b949e; }

#tactics-pro-app .tp-fo-dashboard-section {
    display: grid;
    gap: 14px;
}
#tactics-pro-app .tp-fo-section-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 18px;
    padding-bottom: 9px;
    border-bottom: 1px solid rgba(139,148,158,.13);
}
#tactics-pro-app .tp-fo-section-heading h3 {
    margin: 0;
    color: #f0f6fc;
    font-size: .9rem;
    font-weight: 760;
    letter-spacing: -.01em;
}
#tactics-pro-app .tp-fo-section-heading > span {
    color: #6e7681;
    font-size: .72rem;
}

#tactics-pro-app .tp-fo-launch-grid {
    display: grid;
    gap: 12px;
}
#tactics-pro-app .tp-fo-launch-grid--core { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#tactics-pro-app .tp-fo-launch-grid--manage { grid-template-columns: repeat(3, minmax(0, 1fr)); }

#tactics-pro-app .tp-fo-launch-card {
    --tp-card-accent: #58a6ff;
    --tp-card-rgb: 88,166,255;
    appearance: none;
    position: relative;
    min-width: 0;
    overflow: hidden;
    text-align: left;
    color: var(--tp-text-main);
    border: 1px solid rgba(139,148,158,.17);
    border-radius: 11px;
    background: rgba(22,27,34,.5);
    box-shadow: none;
    cursor: pointer;
    transition: border-color .16s ease, background .16s ease, transform .16s ease;
}
#tactics-pro-app .tp-fo-launch-card::after { display: none; }
#tactics-pro-app .tp-fo-launch-card:hover {
    transform: translateY(-1px);
    border-color: rgba(139,148,158,.35);
    background: rgba(22,27,34,.82);
    box-shadow: none;
}
#tactics-pro-app .tp-fo-launch-card:focus-visible {
    outline: 2px solid var(--tp-primary);
    outline-offset: 2px;
    box-shadow: none;
}
#tactics-pro-app .tp-fo-launch-card--violet { --tp-card-accent: #bc8cff; --tp-card-rgb: 188,140,255; }
#tactics-pro-app .tp-fo-launch-card--gold { --tp-card-accent: #e3b341; --tp-card-rgb: 227,179,65; }
#tactics-pro-app .tp-fo-launch-card--green { --tp-card-accent: #56d364; --tp-card-rgb: 86,211,100; }
#tactics-pro-app .tp-fo-launch-card--cyan { --tp-card-accent: #56d4dd; --tp-card-rgb: 86,212,221; }
#tactics-pro-app .tp-fo-launch-card--orange { --tp-card-accent: #f0883e; --tp-card-rgb: 240,136,62; }
#tactics-pro-app .tp-fo-launch-card--pink { --tp-card-accent: #e879b5; --tp-card-rgb: 232,121,181; }
#tactics-pro-app .tp-fo-launch-card--slate { --tp-card-accent: #9da7b3; --tp-card-rgb: 157,167,179; }
#tactics-pro-app .tp-fo-launch-card--teal { --tp-card-accent: #2dd4bf; --tp-card-rgb: 45,212,191; }

#tactics-pro-app .tp-fo-launch-card--core {
    min-height: 132px;
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) 24px;
    align-items: start;
    gap: 15px;
    padding: 20px;
}
#tactics-pro-app .tp-fo-launch-card--manage {
    min-height: 96px;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) 20px;
    align-items: center;
    gap: 13px;
    padding: 15px 16px;
}
#tactics-pro-app .tp-fo-launch-card[data-tp-dashboard-target="build"] {
    border-color: rgba(var(--tp-card-rgb), .3);
    background: linear-gradient(135deg, rgba(var(--tp-card-rgb), .075), rgba(22,27,34,.55) 46%);
}
#tactics-pro-app .tp-fo-launch-icon {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 10px;
    color: var(--tp-card-accent);
    background: rgba(var(--tp-card-rgb), .085);
}
#tactics-pro-app .tp-fo-launch-card--manage .tp-fo-launch-icon {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
    border-radius: 9px;
    background: rgba(var(--tp-card-rgb), .07);
}
#tactics-pro-app .tp-fo-launch-icon svg {
    width: 25px;
    height: 25px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.65;
    stroke-linecap: round;
    stroke-linejoin: round;
}
#tactics-pro-app .tp-fo-launch-card--manage .tp-fo-launch-icon svg { width: 20px; height: 20px; }
#tactics-pro-app .tp-fo-launch-icon svg circle,
#tactics-pro-app .tp-fo-launch-icon svg rect { fill: transparent; }
#tactics-pro-app .tp-fo-launch-copy {
    min-width: 0;
    display: grid;
    gap: 5px;
}
#tactics-pro-app .tp-fo-launch-copy strong {
    color: #f0f6fc;
    font-size: .98rem;
    font-weight: 720;
    letter-spacing: -.012em;
}
#tactics-pro-app .tp-fo-launch-copy > span {
    color: #8b949e;
    font-size: .78rem;
    line-height: 1.48;
}
#tactics-pro-app .tp-fo-launch-card--manage .tp-fo-launch-copy strong { font-size: .86rem; }
#tactics-pro-app .tp-fo-launch-card--manage .tp-fo-launch-copy > span {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    font-size: .72rem;
}
#tactics-pro-app .tp-fo-launch-arrow {
    align-self: center;
    color: #484f58;
    font-size: 1.05rem;
    transition: color .16s ease, transform .16s ease;
}
#tactics-pro-app .tp-fo-launch-card:hover .tp-fo-launch-arrow {
    color: var(--tp-card-accent);
    transform: translateX(2px);
}

/* Bottom information is deliberately unboxed. */
#tactics-pro-app .tp-fo-dashboard-footer {
    display: grid;
    grid-template-columns: minmax(240px, .72fr) minmax(0, 1.28fr);
    gap: 36px;
    padding: 25px 0 0;
    border-top: 1px solid rgba(139,148,158,.15);
}
#tactics-pro-app .tp-fo-dashboard-footer-account,
#tactics-pro-app .tp-fo-dashboard-footer-flow { min-width: 0; }
#tactics-pro-app .tp-fo-dashboard-footer-account > strong {
    display: block;
    margin-bottom: 5px;
    color: #c9d1d9;
    font-size: .83rem;
}
#tactics-pro-app .tp-fo-dashboard-footer-account > span:not(.tp-fo-section-label) {
    color: #6e7681;
    font-size: .72rem;
    line-height: 1.5;
}
#tactics-pro-app .tp-fo-flow-inline {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    counter-reset: tp-fo-flow;
    gap: 16px;
}
#tactics-pro-app .tp-fo-flow-inline li {
    position: relative;
    min-width: 0;
    padding-left: 25px;
    color: #8b949e;
    font-size: .71rem;
    line-height: 1.45;
    counter-increment: tp-fo-flow;
}
#tactics-pro-app .tp-fo-flow-inline li::before {
    content: counter(tp-fo-flow);
    position: absolute;
    left: 0;
    top: -1px;
    width: 17px;
    height: 17px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(139,148,158,.27);
    border-radius: 50%;
    color: #8b949e;
    font-size: .58rem;
    font-weight: 800;
}
#tactics-pro-app .tp-fo-dashboard-footer #tpCoachNextSteps { margin-top: 12px; }

@media (max-width: 1100px) {
    #tactics-pro-app .tp-fo-launch-grid--core { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    #tactics-pro-app .tp-fo-launch-grid--manage { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    #tactics-pro-app .tp-fo-header-meta .tp-fo-status-chip { display: none; }
    #tactics-pro-app .tp-fo-flow-inline { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
    #tactics-pro-app #page-settings .settings-container {
        width: min(100% - 24px, 1440px);
        margin-top: 18px;
    }
    #tactics-pro-app .tp-fo-page-title {
        display: grid;
        gap: 8px;
        margin-bottom: 15px;
    }
    #tactics-pro-app .tp-fo-page-title > p { text-align: left; }
    #tactics-pro-app .tp-fo-header-bar {
        align-items: flex-end;
        gap: 14px;
        margin-bottom: 28px;
    }
    #tactics-pro-app .tp-fo-tabs { gap: 20px; }
    #tactics-pro-app .tp-fo-header-meta { padding-bottom: 10px; }
    #tactics-pro-app .tp-fo-header-actions { gap: 8px; }
    #tactics-pro-app .tp-fo-dashboard { gap: 30px; }
    #tactics-pro-app .tp-fo-dashboard-intro {
        display: grid;
        align-items: start;
        gap: 13px;
    }
    #tactics-pro-app .tp-fo-dashboard-account { justify-content: flex-start; }
    #tactics-pro-app .tp-fo-launch-grid--core,
    #tactics-pro-app .tp-fo-launch-grid--manage { grid-template-columns: 1fr; }
    #tactics-pro-app .tp-fo-launch-card--core { min-height: 116px; padding: 17px; }
    #tactics-pro-app .tp-fo-dashboard-footer { grid-template-columns: 1fr; gap: 24px; }
}

@media (max-width: 480px) {
    #tactics-pro-app #page-settings .settings-container { width: min(100% - 18px, 1440px); }
    #tactics-pro-app .tp-fo-page-title > p { font-size: .8rem; }
    #tactics-pro-app .tp-fo-header-actions .tp-fo-action-link:first-child { display: none; }
    #tactics-pro-app .tp-fo-launch-card--core {
        grid-template-columns: 42px minmax(0, 1fr) 18px;
        gap: 12px;
    }
    #tactics-pro-app .tp-fo-launch-card--core .tp-fo-launch-icon { width: 42px; height: 42px; }
    #tactics-pro-app .tp-fo-launch-card--core .tp-fo-launch-icon svg { width: 22px; height: 22px; }
    #tactics-pro-app .tp-fo-section-heading > span { display: none; }
    #tactics-pro-app .tp-fo-flow-inline { grid-template-columns: 1fr; gap: 11px; }
}

#tactics-pro-app .tp-fo-dashboard-footer #tpCoachNextSteps .tp-status-message {
    margin: 9px 0 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: #6e7681;
    font-size: .68rem;
    line-height: 1.45;
}
#tactics-pro-app .tp-fo-dashboard-footer #tpCoachNextSteps .tp-status-message strong { color: #8b949e; font-weight: 700; }

/* v2.0.31.13 — Front Office interior/form UX modernization
   Carries the minimal dashboard language into high-use working sections without
   changing data, permissions, API routes, or save behavior. */
#tactics-pro-app .tp-fo-work-page {
    width: 100%;
    min-width: 0;
    display: grid;
    gap: 34px;
    padding: 2px 0 44px;
}
#tactics-pro-app .tp-fo-work-header {
    max-width: 760px;
    display: grid;
    gap: 7px;
}
#tactics-pro-app .tp-fo-work-kicker,
#tactics-pro-app .tp-fo-content-shell .tp-form-kicker {
    color: #6e7681;
    font-size: .68rem;
    font-weight: 760;
    letter-spacing: .075em;
    text-transform: uppercase;
}
#tactics-pro-app .tp-fo-work-header h2 {
    margin: 0;
    color: #f0f6fc;
    font-size: clamp(1.45rem, 2vw, 1.85rem);
    font-weight: 690;
    letter-spacing: -.034em;
    line-height: 1.15;
}
#tactics-pro-app .tp-fo-work-header p {
    margin: 0;
    color: #8b949e;
    font-size: .9rem;
    line-height: 1.55;
}

/* Front Office forms are working surfaces, not decorative dashboard cards. */
#tactics-pro-app .tp-fo-content-shell .tp-form-card,
#tactics-pro-app .tp-fo-content-shell .settings-card.tp-form-card,
#tactics-pro-app .tp-fo-content-shell .tp-section-card,
#tactics-pro-app .tp-fo-content-shell .settings-card.tp-section-card,
#tactics-pro-app .tp-fo-content-shell .tp-form-card.tp-section-card {
    overflow: visible;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}
#tactics-pro-app .tp-fo-content-shell .tp-section-card::before,
#tactics-pro-app .tp-fo-content-shell .settings-card.tp-section-card::before,
#tactics-pro-app .tp-fo-content-shell .tp-form-card.tp-section-card::before {
    display: none;
}
#tactics-pro-app .tp-fo-content-shell .tp-form-card + .tp-form-card { margin-top: 0; }
#tactics-pro-app .tp-fo-content-shell .tp-form-header {
    gap: 6px;
    margin: 0 0 22px;
}
#tactics-pro-app .tp-fo-content-shell .tp-form-title {
    color: #f0f6fc;
    font-size: 1.04rem;
    font-weight: 690;
    letter-spacing: -.018em;
}
#tactics-pro-app .tp-fo-content-shell .tp-form-subtitle,
#tactics-pro-app .tp-fo-content-shell .tp-field-help {
    color: #7d8590;
    font-size: .8rem;
    line-height: 1.5;
}
#tactics-pro-app .tp-fo-content-shell .tp-field-label,
#tactics-pro-app .tp-fo-content-shell .input-group label {
    color: #aeb6c1;
    font-size: .75rem;
    font-weight: 690;
    letter-spacing: .005em;
    margin-bottom: 8px;
}
#tactics-pro-app .tp-field-optional {
    margin-left: 5px;
    color: #6e7681;
    font-weight: 570;
}
#tactics-pro-app .tp-fo-content-shell .tp-inp,
#tactics-pro-app .tp-fo-content-shell input.tp-inp,
#tactics-pro-app .tp-fo-content-shell select.tp-inp,
#tactics-pro-app .tp-fo-content-shell textarea.tp-inp {
    width: 100%;
    min-height: 50px;
    border: 1px solid rgba(139,148,158,.23);
    border-radius: 8px;
    background: rgba(13,17,23,.72);
    box-shadow: none;
    color: #f0f6fc;
    padding: 12px 14px;
    font-size: .94rem;
}
#tactics-pro-app .tp-fo-content-shell textarea.tp-inp {
    min-height: 142px;
    line-height: 1.55;
}
#tactics-pro-app .tp-fo-content-shell .tp-inp:hover { border-color: rgba(139,148,158,.38); }
#tactics-pro-app .tp-fo-content-shell .tp-inp:focus {
    border-color: rgba(88,166,255,.74);
    background: rgba(13,17,23,.92);
    box-shadow: 0 0 0 3px rgba(88,166,255,.11);
}
#tactics-pro-app .tp-fo-content-shell .tp-form-section {
    margin-top: 22px;
    padding-top: 22px;
    border-top: 1px solid rgba(139,148,158,.13);
}
#tactics-pro-app .tp-fo-content-shell .tp-form-actions {
    margin-top: 24px;
    justify-content: flex-start;
}
#tactics-pro-app .tp-fo-content-shell .tp-form-actions .btn.full-width { width: auto; }

/* A subtle rule is enough to group a major task. */
#tactics-pro-app .tp-fo-form-surface {
    min-width: 0;
    padding-top: 28px !important;
    border-top: 1px solid rgba(139,148,158,.16) !important;
}

/* New drill: large inputs with the action separated from data entry. */
#tactics-pro-app .tp-fo-build-surface { max-width: 1080px; }
#tactics-pro-app .tp-fo-build-fields {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(230px, .55fr);
    gap: 24px 28px;
}
#tactics-pro-app .tp-fo-build-fields .input-group { min-width: 0; }
#tactics-pro-app .tp-fo-build-fields .tp-fo-field-wide { grid-column: 1 / -1; }
#tactics-pro-app .tp-fo-primary-action-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-top: 30px;
    padding-top: 22px;
    border-top: 1px solid rgba(139,148,158,.13);
}
#tactics-pro-app .tp-fo-primary-action-row > span {
    color: #6e7681;
    font-size: .76rem;
    line-height: 1.45;
}
#tactics-pro-app .tp-fo-primary-cta {
    flex: 0 0 auto;
    min-height: 44px;
    padding-inline: 20px;
}

/* Settings: two clean columns with branding receiving the extra room it needs. */
#tactics-pro-app .tp-fo-settings-grid {
    display: grid;
    grid-template-columns: minmax(300px, .78fr) minmax(0, 1.22fr);
    gap: 54px;
    align-items: start;
    margin: 0 !important;
}
#tactics-pro-app .tp-fo-settings-grid > * { min-width: 0; }
#tactics-pro-app .tp-fo-settings-grid .input-group { margin-bottom: 20px; }
#tactics-pro-app .tp-fo-settings-grid #atkFormationSelect,
#tactics-pro-app .tp-fo-settings-grid #defFormationSelect { margin-top: 9px; }
#tactics-pro-app .tp-brand-logo-editor {
    gap: 18px;
    align-items: center;
}

/* Roster screen: usage becomes quiet metadata, not a third competing card. */
#tactics-pro-app .tp-fo-roster-page { gap: 28px; }
#tactics-pro-app .tp-fo-usage-strip {
    display: grid;
    grid-template-columns: minmax(220px, auto) minmax(220px, 1fr);
    align-items: center;
    gap: 24px;
    padding: 14px 0 18px;
    border-bottom: 1px solid rgba(139,148,158,.13);
}
#tactics-pro-app .tp-fo-usage-strip .tp-form-header { margin: 0; }
#tactics-pro-app .tp-fo-usage-strip .tp-form-title { font-size: .86rem; }
#tactics-pro-app .tp-fo-usage-strip .tp-form-subtitle { font-size: .74rem; }
#tactics-pro-app .tp-fo-usage-strip .tp-usage-bar-container { margin: 0; }
#tactics-pro-app .tp-roster-grid--refined {
    grid-template-columns: minmax(0, 1.18fr) minmax(360px, .82fr);
    gap: 48px;
}
#tactics-pro-app .tp-roster-list-panel > .tp-form-header { padding-bottom: 14px; border-bottom: 1px solid rgba(139,148,158,.13); }
#tactics-pro-app .tp-roster-list-card {
    padding: 17px 0 !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(139,148,158,.13) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}
#tactics-pro-app .tp-roster-list-title { font-size: .92rem; font-weight: 680; }
#tactics-pro-app .tp-roster-delete {
    min-height: 30px;
    border-radius: 7px;
    background: transparent;
    border-color: rgba(248,81,73,.25);
    color: #ff7b72;
}
#tactics-pro-app .tp-roster-player-list { margin-top: 12px; }
#tactics-pro-app .tp-player-tag {
    border-radius: 7px;
    background: rgba(13,17,23,.42);
    border-color: rgba(139,148,158,.13);
}

/* Communications: spacious composer + library, with restrained selection cards. */
#tactics-pro-app .tp-fo-communications-page { gap: 28px; }
#tactics-pro-app .tp-comm-layout--refined {
    grid-template-columns: minmax(360px, .76fr) minmax(0, 1.24fr);
    gap: 52px;
}
#tactics-pro-app .tp-comm-sidebar {
    position: sticky;
    top: 18px;
    padding-top: 0 !important;
}
#tactics-pro-app .tp-comm-content-panel { min-width: 0; }
#tactics-pro-app .tp-comm-content-header {
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(139,148,158,.13);
}
#tactics-pro-app .tp-comm-count,
#tactics-pro-app .tp-content-badge {
    border: 0;
    border-radius: 5px;
    background: rgba(139,148,158,.08);
    color: #8b949e;
    box-shadow: none;
}
#tactics-pro-app .tp-selected-summary {
    border-radius: 8px;
    border-color: rgba(139,148,158,.16);
    background: rgba(13,17,23,.42);
}
#tactics-pro-app .tp-comm-grid {
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 10px;
    max-height: min(62vh, 660px);
}
#tactics-pro-app .tp-selectable-card {
    min-height: 104px;
    border-radius: 8px;
    border-color: rgba(139,148,158,.16);
    background: rgba(13,17,23,.4);
    box-shadow: none;
}
#tactics-pro-app .tp-selectable-card:hover {
    border-color: rgba(139,148,158,.32);
    background: rgba(22,27,34,.7);
}
#tactics-pro-app .tp-selectable-card.is-selected {
    border-color: rgba(88,166,255,.62);
    background: rgba(88,166,255,.075);
    box-shadow: none;
}

/* Existing account/workspace sections inherit the same restrained language. */
#tactics-pro-app .tp-fo-content-shell .tp-account-detail-row,
#tactics-pro-app .tp-fo-content-shell .tp-workspace-stat,
#tactics-pro-app .tp-fo-content-shell .tp-member-row,
#tactics-pro-app .tp-fo-content-shell .tp-reference-list-row,
#tactics-pro-app .tp-fo-content-shell .tp-reference-list > div {
    border-radius: 8px;
    box-shadow: none;
}

@media (max-width: 1050px) {
    #tactics-pro-app .tp-fo-settings-grid,
    #tactics-pro-app .tp-roster-grid--refined,
    #tactics-pro-app .tp-comm-layout--refined {
        grid-template-columns: 1fr;
        gap: 34px;
    }
    #tactics-pro-app .tp-comm-sidebar { position: static; }
    #tactics-pro-app .tp-fo-usage-strip { grid-template-columns: 1fr; gap: 12px; }
}
@media (max-width: 680px) {
    #tactics-pro-app .tp-fo-work-page { gap: 26px; padding-bottom: 30px; }
    #tactics-pro-app .tp-fo-build-fields { grid-template-columns: 1fr; gap: 19px; }
    #tactics-pro-app .tp-fo-build-fields .tp-fo-field-wide { grid-column: auto; }
    #tactics-pro-app .tp-fo-primary-action-row {
        align-items: stretch;
        flex-direction: column;
        gap: 14px;
    }
    #tactics-pro-app .tp-fo-primary-cta { width: 100%; }
    #tactics-pro-app .tp-comm-grid { grid-template-columns: 1fr; max-height: none; overflow: visible; }
    #tactics-pro-app .tp-fo-content-shell .tp-form-actions .btn { width: 100%; }
    #tactics-pro-app .tp-brand-logo-editor { align-items: flex-start; }
}

/* v2.0.31.14 — Coach Academy practical drill courses */
#tactics-pro-app .tp-academy-path--course {
    grid-template-columns: 44px minmax(0, 1fr) auto;
    align-items: start;
}
#tactics-pro-app .tp-academy-path--course .tp-academy-path-body {
    min-width: 0;
    display: grid;
    gap: 7px;
}
#tactics-pro-app .tp-academy-path--course .tp-academy-path-title-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}
#tactics-pro-app .tp-academy-path--course .tp-academy-path-title-row strong {
    margin: 0;
}
#tactics-pro-app .tp-academy-path--course .tp-academy-path-points {
    flex: 0 0 auto;
    color: var(--tp-primary) !important;
    font-size: .72rem !important;
    font-weight: 850;
}
#tactics-pro-app .tp-academy-path-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 5px;
}
#tactics-pro-app .tp-academy-path-actions .btn {
    width: auto;
    min-height: 36px;
    padding: 7px 11px;
    font-size: .76rem;
}
#tactics-pro-app .tp-academy-path--course > small {
    grid-column: 3;
    align-self: start;
    margin-top: 2px;
    white-space: nowrap;
}
#tactics-pro-app .tp-academy-path--course.is-locked {
    opacity: .62;
}
#tactics-pro-app .tp-academy-path--course.is-complete {
    border-color: rgba(126,231,135,.38);
    background: rgba(46,160,67,.07);
}
#tactics-pro-app .tp-academy-path--course.is-complete > small {
    color: #7ee787;
}
#tactics-pro-app .tp-academy-path--course.is-active {
    border-color: rgba(88,166,255,.34);
    background: rgba(88,166,255,.055);
}
@media (max-width: 760px) {
    #tactics-pro-app .tp-academy-path--course {
        grid-template-columns: 40px minmax(0, 1fr);
    }
    #tactics-pro-app .tp-academy-path--course > small {
        grid-column: 2;
        white-space: normal;
    }
    #tactics-pro-app .tp-academy-path--course .tp-academy-path-title-row {
        display: grid;
        gap: 3px;
    }
    #tactics-pro-app .tp-academy-path-actions .btn {
        width: 100%;
    }
}

/* v2.0.31.15 — Academy empty-surface progression + optional player positions */
#tactics-pro-app .tp-context-summary-muted {
    margin-left: 6px;
    color: var(--tp-text-muted);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
}
#tactics-pro-app .tp-context-task .tp-inp[aria-label="Player position"] {
    width: 100%;
    min-height: 42px;
}


/* v2.0.31.17 — Coach Academy All-Star verified real-use progression */
#tactics-pro-app .tp-academy-challenges {
    display: grid;
    gap: 16px;
}
#tactics-pro-app .tp-academy-challenges-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}
#tactics-pro-app .tp-academy-challenges-head > div {
    min-width: 0;
}
#tactics-pro-app .tp-academy-allstar-status {
    flex: 0 0 auto;
    padding: 7px 10px;
    border: 1px solid rgba(139,148,158,.24);
    border-radius: 8px;
    color: var(--tp-text-muted);
    background: rgba(13,17,23,.36);
    font-size: .72rem;
    font-weight: 800;
}
#tactics-pro-app .tp-academy-allstar-status.is-earned {
    color: #7ee787;
    border-color: rgba(126,231,135,.35);
    background: rgba(46,160,67,.08);
}
#tactics-pro-app .tp-academy-challenge-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}
#tactics-pro-app .tp-academy-challenge-grid > .tp-academy-challenge {
    display: grid;
    align-content: start;
    gap: 8px;
    min-width: 0;
    padding: 15px;
    border-radius: 10px;
    background: rgba(13,17,23,.34);
}
#tactics-pro-app .tp-academy-challenge.is-complete {
    border-color: rgba(126,231,135,.34);
    background: rgba(46,160,67,.07);
}
#tactics-pro-app .tp-academy-challenge.is-optional {
    border-style: dashed;
}
#tactics-pro-app .tp-academy-challenge-title {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}
#tactics-pro-app .tp-academy-challenge-title strong {
    font-size: .9rem;
}
#tactics-pro-app .tp-academy-challenge-title small {
    white-space: nowrap;
}
#tactics-pro-app .tp-academy-challenge-progress {
    height: 6px;
    overflow: hidden;
    border-radius: 999px;
    border: 0;
    background: rgba(139,148,158,.16);
}
#tactics-pro-app .tp-academy-challenge-progress > span {
    display: block;
    height: 100%;
    width: 0;
    border-radius: inherit;
    background: var(--tp-primary);
    transition: width .25s ease;
}
#tactics-pro-app .tp-academy-challenge.is-complete .tp-academy-challenge-progress > span {
    background: #7ee787;
}
#tactics-pro-app .tp-academy-challenge em {
    color: var(--tp-text-muted);
    font-size: .72rem;
    font-style: normal;
}
#tactics-pro-app .tp-academy-challenge em > strong {
    color: #fff;
}
#tactics-pro-app .tp-academy-challenge em > span {
    margin-left: 5px;
    color: var(--tp-primary);
    font-size: .68rem;
    font-weight: 800;
}
#tactics-pro-app .tp-academy-allstar-rule {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding-top: 14px;
    border-top: 1px solid rgba(139,148,158,.18);
}
#tactics-pro-app .tp-academy-allstar-rule > div {
    display: grid;
    gap: 3px;
}
#tactics-pro-app .tp-academy-allstar-rule > div > strong,
#tactics-pro-app .tp-academy-allstar-rule > strong {
    color: #fff;
}
#tactics-pro-app .tp-academy-allstar-rule > div > span {
    color: var(--tp-text-muted);
    font-size: .78rem;
}
#tactics-pro-app .tp-academy-allstar-rule > strong {
    flex: 0 0 auto;
    font-size: .78rem;
}
@media (max-width: 1080px) {
    #tactics-pro-app .tp-academy-challenge-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 640px) {
    #tactics-pro-app .tp-academy-challenges-head,
    #tactics-pro-app .tp-academy-allstar-rule {
        display: grid;
    }
    #tactics-pro-app .tp-academy-allstar-status {
        justify-self: start;
    }
    #tactics-pro-app .tp-academy-challenge-grid {
        grid-template-columns: 1fr;
    }
}