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

body{
background:#0f1117;
color:white;
font-family:Arial,sans-serif;
min-height:100dvh;
overflow-x:hidden;

padding-top:env(safe-area-inset-top);
padding-bottom:env(safe-area-inset-bottom);
}

.topbar{

height:60px;

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

padding:0 16px;

background:#11151d;

border-bottom:
1px solid rgba(255,255,255,.06);

box-shadow:
0 4px 20px rgba(0,0,0,.35);

}

.logo-block{

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

}

.logo-icon{
width:170px;
object-fit:contain;
filter:
drop-shadow(0 0 10px rgba(0,180,255,.45));

}

.logo-menu{
width:100px;
object-fit:contain;
filter:
drop-shadow(0 0 10px rgba(0,180,255,.45));
    margin-bottom:20px;

}

.logo-menu-settings{
width:170px;
object-fit:contain;
filter:
drop-shadow(0 0 10px rgba(0,180,255,.45));
    margin-bottom:20px;
}

.logo-block span{

font-size:10px;

letter-spacing:3px;

margin-top:4px;

color:#7f8896;

}

.menu-btn,
.settings-btn{

width:34px;
height:34px;

border:none;
border-radius:10px;

background:#1b2230;

color:white;

font-size:20px;

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

}

.tabs{
display:flex;
gap:8px;

}

header p{
color:#aaa;
}

.tab-btn{
flex:1;
border:none;
border-radius:11px;
padding:5px;
background:#1a1f2a;
color:white;
font-size:13px;
cursor:pointer;
}

.tab-btn.active{
background:#ff3b30;
}

.viewer{

height:calc(100dvh - 60px - 10vh);

display:flex;

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

overflow:hidden;

}

#human3d{

width:100%;

height:85%;

max-width:700px;

background:transparent;

}

.muscle-info{
 display:flex;
position:fixed;

left:0;
right:0;
bottom:0;

height:8vh;
min-height:40px;

padding:12px 20px;

background:
linear-gradient(
180deg,
rgba(17,21,29,.92),
rgba(10,12,18,.98)
);

backdrop-filter:blur(20px);
border-top:
1px solid rgba(255,255,255,.06);
box-shadow:
0 -10px 30px rgba(0,0,0,.35);
z-index:999;
display:flex;
align-items:center;
overflow:hidden;
}

.muscle-logo{
    width:50%;
    max-width:50px;
    margin:auto;
    height:auto;
}

.muscle-left{
    flex:8;
    overflow:hidden;
}

.muscle-right{
    flex:2;
 
    justify-content:center;
    align-items:center;
    text-align:center;
}

.muscle-title{
font-size:13px;
letter-spacing:1px;
color:#7f8896;
margin-bottom:10px;
}

.muscle-description{
font-size:11px;
line-height:1.2;
color:white;
font-weight:500;
}

@keyframes diamondFlow{

0%{
background-position:0% 50%;
}

100%{
background-position:300% 50%;
}

}

@keyframes diamondGlow{

0%{
filter:
drop-shadow(0 0 4px rgba(180,220,255,.25));
}

50%{
filter:
drop-shadow(0 0 14px rgba(255,255,255,.55));
}

100%{
filter:
drop-shadow(0 0 4px rgba(180,220,255,.25));
}

}

.menu-overlay{

position:fixed;

inset:0;

background:
rgba(0,0,0,.45);

backdrop-filter:
blur(12px);

opacity:0;
visibility:hidden;

transition:.3s;

z-index:5000;

}

.menu-overlay.show{

opacity:1;
visibility:visible;

}

.side-menu{

position:absolute;

top:0;
left:0;

width:min(320px, 85vw);
height:100%;

background:
rgba(17,21,29,.82);

backdrop-filter:
blur(20px);

border-right:
1px solid rgba(255,255,255,.08);

padding:25px;

transform:
translateX(-100%);

transition:.3s;

}

.menu-overlay.show .side-menu{

transform:
translateX(0);

}

.menu-header{

font-size:22px;
font-weight:700;

margin-bottom:30px;

color:white;

}

.side-menu a{

display:block;

padding:14px 0;

text-decoration:none;

color:white;

font-size:16px;

border-bottom:
1px solid rgba(255,255,255,.05);

}

.admin-overlay{

position:fixed;
inset:0;

background:
rgba(0,0,0,.65);

backdrop-filter:
blur(15px);

display:none;

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

z-index:10000;

}

