*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

:root{

    --bg:#0f172a;
    --surface:#1e293b;
    --surface2:#334155;
    --border:#475569;

    --accent:#3b82f6;
    --accentHover:#2563eb;

    --text:#f8fafc;
    --sub:#94a3b8;

    --radius:16px;
    --shadow:0 12px 30px rgba(0,0,0,.35);

    --transition:.2s ease;

}

body.light{

    --bg:#eef2f7;
    --surface:#ffffff;
    --surface2:#f3f6fb;
    --border:#cbd5e1;

    --text:#111827;
    --sub:#475569;

    --shadow:0 10px 25px rgba(0,0,0,.12);

}

body.theme-blue{

    --accent:#3b82f6;
    --accentHover:#2563eb;

}

body.theme-red{

    --accent:#ef4444;
    --accentHover:#dc2626;

}

body.theme-green{

    --accent:#22c55e;
    --accentHover:#16a34a;

}

body.theme-yellow{

    --accent:#eab308;
    --accentHover:#ca8a04;

}

body.theme-purple{

    --accent:#a855f7;
    --accentHover:#9333ea;

}

body.theme-orange{

    --accent:#f97316;
    --accentHover:#ea580c;

}

body.theme-gray{

    --accent:#64748b;
    --accentHover:#475569;

}

html{

    scroll-behavior:smooth;

}

body{

    background:var(--bg);
    color:var(--text);
    font-family:Arial,Helvetica,sans-serif;
    min-height:100vh;
    transition:background .25s,color .25s;

}

.topbar{

    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;

    padding:20px 24px;

    background:var(--surface);

    border-bottom:1px solid var(--border);

    box-shadow:var(--shadow);

}

.titleGroup h1{

    font-size:2rem;
    margin-bottom:6px;

}

.titleGroup p{

    color:var(--sub);

}

.headerControls{

    display:flex;
    align-items:center;
    gap:12px;

}

.iconButton{

    width:48px;
    height:48px;

    display:flex;
    justify-content:center;
    align-items:center;

    font-size:1.2rem;

}

#colorScheme{

    width:160px;

}

.layout{

    max-width:1700px;

    margin:24px auto;

    padding:0 20px;

    display:grid;

    grid-template-columns:minmax(0,3fr) 380px;

    gap:24px;

    align-items:start;

}
.workspace{

    height:50vh;

    overflow-y:auto;

    display:flex;

    flex-direction:column;

    gap:18px;

}

}

.playerCard{

    background:var(--surface);

    border:1px solid var(--border);

    border-radius:var(--radius);

    overflow:hidden;

    box-shadow:var(--shadow);

}

#player{

    width:100%;

    aspect-ratio:16/9;

    background:#000;

    position:sticky;

    top:0;

    z-index:10;

}

}

.infoPanel{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:12px;

}

.infoCard{

    background:var(--surface);

    border:1px solid var(--border);

    border-radius:14px;

    padding:16px;

    text-align:center;

    box-shadow:var(--shadow);

}

.finalCard{

    grid-column:span 2;

}

.label{

    display:block;

    color:var(--sub);

    margin-bottom:8px;

    font-size:.9rem;

}

.infoCard span:last-child{

    font-size:1.15rem;

    font-weight:bold;

}

.controlPanel{

    height:50vh;

    overflow-y:auto;

    display:flex;

    flex-direction:column;

    gap:18px;

}

}

.card{

    background:var(--surface);

    border:1px solid var(--border);

    border-radius:var(--radius);

    padding:20px;

    box-shadow:var(--shadow);

    animation:fadeIn .25s ease;

}

.card h2{

    margin-bottom:16px;

}

input,
textarea,
select{

    width:100%;

    background:var(--surface2);

    color:var(--text);

    border:1px solid var(--border);

    border-radius:12px;

    padding:14px;

    outline:none;

    transition:var(--transition);

}

input:focus,
textarea:focus,
select:focus{

    border-color:var(--accent);

}

textarea{

    resize:vertical;

    font-family:inherit;

}

button{

    border:none;

    border-radius:12px;

    background:var(--accent);

    color:#fff;

    padding:14px;

    font-size:.95rem;

    font-weight:600;

    cursor:pointer;

    transition:var(--transition);

}

button:hover{

    background:var(--accentHover);

}

button:active{

    transform:scale(.97);

}

.fpsGrid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:10px;

    margin-bottom:12px;

}

.fpsButton.active{

    background:#16a34a;

}

.customFPS{

    display:grid;

    grid-template-columns:1fr auto;

    gap:10px;

    margin-top:12px;

}

.controlsGrid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:10px;

}

.controlButton{

    min-height:52px;

}

.markerGrid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:12px;

}

.buttonGrid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:12px;

    margin-top:14px;

}

.buttonColumn{

    display:flex;

    flex-direction:column;

    gap:12px;

}

.hidden{

    display:none;

}

.debugTable{

    width:100%;

    border-collapse:collapse;

    margin-top:16px;

}

.debugTable td{

    padding:12px;

    border-bottom:1px solid var(--border);

    word-break:break-word;

}

.debugTable td:first-child{

    color:var(--sub);

    width:45%;

}

.footer{

    margin-top:32px;

    padding:24px;

    text-align:center;

    color:var(--sub);

    border-top:1px solid var(--border);

}

.footer strong{

    color:var(--accent);

}

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:var(--surface);

}

::-webkit-scrollbar-thumb{

    background:var(--border);

    border-radius:999px;

}

::-webkit-scrollbar-thumb:hover{

    background:var(--accent);

}

@keyframes fadeIn{

    from{

        opacity:0;

        transform:translateY(8px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

@media (max-width:1200px){

    .layout{

        grid-template-columns:1fr;

    }

    .workspace{

        position:static;

    }

    .controlPanel{

        margin-top:8px;

    }

}

@media (max-width:768px){

    .topbar{

        flex-direction:column;

        align-items:stretch;

    }

    .headerControls{

        width:100%;

    }

    .headerControls select{

        flex:1;

    }

    .layout{

        padding:0 12px 24px;

    }

    .infoPanel{

        grid-template-columns:repeat(2,1fr);

    }

    .finalCard{

        grid-column:1 / -1;

    }

    .controlsGrid{

        grid-template-columns:repeat(4,1fr);

    }

}

@media (max-width:520px){

    .infoPanel{

        grid-template-columns:1fr;

    }

    .finalCard{

        grid-column:auto;

    }

    .controlsGrid{

        grid-template-columns:repeat(2,1fr);

    }

    .fpsGrid{

        grid-template-columns:repeat(3,1fr);

    }

    .customFPS{

        grid-template-columns:1fr;

    }

    .markerGrid,

    .buttonGrid{

        grid-template-columns:1fr;

    }

    .infoCard{

        padding:12px;

    }

    .infoCard span:last-child{

        font-size:1rem;

    }

}

@media (max-width:380px){

    .controlsGrid,

    .fpsGrid{

        grid-template-columns:1fr;

    }

    button{

        width:100%;

        padding:12px;

        font-size:.9rem;

    }

    input,

    textarea,

    select{

        padding:12px;

    }

    .debugTable td{

        display:block;

        width:100%;

        padding:6px 0;

        border-bottom:none;

    }

    .debugTable tr{

        display:block;

        padding:10px 0;

        border-bottom:1px solid var(--border);

    }

    }