#window-mediaplayer .window-body,
#window-url-dialog .window-body { 
    background-color: var(--win-gray) !important; 
    border: none !important; 
    padding: 0 !important;  
    display: flex;
    flex-direction: column;
    height: 100%;
}

#window-mediaplayer .menu-bar {
    padding: 2px 0 2px 2px;
    margin-bottom: 0;
    background-color: var(--win-gray);
    display: flex;
    font-family: var(--system-font);
    font-size: 11px;
}

.wmp-menu-item {
    padding: 2px 6px;
    cursor: default;
    color: var(--win-black);
    position: relative;
}
.wmp-menu-item:first-letter { text-decoration: underline; }
.wmp-menu-item:hover {
    background-color: var(--win-blue);
    color: var(--text-inverted);
}

.wmp-content {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 2px;
    gap: 2px;
    box-sizing: border-box;
}

.wmp-screen-container {
    flex: 1;
    background-color: var(--win-black);
    border-top: 1px solid var(--border-dark);
    border-left: 1px solid var(--border-dark);
    border-right: 1px solid var(--win-white);
    border-bottom: 1px solid var(--win-white);
    margin: 2px;
    position: relative;
    overflow: hidden;
    
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-disabled);
}

#wmp-artwork {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.3;
    filter: grayscale(100%);
    transition: opacity 0.5s, filter 0.5s;
}

.wmp-seek-container {
    display: flex;
    align-items: center;
    padding: 4px 6px;
    height: 24px;
}

.wmp-slider {
    appearance: none;
    width: 100%;
    background: transparent;
    cursor: default;
}
.wmp-slider:focus { outline: none; }

.wmp-slider::-webkit-slider-runnable-track {
    width: 100%;
    height: 4px;
    background: var(--win-gray);
    border-top: 1px solid var(--border-dark);
    border-left: 1px solid var(--border-dark);
    border-right: 1px solid var(--win-white);
    border-bottom: 1px solid var(--win-white);
    box-shadow: inset 1px 1px 0 var(--win-black);
}

.wmp-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 14px;
    width: 9px;
    background: var(--win-gray);
    border-top: 1px solid var(--win-white);
    border-left: 1px solid var(--win-white);
    border-right: 1px solid var(--win-black);
    border-bottom: 1px solid var(--win-black);
    margin-top: -6px; 
}

.wmp-controls-row {
    display: flex;
    align-items: center;
    padding: 2px 4px;
    gap: 10px; 
    margin-bottom: 2px;
}

.wmp-btn-group {
    display: flex;
    gap: 0;
}

.wmp-btn {
    width: 28px;
    height: 24px;
    background: var(--win-gray);
    border: none;
    border-top: 1px solid var(--win-white);
    border-left: 1px solid var(--win-white);
    border-right: 1px solid var(--win-black);
    border-bottom: 1px solid var(--win-black);
    box-shadow: 1px 1px 0 var(--border-dark); 
    
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 2px;
}

.wmp-btn:active {
    border-top: 1px solid var(--win-black);
    border-left: 1px solid var(--win-black);
    border-right: 1px solid var(--win-white);
    border-bottom: 1px solid var(--win-white);
    box-shadow: none;
    padding-top: 2px;
    padding-bottom: 0;
}

.wmp-icon {
    width: 10px;
    height: 10px;
    fill: var(--win-black);
}

.wmp-statusbar {
    display: flex;
    gap: 2px;
    padding: 0 2px;
    margin-bottom: 2px;
    font-size: 10px;
    font-family: var(--system-font);
}

.wmp-status-panel {
    border-top: 1px solid var(--border-dark);
    border-left: 1px solid var(--border-dark);
    border-right: 1px solid var(--win-white);
    border-bottom: 1px solid var(--win-white);
    padding: 2px 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--text-main);
}

.wmp-status-main { flex: 1; }
.wmp-status-time { width: 70px; }

.wmp-vol-icon {
    width: 16px;
    height: 16px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02z'/%3E%3C/svg%3E") no-repeat center;
    opacity: 0.6;
}

.url-dialog-content {
    padding: 12px; 
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    height: 100%; 
    background-color: var(--win-gray);
    box-sizing: border-box;
}

.url-input-label {
    font-family: var(--system-font);
    font-weight: 400;
    margin-bottom: 5px;
    color: var(--win-black);
}

.url-input {
    height: 22px;
    border-top: 1px solid var(--border-dark);
    border-left: 1px solid var(--border-dark);
    border-right: 1px solid var(--win-white);
    border-bottom: 1px solid var(--win-white);
    box-shadow: inset 1px 1px 0 var(--win-black);
    background: var(--win-white);
    padding: 2px 4px;
    font-family: var(--system-font);
    width: 100%;
    box-sizing: border-box;
    outline: none;
}

.dialog-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
    margin-top: 5px;
}

.dialog-btn {
    min-width: 75px;
    height: 23px;
    font-family: var(--system-font);
    font-size: 11px;
    background-color: var(--win-gray);
    color: var(--win-black);
    
    border-top: 1px solid var(--win-white);
    border-left: 1px solid var(--win-white);
    border-right: 1px solid var(--win-black);
    border-bottom: 1px solid var(--win-black);
    box-shadow: 1px 1px 0 var(--border-dark);
}

.dialog-btn:active {
    border-top: 1px solid var(--win-black);
    border-left: 1px solid var(--win-black);
    border-right: 1px solid var(--win-white);
    border-bottom: 1px solid var(--win-white);
    box-shadow: none;
    transform: translate(1px, 1px);
}

.dialog-btn:focus {
    outline: 1px dotted var(--win-black);
    outline-offset: -4px;
}