.admin-overlay.show{

display:flex;

}

.admin-login{

width:min(380px,90vw);

background:
rgba(17,21,29,.92);

padding:25px;

border-radius:20px;

border:
1px solid rgba(255,255,255,.08);

box-shadow:
0 0 30px rgba(0,0,0,.45);

}

.admin-login h2{

margin-bottom:20px;

text-align:center;

}

.admin-login input{

width:100%;

padding:12px;

margin-bottom:12px;

border:none;

border-radius:10px;

background:#1b2230;

color:white;

}

.admin-login button{

width:100%;

padding:12px;

border:none;

border-radius:10px;

background:#00a8ff;

color:white;

font-weight:700;

cursor:pointer;

}

#adminError{

margin-top:12px;

color:#ff6b6b;

text-align:center;

}

.settings-menu{

left:auto;
right:0;

border-right:none;

border-left:
1px solid rgba(255,255,255,.08);

transform:
translateX(100%);

}

.menu-overlay.show .settings-menu{

transform:
translateX(0);

}

.admin-panel{

width:min(900px,95vw);
height:min(700px,90vh);

overflow:auto;

background:#11151d;

border-radius:20px;

padding:20px;

border:
1px solid rgba(255,255,255,.08);

}

.admin-header{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:20px;

}

.admin-header button{

width:40px;
height:40px;

border:none;

border-radius:10px;

background:#1b2230;

color:white;

cursor:pointer;

}

#loadGroupsBtn{

padding:12px 20px;

border:none;

border-radius:10px;

background:#00a8ff;

color:white;

font-weight:700;

cursor:pointer;

margin-bottom:20px;

}

#groupsTable,
#exercisesTable{

width:100%;

border-collapse:collapse;

}

#groupsTable th,
#groupsTable td,
#exercisesTable th,
#exercisesTable td{

padding:12px;

border-bottom:
1px solid rgba(255,255,255,.08);

text-align:left;

vertical-align:top;

}

.cell-input,
.exercise-muscle{

width:100%;

padding:10px;

background:#1b2230;

border:none;

border-radius:8px;

color:white;

font-size:14px;

}

.cell-textarea{

width:100%;

min-height:80px;

padding:10px;

background:#1b2230;

border:none;

border-radius:8px;

color:white;

font-size:14px;

resize:vertical;

font-family:inherit;

}

.admin-tabs{

display:flex;

gap:2px;

margin-bottom:20px;

padding:6px;

background:#0c1018;

border-radius:14px;

border:1px solid rgba(255,255,255,.08);

}

.admin-tab{

flex:1;

padding:14px 20px;

border:none;

border-radius:10px;

background:transparent;

color:#8fa0b8;

cursor:pointer;

font-size:15px;

font-weight:700;

transition:.25s;

}

.admin-tab:hover{

color:white;

}

.admin-tab.active{

background:
linear-gradient(
180deg,
#1ea7ff,
#0077cc
);

color:white;

box-shadow:
0 0 15px rgba(0,168,255,.35);

}

.admin-content{

margin-top:15px;

}

.ga-switch{
    position:relative;
    display:inline-block;
    width:45px;
    height:12px;
}

.ga-switch input{
    opacity:0;
    width:0;
    height:0;
}

.ga-slider{

    position:absolute;

    inset:0;

    cursor:pointer;

    border-radius:30px;

    background:#1b2230;

    transition:.3s;

    border:
    1px solid rgba(29,145,239,.35);

}

.ga-slider:before{

    content:"";

    position:absolute;

    width:20px;
    height:20px;

    left:0px;
    top:-4px;

    border-radius:50%;

    background:
    linear-gradient(
        180deg,
        #E5E8ED,
        #A9AFBB
    );

    transition:.3s;

    box-shadow:
    0 4px 10px rgba(0,0,0,.45);

}

.ga-switch input:checked + .ga-slider{

    background:
    linear-gradient(
        180deg,
        #1D91EF,
        #1351AA
    );

    box-shadow:
    0 0 15px rgba(29,145,239,.55);

}

.ga-switch input:checked + .ga-slider:before{

    transform:
    translateX(30px);

}

.settings-row{

    display:flex;

    justify-content:space-between;

    align-items:center;

    min-height:56px;

    padding:14px 0;

    color:white;

    font-size:16px;

    border-bottom:
    1px solid rgba(255,255,255,.05);

}