body{

margin:0;

font-family:Segoe UI,sans-serif;

background:#081526;

color:white;

}

.royalties-header{

display:flex;

justify-content:space-between;

align-items:center;

padding:20px 40px;

background:#10233f;

}

.royalties-header h1{

margin:0;

color:#64ffda;

}

.royalties-header nav{

display:flex;

gap:18px;

}

.royalties-header nav a{

text-decoration:none;

color:white;

font-weight:600;

}

.royalties-container{

padding:40px;

}

.royalty-summary{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(220px,1fr));

gap:20px;

margin-bottom:40px;

}

.royalty-card{

background:#122849;

padding:25px;

border-radius:16px;

text-align:center;

box-shadow:0 0 15px rgba(100,255,218,.12);

transition:.3s;

}

.royalty-card:hover{

transform:translateY(-6px);

box-shadow:0 0 25px #64ffda;

}

.royalty-card span{

display:block;

margin-top:15px;

font-size:32px;

font-weight:bold;

color:#64ffda;

}

.royalty-table{

background:#10233f;

padding:25px;

border-radius:16px;

margin-bottom:35px;

}

table{

width:100%;

border-collapse:collapse;

}

th,td{

padding:14px;

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

text-align:left;

}

th{

color:#64ffda;

}

.split-panel,

.payout-panel{

background:#122849;

padding:25px;

border-radius:16px;

margin-bottom:30px;

}

#splitContainer{

display:grid;

gap:15px;

}

.split-row{

display:flex;

justify-content:space-between;

background:#163051;

padding:15px;

border-radius:12px;

}

select{

padding:12px;

border:none;

border-radius:10px;

background:#1c3354;

color:white;

margin-right:20px;

}

button{

padding:12px 24px;

border:none;

border-radius:10px;

background:#64ffda;

color:#081526;

font-weight:bold;

cursor:pointer;

}

button:hover{

background:white;

}

@media(max-width:768px){

.royalties-header{

flex-direction:column;

gap:20px;

}

.royalties-header nav{

flex-wrap:wrap;

justify-content:center;

}

}