@font-face {
    font-family: "Mona Sans";
    src: url("../../assets/fonts/Mona-Sans.woff2") format("woff2 supports variations"), url("../../assets/fonts/Mona-Sans.woff2") format("woff2-variations");
    font-weight: 200 900;
    font-stretch: 75% 125%;
    unicode-range: U+0000-00FF, U+0100-024F;
}
@font-face {
    font-family: "Rubik";
    src: url("../../assets/fonts/Rubik.ttf") format("truetype");
    font-weight: 200 900;
    font-stretch: 75% 125%;
    unicode-range: U+0000-00FF, U+0100-024F;
}
@font-face {
    font-family: "IBM Plex Sans";
    src: url("../../assets/fonts/IBMPlexSans.ttf") format("truetype");
    font-weight: 200 900;
    font-stretch: 75% 125%;
}
:root {
    --bg: #3b3b3f;
    --panel-bg: #111111;
    --muted: #9e9384;
    --accent: #313131;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; background: var(--bg); color: var(--muted); font-family: "Mona Sans"; }
* {
    font-family: "Mona Sans";
}
.back-to-acas-link {
    position: absolute;
    top: 7px;
    left: 10px;
    color: #f1f1f1;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    padding: 8px 14px;
    border-radius: 6px;
    background-color: #252529;
    border: 2px solid #1f1f23;
    z-index: 10;
}
.tests-root {
    height: 100vh;
    display: flex;
    gap: 0;
    align-items: stretch;
}
.panel {
    height: 100%;
    background: transparent;
    overflow: auto;
}
#left-panel {
    flex-basis: 50%;
    min-width: 290px;
    padding: 18px;
}
.left-content {
    width: fit-content;
}
#splitter {
    width: 10px;
    background: var(--panel-bg);
    cursor: col-resize;
    -webkit-user-select: none;
    user-select: none;
    border-left: 1px solid grey;
}
#right-panel {
    flex-basis: 50%;
    min-width: 240px;
    padding: 18px;
    background: var(--panel-bg);
}
#controls { max-width: 480px; }
#controls h3 { margin-top: 0; color: #fff; font-size: 18px; }
#test-list { list-style: none; padding: 0; margin: 8px 0; }
#test-list li { margin-bottom: 8px; }
.test-btn {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 6px;
    background: rgba(255,255,255,0.02);
    color: var(--muted);
    border: 1px solid rgba(255,255,255,0.02);
    cursor: pointer;
}
.test-btn:hover { background: rgba(255,255,255,0.03); color: #fff; }
.test-title { font-weight: 700; text-align: left; align-items: center; flex-direction: row; }
.test-desc { font-size: 12px; opacity: 0.9; text-align: left; }
.test-meta { font-size: 12px; color: #b0afaa; }
.test-actions { display: flex; gap: 6px; }
button.small {
    font-size: 12px;
    padding: 6px 10px;
    border: 1px solid #888;
    border-radius: 4px;
    background-color: #353535;
    color: #c1c1c1;
    cursor: pointer;
    transition: all 0.15s ease;
}

button.small:hover {
    background-color: #525252;
    color: #e6e6e6;
}
/* test-root is where tests can create multiple boards */
.test-root {

}
/* responsiveness */
/* apply only on small screens with touch input (mobile) */
@media (hover: none) and (pointer: coarse) {
    .tests-root {
        flex-direction: column-reverse;
    }
}

/* small helper for centered content when no board */
.empty-placeholder { color: var(--muted); font-size: 14px; text-align: center; }

.top-note {
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--panel-bg);
    border-bottom: 1px solid grey;
    font-stretch: ultra-expanded;
    font-weight: 800;
    font-family: "Mona Sans";
}

.cg-wrap {
    width: 350px !important;
    height: 350px !important;
}

/* Live test styles */
.live-panel { background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); padding: 12px; border-radius: 8px; min-width: 260px; }
.live-stats { color: #e6e6e6; font-size: 13px; }
.live-stats .live-stats-row { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.live-count { font-weight:700; color:#bfe1ff; }
.live-chart { width:100%; height:80px; background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.02)); border-radius:6px; display:block; }
.live-autorestart { padding:6px 10px; border-radius:6px; border:1px solid rgba(255,255,255,0.04); background:rgba(0,0,0,0.25); color:#fff; }
.live-badge { display:inline-block; margin-left:8px; font-size:11px; padding:3px 6px; border-radius:6px; background:linear-gradient(180deg,#ff5f5f,#ff3b3b); color:#fff; font-weight:700;margin-bottom: 3px; }
.live-test-root { display:block; }